Ali Kamalizade
Jun 30 · 3 min read
Photo by Fabian Grohs on Unsplash

Angular is a great JavaScript framework for creating applications which can run on many platforms.

However, the more your app grows, the longer your compilation times may become. This makes writing code more cumbersome and reduces your developer productivity. You shouldn’t have to wait two minutes for compilation to be finished just to see whether this one line of changed code did the trick.

Sure, if your app is the size of a to-do app, you might be satisfied with the compilation times. However, in larger projects with multiple developers and an increasing amount of third-party dependencies, the compilation times can become quite long.

I’ve been using Angular since the final version of Angular 2 was released in 2016. Since then, I have seen and used different ways of writing better and faster code in Angular projects.

Here are my top picks to speed up Angular development:

  • Do TDD-style development (e.g. with Jest).
  • Split up your code into feature modules which can be lazy loaded.
  • Keep up-to-date with the Angular ecosystem.
  • Use Storybook for developing UI components

Note: Most of these steps are not directly tied to Angular, but can be tied to popular frameworks like React and Vue.js as well.

I will focus more on improving the developer experience for working with Angular and less on improving the actual performance of your Angular app.


TDD (Test-Driven Development) With Jest

By default, Angular projects use Jasmine in combination with Karma to run unit tests. For simple projects that might be enough, but for larger projects the drawbacks become very apparent. In short, Jest has a powerful CLI and a very pleasant testing experience.

The test-driven development approach works well when you are writing simple JavaScript code (e.g. pure functions) or working on dumb components. As unit tests should be fast to execute, you should only import the stuff you need and mock everything else (which Jest can help you with). I have written an article how to use Jest in an Angular application.


Lazy Loading of Feature Modules

If you include everything in one module, compile times will be worse since Angular needs to rebuild a lot of stuff.

By using lazy loading of feature modules, you can not only improve your app performance (through loading smaller JavaScript bundles, only when you need them), you can also reduce the compile times.

If you make one change in a lazy loaded module, it should only build the affected modules and not your whole app. Splitting your codebase into smaller modules means less work for the compiler.


Keep Up-to-Date With Angular

TypeScript incremental compilation was introduced in TypeScript 3.4 and has been supported in Angular since version 8.

As it’s not a default (yet), you need to add the incremental flag in your tsconfig.json. Ivy and Bazel will improve performance once the Angular team feels confident enough to make them defaults.


Using Storybook for Creating Dumb Angular Components

The use of dumb components (also referred to as presentational components) is a good pattern in popular frameworks like Angular and React.

If you need to do more UI-related tasks, the TDD approach might not be enough. After all, you may not only want to check that your component is working correctly, you also want to check how it looks, visually in the browser.

This is where Storybook comes into play; an open source tool for developing UI components in isolation for Angular, React, and Vue.js.

The idea is that you focus on creating great dumb components in isolation. As you only need the component (and maybe a few dependencies), the compilation process is rather fast since you don’t need to build your whole app.

You can even combine the use of Storybook and Jest to make sure that both your UI and the functionality of your components are fine.

I will write a more detailed article about using Storybook in Angular projects in the near future.


Conclusion

Thanks for reading this article. As you can see, there are multiple ways to improve your developer experience in web development projects!

Better Programming

Advice for programmers.

Ali Kamalizade

Written by

Software Engineer @leanix_net. Co-founder of Sedeo with a passion for web and mobile development. I write about topics I’m interested in 🚀

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade