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
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.
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.
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.
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.
Thanks for reading this article. As you can see, there are multiple ways to improve your developer experience in web development projects!