How To Boost Your Front-End Performance?

There are many design patterns in the software development world, but it’s up to us as developers to understand and use the ones that add real value to our project. Design patterns help us to have a maintainable, flexible, and readable codebase. Many frontend libraries make extensive use of patterns to achieve scalability while maintaining simplicity of design. For example, React is using Composite to render complex UI from small, composable render functions, React-Redux is using Decorators to connect React components to data on a Redux store and Babel is using Visitors to allow plugins to inspect and modify source code. In any case, design patterns along with principles, such as like DRY or KISS can be very helpful in organizing your code and increasing the clarity of your work. This makes it easier to communicate the purpose of your code to others in a clear and concise manner. 

The more packages you have, the more you need efficient bundling. Initial load time is the very last thing you want to sacrifice. It’s the very reason we have bundlers.

Before ECMAScript modules were supported by browsers, module bundlers organized and combined many files of Javascript code into one file. Today’s module bundlers can do much more than just merge modules together. They allow you to write your code in a developer-friendly way and then convert it into browser friendly terms. With Webpack, Rollup, Parcel, etc. you can:

• Build optimisations like tree-shaking, code-splitting, scope-hoisting
• Minify HTML, CSS, SVG and other files assets for production
• Bundle Javascript code into whatever version of ECMAScript you wish to support
• Error logging and more

They’re often released as a CLI tool that you can use to run development servers, watch changing files, build production, and serve static.

Let’s further automate our frontend development process. The advantage of task runners is their ability to chain tasks, e.g. lint code before the build step. They provide several capabilities to make your developer life easier:

• Validating/linting HTML, CSS, JavaScript, and JSON files
• Transpiling ES6 JavaScript code to ES5 (using Babel, Traceur, or TypeScript)
• Running unit tests and end-to-end tests
• Concatenating and minimizing CSS and JavaScript files (with the help of module bundlers)
• Serving static files via HTTP
• Enabling hot reload

Gulp is probably the most well-known task runner. However it seems to be losing against npm scripts and Webpack.

Other helpful tools available for your code are linters and formatters. Linters flag bugs and bad practices, when formatters fix your code to match style guides.

Prettier is very good for fixing style (spacing, line jumps, comments, etc.) which helps enforce programming and formatting rules that can be easily automated. ESlint analyzes code statically to flag programming errors, catch bugs, stylistic errors, and suspicious constructs using the abstract syntax tree or AST. Both of these are configured in a sane way, i.e. so that they aren’t constantly trying to fight with each other on how to format things.

(random side note: Like Prettier’s documentation says, it really should be installed as an exact version. I’ve also really enjoyed having Prettier set up as a pre-commit hook, since that makes sure all my and other people’s mess is run through Prettier for sure.)

We spend a lot of time in our IDE, and every once in a while we encounter those little frustrating issues that slow us down. This can be fixed with useful VS Code extensions for frontend development, which can span from fine productivity boosters to advanced debugging helpers. For example, I use Jest runner to execute individual tests, Git Lens to visualize version control, Hocus Pocus to create missing code and Abracadabra to refactor actions. You can also add language or framework specific plugins, such as React code snippets. Moreover, VS Code allows you to define your own snippets and share them with your colleagues. This way you can reuse existing code within your team, moving forward faster.

Frameworks are an important part of development. If you use them for the task they were designed for, you can make your life as a developer much easier and drastically improve the speed at which you complete your tasks.

There are many UI component libraries available, such as MUI, Semantic UI, Ant design, Vaadin, etc., that can help you save time while styling. Using a CSS preprocessor like Sass you can write CSS more conveniently and use variables, mixins, etc. Tailwind CSS gives you some useful utility classes to style your app directly in the markup. The abstractions provided by JavaScript frameworks like React, Svelte and Vue are helpful for everyday tasks.

Waiting for a backend implementation to be complete can be annoying and leads to unnecessary delays. Decoupling it with the help of API contracts helps a bit. Even more helpful is a fake backend that you can get up and running in a few seconds and that returns required data in the agreed format. JSON server is a great package to create a fake server. That server can use REST API like get, post, put and delete. You could also implement a cookie solution. Create a cookie with the path that matches the backend service and another one with the desired response. Write a script that runs on API Connect (or any other API management platform) and check for the first cookie and if found, return the content of the second — instead of the real backend response. With a fake backend you can test your error handling (e.g. getting 403 or 500 http error) and define data with specific properties to test some edge cases. A local solution with a custom proxy is also possible.

To test or not to test — that is often the question in small projects and proofs of concepts. When you go with a quick-and-dirty solution, there is no time for tests. The simple logic states — you either deliver new features or write tests. So how do tests actually help to speed up feature delivery?

First of all, tests should be automated as much as possible. I believe you should have mostly unit tests, some integration tests, and a couple of very critical end to end flows.

A good example is field validators in React. A couple of scenarios can be tested via an end-to-end method to make sure that the validation text is displayed correctly (e.g. with the correct error class). However, the heavy lifting of all possible error types and edge cases should be tested via — way faster — unit tests.

To speed up feature delivery, you must ensure that you don’t break existing functionality. In this case, automated regression testing is your best friend. A solid, reliable test base is essential for regression testing. Some really advances testing tools are Cypress (end-to-end) and Testing Library (unit and integration tests).

Writing code for your test scenarios means the transition from manual to machine testing. It already helps you to speed up the delivery, but the truly significant gain comes from test automation. The testing step has to be triggered automatically in your delivery pipeline. This is our next point.

CI/CD, which is a process that automates the transition of code from a commit to production, falls under DevOps and combines the practices of continuous integration and continuous delivery. This process includes the build, test, and deploy phases, as well as infrastructure provisioning. CI/CD eliminates the need for manual human intervention, which was traditionally required to get new code into production. This process ensures that code is tested for quality and reliability, making the transition to production more efficient and secure. The CI/CD pipeline helps teams to ensure that their code is always up to date, and that any changes they make are quickly and accurately implemented.

Software development is not just coding, it’s about solving problems in the most effective and efficient manner. Along with using the right tools and technology, there are also principles that guide your team during the entire process like quality, reusability, automation, acceleration, maintenance support and communication.

Emiliya Sokolova is a Full Stack JavaScript Developer at Droxic, working on various projects for different clients. Emi is experienced with Front End and more specifically with Sitefinity. She is also passionate about everything digital and also a world explorer.