What’s new in Angular 8

What’s new in Angular 8

Sharing is caring!

There is no denying the fact that Angular JS is an amazingly popular most widely-used, open-source JavaScript Framework for front-end web app development of your mobile, web and desktop applications. It enjoys a large community of developers who migrated to Angular when Google released it in the year 2016. Currently maintained by Google and a community of corporations and individuals, any new updates are eagerly awaited.

With the final release of Angular 8.0 just around the corner, here’s a roundup of the major features included in the release. More importantly, get an overview of the much-awaited Angular IVY – the new Angular renderer which is radically different from all the available frameworks.

In this post, we will provide some insights into the major features of Angular 8

Major features of the Angular 8 Release

Angular IVY - The new compiler version of Angular 8

Angular 8 being the next big version of Angular, Ivy holds a lot of prominence. Ivy is Angular 8 template renderer. Similar to earlier versions of Angular compilers, it takes the templates and components written in Angular and compiles them into plain HTML and JavaScript making it readable by Chrome and other browsers.

More details about project IVY

Ever since it was announced during Google I/O 2018 by Kara Erickson, who is responsible for the future of Angular, much has been talked about IVY. But surprisingly, many do not know what project IVY is?

IVY is Angular 8 template renderer. It is a new way of rendering Angular templates different from any of the available frameworks. The Angular team at Google is rewriting the codes that can easily translate Angular template into actual DOM nodes. Based on incremental DOM where every component is compiled into a series of instructions, IVY is responsible for creating DOM trees. It also updates the DOM trees whenever a change in data occurs. When once the IVY is completed, it would enable Angular applications to be smaller, smarter and faster.

It would basically mean you can achieve smaller, smarter and faster applications without doing any changes to the existing applications; because, IVY is backwards compatible. Currently, the Angular team is testing the changes on more than 600 applications.

The IVY rollout needs to be optimized for three focus areas

  • Reduction in bundle sizes.
  • To improve loading speed and time to interactive (TTI) for modern browsers.
  • Faster debugging and easier interface

The new render pipeline promises a faster interface with smooth development while based on the following concepts.

  1. Tree Shakable: It means developers pay only for the code they use. It results in faster runtime and a smaller bundle.
  2. Low memory footprint: They would need to recompile only those components being modified for a project. It results in the faster compilation.

Here are some of the advantages to expect from IVY rollout.

  • The generated code is simpler, faster and easier to read enabling debug at runtime.
  • Smaller builds
  • Delivery of pre-compiled code
  • Significantly faster rebuild times
  • Great backwards compatibility
  • Enhanced template checking to detect errors at build time preventing them during runtime.
  • Decreased payload size leading to lesser time for browsers to download
  • Compilation without the requirement of metadata.json

IVY performance – results of analytics

IVY is designed to enable apps to become faster, smarter and simpler. Based on the internal research and analytics by Google, IVY performs reasonably well on three metrics. Here are some of the insights into the results of analytics showcased during Google I/O 2018.


In comparison to the current version of Angular which makes a 36KB bundle of the standard Hello World app, IVY reduced the package by 93% to 2.7 KBs in size.

On speed metrics, in a demo, a Hello World app was tested via webpagetest.org to simulate a mobile device with a slow 3G connection with the baseline set to 1.5 seconds. The IVY results were amazing as it turned up in 2.2 seconds. The results depicted a remarkable improvement of 45%.

The core purpose of designing IVY was making code rendering easier and readable for faster, simpler and efficient debug process. The code snippet gives precise information as below.

code snippet

Opt-in preview of IVY

Switching between IVY and View Engine build is made possible with opt-in preview rendering pipeline to your project. The change will switch your applications to be built with IVY runtime instructions rather than ViewEngine runtime. Built with the IVY compiler, any dependencies used from Angular or 3rd parties would be run through the compatibility compiler. The preview will help you identify issues with Angular, besides improving compatibility.

The opt-in preview focusses on moving applications to IVY compiler and runtime instructions without the need for rewriting the applications by the developers. As part of Angular Labs and the future releases, many IVY-specific APIs will get added to the public API later.

Other major features included in Angular 8

Differential loading of modern JavaScript

With Angular 8, the differential loading of modern JavaScript would allow JavaScript bundles to be differentially loaded on the client-side. It would be part of the build process aimed at enhancing the loading speed and time to interactive (TTI) for modern browsers. It a collaborative conceptualization built by Manfred Steyer and his project ngx-build-modern.
It means,

  • New apps generated by Angular CLI (Command Line Interface) will have separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+).
  • It brings in greater efficiency to modern browsers with ES2015 support enabling them to download smaller, smarter and faster app bundles.
  • Facilitate a CLI extension by automating the process.

Angular router backwards compatibility

With the addition of backward compatibility mode in Angular 8, the upgrade of all your large projects is made simpler. By allowing lazy loading of some parts of the AngularJS apps using $route APIs, teams can easily move to Angular.

Web worker bundling enhanced

Web workers improve the speed and parallelizability of your application. They are an incredible way of writing the code off the main thread. To improve the web worker bundling – a common request from the developer community – bundling support has been added to the Angular CLI.

Opt-in usage sharing

In view of aligning the efforts with the community needs, opt-in telemetry has been added to Angular CLI. With the opt-in consent of the developers, the Angular team will collect anonymous information from the developer community about commands used and the build speed. The idea is to have more information on how the developer community uses Angular to enhance it better in the future.

Dependency updates

The release of the new Angular 8 would have the routine dependency updates for r RxJS, TypeScript, and Node in alignment with the others in the ecosystem.

Updated on 13th August, 2019

Angular 8.0 got released in May 2019. As the Angular teams keep innovating and rewriting major parts of the framework for bringing on the best in the imminent Angular 8.0 rollout. Angular is using opt-in preview of IVY in 8.0.0 to keep up its promise on backwards compatibility and support to existing applications. However, it hopes to turn IVY for everyone as part of the next major version. With full IVY rollout in version 9, it expects to open up new avenues for both developers and their team.

Akshay

Akshay Dhiman

Chief Technical Officer
"Akshay Dhiman, the CTO of Cloud Analogy, has been a standout and successful Salesforce Platform Developer for years. He has a rich experience in Salesforce Integration, JavaScript, APEX, VisualForce, Force.com Sites, Batch Processing, Lightning, PHP, C++, Java, NodeJs, ReactJs, Angular 8, GraphQL, React Native, Web Technology, and jQuery. Known for his problem-solving and debugging skills, Akshay is an out-of-the-box thinker and his capability to understand the business context and translate it into a working model is par excellence. Akshay would not only translate his thoughts into reality but would also bring in his own perspective that is always a tremendous value add. Akshay has the knack of taking challenges head on, equipped with In-depth industry knowledge, Resourcefulness and uncanny nag to build relationship with anyone in shortest time possible. Not only does he possesses fantastic technical depth and awareness but Akshay also complements them with a profound understanding of business functionalities, tools, and methodologies. He has the rare combination of skills and talent that one looks for in Salesforce – attention to detail and the drive for innovation."

This Post Has 4 Comments

  1. Thank you! I will definitely be sharing this!

  2. Thanks for this detailed post on Angular 8.0. I really the way you explained each and every feature. Keep udating more content. Thanks!

  3. Nice post. I learn something totally new and challenging on websites
    I stumbleupon everyday. It will always be useful to read through
    articles from other authors and use a little something from their
    websites.

  4. Hey there! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really enjoy your content.

Leave a Reply

Close Menu