The software development world is a dynamic one. Tools and applications are constantly upgrading and getting better to make advanced technology possible. Technologies that do not upgrade will eventually become obsolete and fade away with time. The principle of constant upgrading is especially true for the really popular tools, like the front-end framework Angular. To provide developers with a more robust and solid front-end development experience, Angular introduced a cutting-edge compilation and rendering pipeline in their version 9. The new engine was christened Ivy.
With Ivy, Angular aimed to double down on the advantages it traditionally offered. This article will take you through all the new advancements that come bundled with Ivy. It will also quickly go through what is deprecated and how it handles Angular applications made on the previous View engine. Angular Ivy was made to accommodate all exciting new developments that could be needed in the future. This article talks about the updates that followed the original rollout.
What’s new in Angular Ivy
Ivy was introduced as the default engine with Angular’s version 9 and continues to support subsequent versions. One of the main aims of Angular’s Ivy engine was to amplify the performance and minimize the file size of Angular applications. The development team behind Angular employed different techniques to achieve the aim of faster and lighter Angular applications. The prominent strategies behind Ivy are discussed below:
The Ivy Compiler
Angular Ivy’s compiler featured a compilation process called the ahead-of-time (AOT) compilation. AOT compilation compiles the application, libraries, and dependencies at build time, instead of runtime. At build time, the compiler puts together all the metadata about different parts of the application, like components and inputs. The metadata tells Angular how to construct the instances of classes and manage their interactions at runtime.
The metadata is written in a subset of TypeScript that follows certain restrictions. AOT firstly checks through the code for any syntax errors in the metadata. Then, AOT interprets the collected metadata and checks if any restrictions are broken. Finally, AOT uses the template compiler to compile and validate the TypeScript.
With AOT, Angular applications possess faster render times and better security. As applications are already compiled at build time, there is no need to download the Angular compiler. With no compiler to come along, Angular applications with AOT have much less file size.
Internationalization
Using the Angular command-line interface (CLI), Ivy can generate code necessary to publish an Angular application in different languages. Called internationalization, this feature uses the i18n attribute to localize the data formatting and text extraction for different languages. The following example shows the i18n attribute in action, tagging the heading for translation.
<h1 i18n> Thank you i18n! </h1>The developer uses the Angular CLI to extract the text that will be translated into a source language file. Then, they send multiple copies of this file for each different language they aim to target to its translator. Lastly, the developer merges the final translation files when building a localized version of the application through the Angular CLI.
To use this feature, it is important to add the relevant package to the project. The following CLI code will include the package.
ng add @angular/localizeAn example of internationalization is using pipes. Data transformation pipes, used to format data as desired, given locale identifiers (ID) to localize data while formatting. Given below is a quick example, where en-US is the ID.
{{amount | currency : 'en-UK'}}Better Performance
As with any upgrade, Angular developers aimed to achieve better performance with Ivy. By making AOT compilation as default, Angular applications had better render time. Ivy also introduced the ability to compile components independent of each other. Whenever a component is added or modified, recompiling the application only recompiles the component(s) in question. Fewer components to compile means better recompilation times.
Another focus of Ivy was to reduce the size of the final bundle of files for an Angular application. Usually, the bundle would have a lot of files, even for features not used in the application. However, Ivy is tree-shakeable, and only includes files for the Angular features used. The tree-shakeable nature of Ivy has a significant impact on smaller applications. However, larger applications have almost the same size of bundles as before.
Compatibility & Further Upgrades
Ivy is backward compatible with Angular applications developed using the View engine. Alongside that, it is also possible to develop Angular applications with libraries developed in the previous View engine. The backward compatibility is administered through a compiler that is run as needed during building an Angular application.
Angular’s current version is its 12th version and there have been many further upgrades since version 9 when Ivy was first released. Some prominent ones are as follows:
Developers have since been advised to transition their libraries to Ivy as View will become deprecated.
New dev tools have been offered for browsers to monitor Angular application’s workings and are now compatible with Ivy.
Support for selector-less bindings was also introduced with Ivy in version 9. Such support would be for classes that are not necessarily used in the application but are important to its workings.
A new version of Angular’s Language Service based on Ivy was also introduced.
Angular now uses Webpack 5 to build applications, that includes web worker support and generating lazy-loaded JavaScript files for faster page load times.
Final Thoughts
With the introduction of Ivy, the Angular team made sure to make an engine that would support any exciting new features needed in the future. With Ivy, the focus was for better build time, a smoother runtime experience, and reducing file sizes. Features like AOT and internationalization made sure to increase the reach of Angular applications by making them lightweight and able to accommodate different languages automatically.
As web development grows more advanced, exactly what advancements will be needed in the future is anyone’s guess. Ivy has been advanced enough to support four more versions since its rollout and it is safe to say it will be able to support more to come.