Improve the agility of the UI development

Nowadays, UI holds a great power; thanks to Javascript and other UI frameworks. We now have better control over the UI and can develop the UI with complex functionalities effectively.

But, there are many factors that can affect the agility of UI development like

• Code structure
• Code complexity
• Code readability and quality
• Blah blah blah…

But wait…. in that blah blah blah, one thing is “a LOT of manual and monotonous work” and we’re going to discuss that in this blog.

As a developer, I don’t like specifically 3 things

• manual work
• manual work
• and manual work

And what makes me reduce it is getting bored with it.

I am not an automation addict but yes I choose to automate where it helps.

Let’s have a look at some scenarios where I applied automation in different ways

SCENARIO 1

In one of my projects, there was a requirement to have element ids (HTML ids) attached to each interactable element so that the QA/Automation team can easily write selenium test cases on that. It was a huge component-based project having around a hundred UIs and few thousands of components

And the funny part was we haven’t even attached id to a single HTML element!

– That is a lot of manual work, right!

But what helped us was the very good and the standard code structure. And By doing the following two things, we achieved the goal within a week.

• The script which automatically adds ids to each element of every HTML file
• Own Chrome plugin

Script

• The script can be written in any language of our choice with which we’re comfortable. I chose Python as I’m familiar with it and it requires very little effort.
• The other thing needed was the knowledge about regular expression
• And with that, I was able to attach ids to most of the places… *Example of a simple script In the actual work, only the source code folder path was given as input and there were multiple scripts used which scanned the folder and attached ids to the HTML files based on logic written in files, Scripts can be used for many other common changes over the project

Chrome Plugin

If you read the last point, I said “most of the places” so there are still some places missing. Also if there is a new component created or a new code added how to verify it has ids attached to proper places.
So I’ve created my own chrome plugin which highlights the elements which do not have ids attached to it on the browser, so developers can easily attach ids to it.

And by the above two steps, we have added over 1L ids

The scripts can be used for various purposes and not just for the common modification on the UI. The other things can be done through scripts are:

• Search for text in a file or across multiple files
• Create, update, move, and rename files and folders
• Search the Web and download online content
• Update and format data in Excel spreadsheets of any size
• Split, merge, watermark, and encrypt PDFs
• Send reminder emails and text notifications
• Fill out online forms
• Create a batch job

And through a browser plugin, we can test various things on the UI

• Accessibility of the UI
• Number of watchers in the UI
• UI performances and API request counts

SCENARIO 2

Mostly new frameworks provide automatic bundling and reloading functionality which is very helpful. In my case, I have to manually run the command to bundle the code and run the HTTP-server in the bundled code directory… although I had to run HTTP-server only once but on every change I had to run that webpack-command to build and bundle the UI and manually reload the page after the code was bundled. Webpack watch functionality was not an option in my case due to some issues.

• First, I have created a shell script that keeps watching file changes and on the change, it will automatically bundle the code. It worked and I have used that for a long time… Though I was not satisfied as I still have to check if the UI bundled or not and then reload the UI…..
• Well, I am not that lazy but the general tendency of humans nowadays is let’s check what’s happening on social media until this process gets completed and within a few seconds we’re in another world….and we get back after a time in which we can bundle the UI 50 times 🙂 The script needed to be evolved or I had to do something else which can help me more!

So I had created a simple node server. But We already have an HTTP-server, DB-server and webpack (build & bundle) process and a new server!!!

Well, what I could do here is provide the HTTP-server functionality through node-server and I have done that…
What else I have done through the node server?

Created APIs which bundle the code on requests
But who makes the API calls?

Added a button on the UI which calls this API and on completion of the request it reloads the screen
Confused? But even if I have a button on the UI, I have to press it after making a change to the code in ide/editor and moving back to UI. So that’s it? just replaced the command with a button.

NO!

That’s not all….. now we have a powerful node server…..we can do many things with it and what I have done with the help of the node server and excellent feature-rich Ace editor library is, I have created an inline-editing mode on the browser……

So one does not have to navigate to ide/editor but just edit the code inline and save it directly to the source code.

Now if you look at the first scenario… We had a chrome tool that highlights the elements without ids… we can easily now attach ids on it without remembering which elements do not have ids. just click on which element does not have id and attach ids to it inline…

We all face a lot of manual work in projects regularly, which can be automated programmatically. It may take time at first but helps us a lot once it gets completed and saves a lot of time thereafter