We have been using Angular since the early days, early like v1.3 in 2014. In November 2020, the Angular team released the 11th major version and we are excited with the trajectory and continued growth of the framework.
This post walks through new features of Angular 11, the continually improving performance of the framework, and why we use Angular to build enterprise-grade applications.
Incremental vs. Virtual DOM
React is a very popular JavaScript library that popularized the concept of a Virtual DOM. React creates a Virtual DOM in memory to keep track of changes. As changes happen, the difference between the previous Virtual DOM and the current Virtual DOM is pushed to the user interface and the web browser is updated. (For more information, check out this post.)
React grew in the early days due to its simplicity and performance benefits compared to existing frameworks. This benefit is largely due to the Virtual DOM, which is essentially a clone of the real DOM used to track changes without the overhead of interacting with the real DOM. This approach allows individual components and data to be updated without having to reload the entire page.
While the Virtual DOM greatly improved performance compared to existing approaches, it comes at a high cost in memory. Tracking a virtual clone of the existing page requires a lot of extra overhead in the form of browser memory.
The Incremental DOM in Angular is slightly different, it uses the real DOM to track changes. Different states of the real DOM are compared against each other to add, edit, or remove components that are no longer needed. Because Angular does not need to virtualize the DOM, it can be more performant by using less memory.
Performance Benefits
For a long time, the criticism of Angular has been the slow initial load time. Thankfully, since Angular 9, the Angular team has been working hard to resolve this problem.
Specifically, in past versions of Angular to keep the application performant you had to take a great deal of care to follow best practices for change detection and maintaining component and module hierarchy. In recent versions, the team has been putting a lot of effort into memory cleanup, inherent module and route lazy loading, optimized codebase minification, and ensuring framework performance optimization is a priority.
Moreover, Angular 11 introduces automatic font inlining. This feature will download and inline fonts that are used in the application, which lets the page start to load without needing to load fonts ahead of time.
It’s also important to mention that Angular builds have been dramatically sped up as well. By dropping support to TypeScript 3.9 and other older services, the build size has been reduced. The Angular team says that builds should be 2-4x faster than before!
We appreciate how Angular is focusing on adding features and functionality, while also taking performance seriously. The last few versions, particularly Angular 9 through 11, have been much better in this respect.
New Angular 11 Features
The latest version of Angular has a host of solid upgrades. For starters, Angular 11 extends the Component Test Harness, allowing tests to interact with all components. In addition, Hot Module Replacement (HMR) has been simplified. The only configuration you need to do is add `--hmr` to your default ng serve command to use HMR.
The team also improved internationalization (i18n), to be able to translate a string outside of a template. This was a highly requested feature with over 200 comments on the GitHub issue. There were also a number of smaller updates, like improved reporting, more robust logging, and removing support for Internet Explorer 9, Internet Explorer 10, and IE Mobile.
Conclusion
As we wrote in our posts on the Angular 9 update and why we choose Angular over React, the Tragic team loves building on Angular. We have built Angular applications for FIS, Lego, Ygrene, and The 300 Movie, and supported projects as they scale to 10x more users.
Angular has become a key part of our technology stack and we are impressed with the development of the framework over the years. If you are looking to build a robust web application, we highly recommend looking at Angular 11.
Looking to leverage a modern Javascript framework for your next project? Contact Tragic today to learn more about how we can help you choose the right frameworks to increase performance and stability.
