Angular 8: All You Need to Know

Angular 8: All You Need to Know

  • 6/26/2019
  • 321 views

Among the most sought after open-source web app frameworks in the world, Angular is leveraged by countless developers around the globe to develop top quality web applications. An evolution of AngularJS, Angular has continued to create waves in the developer ecosystem since Google first released Angular 2 back in 2016. This popular JavaScript framework has come a long way since then; its latest iteration, Angular 8, was launched with much fanfare earlier this year in May. Also, much like every other Angular iteration, Angular 8 heralds a new era of better resources and tools for developers.

Let's delve into the specifics quickly — Angular 8 is a significant release that encompasses not merely a handful of aspects, but the complete platform instead. It means the update covers the framework as well as Angular Material and CLI with synced paramount editions. Long story short, Angular 8 enhances application startup time on modern web browsers, offers new APIs for leveraging Angular CLI, and just generally better lines up Angular with both an increased number of web standards and the ecosystem in general. All of this together means a lot of different things for the many parties involved in the process, but the biggest ones to benefit are the developers.

How Angular 8 Helps Developers

  • Ivy: Ivy is both the modern Angular compiler and a new rendering pipeline and gives devs the ability to bring about substantially smaller bundles and make incremental compiling simpler. In addition to that, Ivy now also serves as the foundation for any Angular-related innovations in the future.

  • New service worker registration option: In older iterations, the service worker had to hold on until the app was stable enough to register to prevent taking a toll on how quickly the app started. With Angular 8, developers get the option to define precisely when registration must happen.

  • Migration: For developers who use the location service in an AngularJS-based app, Angular 8 comes with a whole lot of additions. Among other things, it features a LocationUpgradeModule that facilitates a unified location service that switches duties to the Angular Location Service from the AngularJS $location service.

  • Differential loading: In Agular 8, the CLI gets differential loading. The point of this feature is to offer two types of bundles; while one of them is underpinned by ECMAScript 5, the second one is based on a newer ECMAScript version. Also, differential loading can be activated by merely fixing an upper as well as a lower limit for supported ECMAScript versions.

The latest iteration of the framework offers significantly more benefits that make Angular app development simpler and even more effective than before. With provisions like Ivy, differential loading, and more by your side, Angular-based apps are now poised to be stronger than ever before! So, sit back and allow Angular 8 to work its magic to give you an app that will take your business to entirely new levels.

 

Additional Changes with Angular 8

One of the most important changes is what the Angular team describes as ‘Differential Loading of Modern JavaScript.’ To put it simply, this means that new apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+). This is great news because it means that modern browsers with ES2015 support will be able to download smaller, more efficient app bundles that load and render faster than before.

The Angular team is also adding a backward compatibility mode to the Angular router which will make it easier to upgrade legacy Angular apps to modern Angular. In an ideal world, we would have all been able to upgrade our Angular 1.x apps to Angular 2+ right away.

In the real world though, this doesn’t always happen. To this day, there are a large number of massive legacy Angular apps happily chugging away, serving businesses and making users happy. They haven’t been upgraded for a simple reason: they’re working well, and there wouldn’t be much ROI in doing a complete rewrite.

The end is in sight for Angular 1.x. It isn’t going to see any new development and will only be receiving security patches until the end of its long-term support period on June 30, 2021. For teams working on large Angular 1.x apps, the time to begin the transition is now (and the changes to the Angular router will help make the transition smoother). The router updates will make it possible to lazy load parts of Angular 1.x apps inside a modern Angular app using $route APIs.

 

Angular Benchmarks

Hearing about features is nice, but a big part of the reason many of us upgrade to new versions of Angular is to get a free performance boost! With that in mind, let’s compare Angular 7.2, and Angular 8.0.0.

The benchmark was run with a new app created with ng new and built with ng build --prod. The benchmark itself was done using Chrome’s audit tab, using the ‘Applied Fast 3G, 4X CPU Slowdown’ setting to simulate running on a mobile device.

As with any benchmark, you’ll want to run it on your own code to see if upgrading will help you, but this simple benchmark will give us a baseline performance comparison between versions.

Angular 7.2

A production build with Angular 7.2 resulted in a main.js weighing in at 240KB. The performance numbers were as follows:

Angular 7.2

Angular 8.0.0

The final release build of Angular 8 resulted in a JavaScript bundle roughly the same size as Angular 7.2: 250KB. That size only applies for older browsers that don’t support ES2015, however.

In Angular 8, the build process creates two separate bundles: one for older browsers, and one for modern evergreen browsers with full ES2015 support. For modern browsers, the total bundle size is 170KB. That’s a large improvement, especially for users loading your app via slow mobile connections.

Here are Angular 8’s benchmark results:

Angular 8.0.0 benchmarks

That looks good! We got a pretty nice performance boost over Angular 7.2.

 

Angular 8 Conclusion

As we’ve seen, the additions to Angular 8 aren’t huge outside of Ivy. Although they’re absolutely nice to have, they certainly aren’t critical for most applications. If you want to try the Ivy preview, the official Angular Ivy guide will tell you everything you need to know.

With that in mind, should you upgrade your apps to Angular 8, or stick with Angular 7? In nearly every case, the answer is yes. You should upgrade them. Since there aren’t any large breaking changes, in most cases your applications with work as-is without any changes. With the additions to enable differential loading, you’ll get noticeable performance gains for free.

Related Articles