13 tools and techniques to accelerate frontend development

Published in

ngconf

10 min readDec 20, 2021

You’ve probably already heard about the so-called 10x developer, right?

„A 10x developer is an individual who is thought to be as productive as 10 others in his or her field. The 10x developer would produce 10 times the outcomes of other colleagues, in a production, engineering, or software design environment.” (Technopedia)

How can one deliver 10 times more? By delivering faster. So, in this article, I collected some tools and techniques that help to speed up frontend development and to improve code quality.

We could start with CI/CD pipelines and test automation — because this is what usually comes up first when people are talking about making software delivery faster. We will come to that, too, but in this article I would like to take a more structured approach. We will start at the beginning — at the code level.

[TLDR; design patterns, code formatters, code linters, module bundlers, task runners, IDE utils, frameworks, processes, fake backend, testing, CI/CD, logging]

Design Patterns

Coding faster does not necessarily mean writing more lines per unit of time. Code smart, not hard! To find a solution that is stable and easily understood you should rely on industry best practices— design patterns. High quality code means less refactoring and bugs. Using conventions leads to a better understanding of code and less coordination.

Design patterns are usually associated with OOP, but you can find some examples in frontend code, too. Thus, dependency injection in Angular follows the dependency inversion principle. Knowing what a singleton is helping you to understand why you don’t have to unsubscribe from observables in Angular services. The way HTTP interceptors work in Angular is an example of a chain-of-responsibility pattern. And the whole RxJs staff is impossible without observer design patterns. Here are some useful links:

Finally, do not forget the general design principles like DRY or KISS to keep your codebase clean and maintainable.

Code formatter

Code formatters do what they promise — they format your code according to some rules for a specific language. With all the opening and closing html tags, I strongly believe that code formatting is especially relevant for faster frontend development. You can spot a missing bracket quicker, or find the relevant spot quicker, or have a better grasp of the code structure in a well-formatted code. I use Prettier which seems to be an industry standard.

Code linters

Your Javascript code will not be compiled like Java. “Less work” — you might think. The problem is though that some errors might go unnoticed. Since Javascript is dynamically typed, it is even more likely so. Linting can prevent it. A linter is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs.

Imagine, you have some code like this:

//your-typescript-file.tspublic isMessageVisible: boolean;
public errorMessages: string[];public hidenotification(){
   this.isMessageVislble = false;
   this.errorMessages = null;
}

Without help of linters you might miss out that you misspell this.isMessageVislble and try to assign null to an array of strings. Moreover, hidenotification() does not follow the camelCase that you agreed upon in your team. These are typical problems that linters can help you with. ESLint is the current industry standard for Javascript.

What is linting and how can it save your time?

Module bundlers

Before ECMAScript modules were supported by browsers, module bundlers were there for the main reason of bundling pieces of JavaScript and their dependencies into a single file. Yet modern module bundlers can do much more than that. Basically, they allow you to write your code in a developer-friendly way and then transform it into a browser-friendly way. With Browserify, Webpack, Rollup etc. you can

minify the code for production (to save on bandwidth),
use Babel to transpile the code down to whatever version of EcmaScript you wish to support, without having to dumb down your source code or do it manually,
transpile React’s JSX syntax to plain JavaScript,
write (neat, concise) SASS which gets transformed into plain CSS.

Task runners

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,
compiling 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 (wit 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 loosing against npm scripts (for example cf. “Why I Left Gulp and Grunt for npm Scripts”). Though npm scripts is not a task runner per se, it definitely can act as one.

With husky or pre-commit you can go even further and use git hooks to trigger some tasks. You can delete the dist folder (npx rimraf dist) when you checkout a new branch (post-checkout git hook). On the pre-commit hook you can lint the changed files with lint-staged. Pre-push hook is good for running tests.

IDE utils

Let’s have a closer look at the code’s surroundings, the IDE. It is meant to provide comprehensive facilities for software development, so it can certainly increase the speed of coding. Go to the marketplace of your IDE and add some useful extensions. For example, I use Jest runner to execute individual tests, Git Lens to visualize version control, and Sort-Imports well… to sort imports. You can also add some language or framework-specific plugins, such as Angular Snippets or Reactjs code snippets. Moreover, VS Code allows you to define your own snippets and share them with your colleagues. This way you can re-use existing code within your team, moving forward faster.

Frameworks

Speaking about reusability: relying upon some UI components library such as MUI, Wired Elements, Vaadin and many more can save your time for 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. JS frameworks like Angular, React, Svelte or Vue provide useful abstractions for daily tasks. For example, with Angular you can use router capabilities out-of-the-box so that you no longer have to implement it from scratch.

Long story short — frameworks are there for a reason. And if you use them for the task they are best for, you can make your developer life much easier and delivery — faster.

Fake backend

Waiting for backend implementation 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 moments and that returns required data in the agreed format. I use the JSON server for that. 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. A local solution with a custom proxy is also possible.

Nice bonus — 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.

Processes

Developers are never alone (for the best or the worst). They have to get on with product owners, project managers, and further stakeholders. There are a lot of processes involved in software delivery. While process optimization is out of scope for this article, I will briefly touch upon some useful tricks.

Since a lot of companies use Jira as a ticketing system, it’s a good idea to get the best out of it. For example, you can add a Cucumber plugin. I will talk about automated testing in a while, but here is some benefit of this approach. With this plugin, business analysts or product owners can write non-tech readable tests in Gherkin in Jira. Developers get the test definition via plugin and implement it in their favourite language. When the tests are run, the result will be automatically transferred back to Jira — documentation and status report in one.

Alerting reduces the time between the moment when an issue happens, and the fix is delivered. It is frustrating when master build fails, and no one notices it because they usually pay attention to their own branches. You can implement an email or slack notification in your CI/CD pipeline. However, it is not really practical if master fails every couple of hours — in this case your team will simply ignore the notifications. Alternatively, you can deploy some red banner instead of the failed app to notify developers and testers that they should check the pipeline.

Sending notifications in pipeline

Testing

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 far as possible. Additionally, the more you can move to unit tests the better because they are faster and more stable than end-to-end tests.

A good example is field validators in Angular. You can test a couple of scenarios besides happy path via end-to-end testing 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.

If you want to speed up feature delivery, you have to make sure that you don’t break old functionality a.k.a. German “verschlimmbessern”. Automated regression testing is your best friend in this case. Regression testing works only if you already have a solid and reliable test base. I use Jest (unit tests) and Cypress (end-to-end).

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 my next point.

CI/CD

One cannot write an article about web development acceleration without mentioning continuous integration and delivery. Several steps I mentioned above can be combined and automated with CI/CD. Add linting, code quality checks, building and testing steps to your pipeline. Here are some articles with a focus on frontend-specific tasks.

Logging

So, mission completed — your software is online. However, I’d like to re-phrase Sepp Herberger’s statement “After the game is before the game” — “After the release is before the release”. You’ll probably keep developing new features for your web app. You’ll probably do so in parallel with handling incidents and delivering bug fixes.

Especially in the case of SPAs, you do not really know what happens client-side after you deploy your app (and you should not console.log it). Let’s say you bake a cake at the pastry shop and distribute it to your customers. You’ve taken some precautions (tests), but you don’t really know if the cooling chain was broken or if the ingredients were properly mixed. To improve, you need to establish some sort of feedback loop (before it all goes to Google reviews). You could misuse Adobe Analytics to track errors, store client-side errors in local storage (for tech support) or to use Sentry (which seems to become an industry standard). Logging errors or performance indicators and alerting on threshold values help you to start bug-fixing earlier and do so more efficiently.

Practice

This one gonna be a short one — the more often you code and deliver, the faster and more efficient you become. Keep going!

Let’s look back and take the bird perspective to analyse how all these tools help to accelerate (frontend) development. Here is the list of key principles that they adhere to:

Automation (doing less)
Acceleration (delivering faster)
Quality assurance (less re-doing)
Reusability (less re-inventing the wheel)
Maintenance support (earlier and faster bug-fixes)
Communication (less delays)

All in all the idea of this article can be boiled down to the simple truth — software development is not just coding. There are so many things besides writing code that can hinder or enhance the delivery. Make sure you take the holistic approach to accelerate it.

[Disclaimer: did I miss something / is something not quite correct? Please let me and other readers know AND provide missing/relevant/correct information in your comments — help other readers (and the author) to get it straight!]

Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!
Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:

Expert panels and Q&A sessions with the speakers
A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
Hands-on workshops
Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget

We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.
https://2022.ng-conf.org/