From a business perspective, Angular CLI has become one of the most productive front-end frameworks due to the extensive documentation and support of the developer community.
Since Angular 2, this framework has developed progressively and continuously and has positioned itself as one of the most important frameworks in recent years. But what are the advantages?
What advantages does Angular offer?
Angular brings many advantages In the following section we will focus on those that are most important to us:
- Angular uses TypeScript, with all its advantages, as a basis. This makes the (abundant) documentation easier to understand, design patterns are more clearly recognizable and the code is easier to read. This consistency (compared to pure Javascript) also leads to the fact that overloading and confusion, which can occur when introducing a new framework, can be avoided with Angular.
- Standardized web components that allow the creation of new, custom, reusable and self-contained HTML tags that can later be reused in other Angular applications and relatively easily converted into native web components
Angular 8: the transition to a comprehensive modernisation
Angular 8 is a stepwiseascent for the big change: Angular 9. At this intermediate step, we can benefit from Angular in all its glory, as it has a stable core and new features that enhance usability:
- Lazy Loading, refers to the delay in loading or initializing an object until the moment it is used. Although this pattern is widely used, Angular makes it easier to use by implementing it in the core from the start, which saves on loading objects and improves loading times for both the user and the developer.
- Differential loading: one of the biggest changes in angular, and a major reason to migrate a project. This feature allows you to compile two bundles simultaneously, so you can use one or the other bundle depending on the browser you are using. This feature is a plus in development where compatibility between old (IE, older versions of Edge) and modern browsers (i.e. ES5 or ES6) must be maintained, while reducing the size of the bundles by 7 to 20%.
- Web Workers: We finally have Minions in the core to get the job done! 😃 Starting with version 8, Angular supports Web Workers, which allows us to create tasks in the background in the browser.
For developers we also find a number of benefits that improve our implementations, such as:
- New functions in routing.
- Improvements in dependency management.
- Finally, the HTTP library is renewed and replaced by the HTTPClient.
- It is no longer necessary to create the browserlist and set the path, it is now configured by default.
But the big change comes with IVY, the new rendering engine implemented in later versions of the framework – Angular 9 – which is responsible for some improvements in Angular 8. What will be available in this version?
- An Incremental DOM as main structure. It is based on the creation of a tree with the statements already compiled from each component, forming a DOM network and DOM branches With this new structure, the DOM update time is reduced because it is not necessary to build the complete tree, but only the affected branch.
- “Shakable Tree“: method that “shakes” the branches of the DOM tree, ignoring the instructions that are not used at that time, reduces the weight of the packages and shortens the loading time.
- Load Memory Footprint: Intelligent loading method that helps to save memory when the DOM tree has not or hardly changed. This happens when you update a component without major changes in its DOM tree and create “shaking” that ignores and reuses a large part of the branches of the DOM tree without using memory for its creation. With Angular 8, we benefit from the major improvements the framework implements in later versions, but retain the stability Angular 7 provides. Interested in migrating a project?
How do you migrate a project from Angular 7 to Angular 8?
The migration is very simple, and requires these necessary steps beforehand:
- We replace the HTTP library with the HTTP client library.
- We update to RxJS6.
- We are updating Node to version 10 or higher and TypeScript to version 3.4.
- We replace /deep/with ::ng-deep, which is much more efficient and attractive for our CSS code.
Once these steps are complete, we only need to updatethe core and CLI of our Angular project to version 8:
ng update @angular/cli @angular/core
If Angular notifies us that changes have not been uploaded to the repository, we can run the next command to remedy this:
ng update @angular/core --from 7 –to 8 –migrate-only –allow-dirty
And that’s it! We have already updated our Angular project to version 8 🎉
