What’s New In Angular 8.0 : Ivy Renderer & Other Functionalities
Angular is one of the most popular open-source web app frameworks used by developers around the globe. When Google released Angular in 2016, developers flocked to migrate the framework. Today, a large number of users use Angular.
The rapidly growing community looks forward to the Angular team for periodic updates and Angular 8.0 is the upcoming upgrade with a new renderer- Ivy. Let’s see what’s so special about Ivy and what all you can expect in the latest Angular 8.0 package.
Ivy: Next-gen Renderer for Angular Framework
A sneak-peak into the future of Angular and introduction of Ivy rendering pipeline was offered at Google I/O 2018.
The Angular team provided heads up about how they are planning to revamp the Angular renderer into something that would make apps smaller, faster and simpler. All this, without needing developers to update anything at their end- Ivy is backward compatible.
The Ivy initiative is bringing new-age advancement to the process that translates Angular templates into browser renders. Ivy is supposed to reduce the size of bundles needing developers to pay for the code that they are actually using. On top of it, Ivy will enhance the performance by making it possible for apps to load quickly on slow connections. Also, the apps would transform into something that is simpler to understand and debug even as they scale and grow over time. Fundamentally, three aspects are focused under the Ivy rollout:
- Reduction in bundle sizes
- Fast app loading on slow connections
- Quick debugging and simpler interface
The new render pipeline design promises better results, faster interface and smoother development while fulfilling the above three principles.
For the same purpose, Ivy is tree-shakable, meaning developers only pay for the code they are using and will only need to recompile components that are being modified for a project.
Tree shaking is a build-optimization technique that ensures that the unusable code isn’t packaged into the final bundle.
Tree shaking functionality has implications for code splitting, too. Code splitting is the process of splitting app code into smaller units which can be lazy-loaded on command using routes. Ivy will make it possible to split code easily. This will ensure that the routes use the code that is actually being used inside the route. All this will enhance the speed of the app, phenomenally.
Ivy also supports the locality principle that enables:
- Shipment of pre-compiled code
- Compilation without the need of Metadata.json
- Metaprogramming
Promising Initial Outcomes of Ivy
As discussed above, Ivy is made to make apps faster, smaller and simpler. According to the internal research and analytics by Google, Ivy fares well on all the three parameters. The results of the analytics were also showcased during Google I/O 2018. Here are some insights:
Package Size
For a standard Hello World app, Ivy was able to compress the bundle size to just 2.7 KBs. When compared to present Angular version, which makes a 36 KB-bundle, Ivy promises 93% reduction in bundle size.
Source: Google I/O 2018
Speed
Along with small bundle size, Ivy also scored well on speed aspects. For the purpose of demo, a Hello World app was tested through webpagetest.org to simulate a mobile device with a slow 3G connection. The baseline was set to 1.5 seconds and code rendered on Ivy turned up in 2.2 seconds. The current version of Angular came up with the output in 4 seconds- this is a straight improvement of 45%.
Source: Google I/O 2018
Simplicity in Coding
Ivy is designed to make the coding experience simpler. Code rendered with Ivy is easier to read making the debug process faster, simpler and better. To illustrate, give a look on the same code snippet, one on current Angular version and another on Ivy.
Source: Google I/O 2018
What’s More in Version 8.0?
While the excitement related to Ivy is hitting the ceiling, there is a lot more to Angular 8.0 apart from the Ivy initiative. Here are some of the anticipated functionalities and features in Angular 8.0:
Differential Modern JavaScript Loading
A huge innovation will be seen rolling out that would differentially load legacy (ES5) & modern (ES2015+) JavaScript bundles on client-side. This would enhance loading speed and TTI (Time to Interactive) for modern browsers.
Angular Router Backward Compatibility
It would be easier for teams to upgrade large projects to the new version by lazy loading parts of the AngularJS apps using $route APIs.
Enhanced Web Worker Bundling
Web workers improve the speed of the app while enhancing parallelizability. Angular 8.0 will see support for web workers, a general request from developers that the platform is finally addressing in 8.0
Opt-in Usage Sharing
The Angular Command Line Interface (CLI) will come with opt-in telemetry that would ask developers to share anonymous information about commands used, build speed, etc. with the Angular Team. This would be helpful for future development and improvements.
Dependency Updates
All the dependencies on third-party tools like Node, RxJS, TypeScript, etc. will be updated for streamlined and seamless development experience.
The Ivy Opt-in Rollout
Along with so many exciting functionalities, Angular 8.0 will come with opt-in preview for developers who are keen on seeing how their apps will interact and work with Ivy. The opt-in preview will enable you to switch between View Engine & Ivy rendering pipelines. Once you choose Ivy, your app will be built using the Ivy compiler. All the third-party and Angular dependencies will continue to work owing to a compatibility compiler. The opt-in preview would help in improving compatibility and roll out a stable version. Here are some of the things you can expect of the Ivy opt-in roll-out:
- Simpler, faster and readable generated code
- Faster rebuild time
- Backward compatibility
- Enhanced template type checking
The opt-in preview is more about migrating to the new compiler and renderer rather than showcasing its capabilities. More features and functionalities will roll-out soon with several Ivy-centric APIs planned for future releases and public APIs.
The new version seems to herald a revolutionary era where development is faster, better and more secure. At Techtic, we are always committed to keeping an eye on the latest happenings and we would be keen to bring the best out of the impending Angular 8.0 rollout. Techtic Solutions offer flexible, cost-effective and custom web development services to cater all your software development requirements. However, if you are looking to build a solid, secure and scalable web solution, you can get in touch with our proficient team of AngularJS developers.
Drop us an enquiry with all your development requirements to discuss it further with our business development executives.
