Understanding Angular IVY: Incremental DOM and Virtual DOM
When it comes to AngularJS Development or any other Development Services, the first thing that comes in our minds it that we want our application to be built using the latest trends and technologies for it to stand out. So, dive-in to know about what’s new in the coming AngularJS release.
AngularJS is an open-source structural framework, purely made in JavaScript which is used for developing dynamic web applications. Introduced by Google in 2009, it is mainly maintained by the tech-giant and so one can expect scheduled updates over time.
Angular 7 was released on October 18, 2018 with immense features, changes, and performance improvements throughout the entire Angular platform. Angular 8.0, a forthcoming upgrade to Google’s popular framework now in beta release, will feature Ivy, a new renderer. Many people are talking about IVY, but there are many developers who don’t know what IVY is. This blog gives basic overview of Angular IVY and help you understand why it is so important.
Angular Ivy is radically different from anything we have seen in mainstream frameworks, because it uses incremental DOM. It is Angular’s new rendering pipeline and ‘View’ engine. It takes the templates and components written by us and translates them into regular HTML and JavaScript for the browsers to read and display.
What makes IVY different is that Google dropped Virtual DOM and decided to go with Incremental DOM for this one.This change is mainly oriented towards the performance of applications on mobile devices. This leads in optimizing two things: the bundle size and the memory footprint.
IVY is an initiative to build a next-generation rendering pipeline for Angular, and, for this, the Angular team is currently rewriting the code that translates the Angular template to whatever we rendered in the browser. It uses the incremental DOM.Incremental DOM means every component is compiled with a series of instructions that creates the DOM tree and updates them when data changes.
There Are Mainly Two Key Concepts for IVY
- Tree Shakable: Remove unused code so the application only pays attention to the code it’s using, hence a smaller bundle and faster run time
- Local: Only recompile the components that we are changing, resulting in faster compilation
This preview brings features like:
- Smaller bundle size.
- Faster re-build time resulting in increased performance.
- Cleaner code, leading to easier debugging.
- Improved template type-checking.
- Great Backwards compatibility.
- Improved payload size for improvement in real-world applications.
New features tentatively planned for the Angular 8 include:
Differential Loading of Modern JavaScript – Differential Loading of Modern JavaScript which is expected to improve the loading speed for modern browsers and time to interactive (TTI) of the applications. Building both legacy (ES5) and modern (ES2015+) JavaScript bundles as a part of the build process, which will be differentially loaded client-side to improve the loading speed and time to interactive (TTI) for modern browsers.
Opt-in Ivy Preview – Preview of how your application will work with Ivy and give us feedback so we can incorporate necessary changes and improvements into the full release.
Angular Router Backwards Compatibility – Backward Compatibility for Angular Router which will simplify in the upgrading process of large projects. When adding backwards compatibility mode, it simplifies the upgrade path for large projects. It will make it easier for teams to move to Angular by allowing lazy loading of parts of AngularJS apps using $route APIs.
Improved Web Worker Bundling –Web workers are a great way of writing code that runs off of the main thread, improving the speed and parallelizability of your application. Adding bundling support for web workers to address this common request from developers
Dependency Updates – Updating dependencies on tools like TypeScript, RxJS, and Node to keep in sync with the rest of the ecosystem. Angular 8 will only support TypeScript 3.3 (Support for TypeScript 3.1 & 3.2 will be dropped).
Reference: https://blog.angular.io/
Once IVY is fully ready, it should make Angular applications smaller, faster and simpler, all without any change in your existing application. The Angular team is currently testing the IVY changes with Google’s 600+ Angular applications.
