Tech/Engineering

Rapid UI development for Druva web applications

May 1, 2020 Anup Satish Kubade, Senior Software Engineer

Web user interface (UI) has been transformed by new technology and performance metrics in the last decade. At Druva, we incorporate these transformational UI advancements in our web applications, ensuring great performance and user experience for our customers.

By adopting the latest trends in UI, we achieve high speed and performance in Druva’s web applications. To continue with this performance, we are building our web applications using javascript libraries like React JS, Redux JS, React-Virtualized, etc. Druva has multiple web applications and we have already ensured that all of our products look and behave exactly the same by building our own common components library.

To increase the UI development speed, the common component library certainly helped the developers by offering high-quality components. But still, the developers needed to spend their time and effort going through the documentation to understand the usage of these components. Thus, we initiated autocompleting the component code with its basic properties.

The first step

The very first step was to choose the right set of tools for our UI development. Visual Studio Code (VS Code) editor is popular among developers because of its IntelliSense (a code-completion aid that includes a number of features: List Members, Parameter Info, Quick Info, and Complete Word), debugging, and most importantly — extensions. You will find different types of free extensions which will make your life easier as a developer. For instance, the extension to format and beautify the code, code auto-generation, spelling correction, etc.

At Druva, UI developers chose VS Code as our preferred editor for UI development. We wrote our own VS Code extension that will auto-generate the component code and reduce time spent searching through the documentation for syntaxes and properties.

The extension comes to reality

We have investigated the recipe to prepare a VS Code extension. VS Code has some extension categories like themes, formatters, linters, snippets, and we opted to start with our own VS Code snippet extension from scratch. As the name indicates, this extension quickly generated code snippets making coding fun and easy. Now you don’t need to memorize the basic syntax of any component.

For instance, one of the widely used components in any web application is the button. Now, this button may come in many flavors. It could be a primary action button like ‘submit form,’ or a general button like ‘next’ button, or a ‘link’ button to either navigate to another page or open a contextual dialog box. So, any button should at least possess three main properties: type, label, and a click handler. You can see below how this button is auto-generated by our extension.

button

Challenges

Personally, building such an extension was not that difficult. But making it developer-friendly was the real challenge. There are many code snippet extensions available for ‘React’ in the VS Code marketplace that provides many code snippets. But the real problem was to memorize all of the prefixes. One can only memorize the prefixes used frequently. For instance:

Prefix Snippet
imr “import React from ‘react’;”
impt “import PropTypes from ‘prop-types’;”

To solve this problem, we went back to the common component library’s documentation. And decided to create prefixes out of the component’s real name. For instance:

Prefix Snippet
@Button <Button type=”secondary” label=”” onClick={} />
@Input <Input type=”text” name=”” placeholder=”” onChange={} />

This technique worked very well. Instead of using acronyms for the component (like ‘btn’ for button and ‘inp’ for input), we used the full name of the component starting with @. This way, it became very easy to memorize the prefixes as developers already know the names of the components made available by the library. The @ has grouped all of the prefixes provided by our own extension without conflicting with any pre-installed extensions.

Here is the code snippet for the simple login form to demonstrate how this extension helps developers.

form

Future enhancements

In any react application, every component that you use needs to be imported from a package. Currently, we have a prefix per component to inject the import snippet for the component. For instance, @ImpButton will generate the snippet ‘import button’ from “orion/lib/button.” In future versions, we will automatically inject the import statements along with the components itself.

With every release of the common component library, we also release the new version of this extension to support the changes introduced in the new release of the library.

Conclusion

At Druva, UI developers use this extension daily, which is helping us to build UI screens very quickly. Now, we don’t need to memorize the API contracts for the new components anymore.

Sometimes small techniques prove to be efficient enough to solve time-critical issues. Because this extension is effective in preserving our developer’s precious time, they can invest it in some other meaningful work.

To experience our cloud backup and recovery solution join us for Tuesday Live!

Druva and sfApex deliver the best of SaaS data protection and management for Salesforce | Learn how sticky-promo-icon-carrot Druva and sfApex | Learn more sticky-promo-icon-carrot topbar-DxP-logo-navy