DEV Community

Gabriel
Gabriel

Posted on • Updated on

DEV-only tooling for Web Applications

Hi All,

At work, I am working on a quite complex web application that presents the user with a flow with a series of pages that gather user data. If the user wants to reach a page, she has to go through all the flow to reach it. Sometimes this can mean as much as 10 pages, with 4-10 seconds of saving time with the backend between pages.

We, developers, used to have to go through the same process every time we wanted to make a change to one of these pages. So you can imagine the pain of revisiting a page on the flow multiple times.

I came up with a tool that allows you to refresh the page in place, by copying the user data in sessionStorage and recreating the flow up to the very step where you left it. This happens almost instantly and saves us many hours of combined time.

My problem is that the tool is hard to set up and this makes other devs reluctant to use it. I have in a separate branch, but it requires tweaking files that get constantly modified, causing merge conflicts every time we want to merge it with our actual code.

I have thought of using webpack and a variable replaced at compilation time based on environment, so we can have it available only in our locals. The problem is that the code would need to be there along with the Production code, even if deactivated.

I struggle to find a better way to make it easier to maintain and use. Does anybody have a strong argument against not merging dev-only code along with production code? What could go wrong? Are there any alternatives to the branch-based approach?

Thank you.

Top comments (4)

Collapse
 
rhymes profile image
rhymes

Is there a way you can convince another dev at your job to take a look at it? Maybe with the endorsement of someone else you might get it merged in your main line and keep it behindn a feature flag so it won't be activated by default for users

Collapse
 
hamsterasesino profile image
Gabriel

Thanks for your answer.

Well, there's kind of a divide between people who think it should not be there on the main line and people who think it is ok as long as there is a flag controlling it.

Thing is none of us have real experience with web applications outside this project. So I am interested in knowing how do other frontend devs deal with this.

Collapse
 
philnash profile image
Phil Nash

Keeping things behind a flag and only turned on in particular environments or for particular accounts is a common practice in web development, so I agree this is a good idea.

Want an example? GitHub has a staff mode where they can browser github.com and see stats on how the page loads in production. Check out some of the screenshots in this article to see it in action.

Thread Thread
 
hamsterasesino profile image
Gabriel

This is exactly what I was looking for, thanks!