Ivy is a new way of rendering Angular templates, which is completely different from any available frameworks we have seen, as it is based on the incremental DOM. The Angular team is working hard on a complete rewrite of the renderer responsible for turning the angular template into actual DOM nodes.
The countdown has already started for the final release of Angular 8. This is why we decided to give an overview of the new features upcoming with the next version of Angular as well as explain some basic concepts behind the Angular project Ivy.
At the time of writing this article, release candidate (RC) version of Angular 8 is released.
The Angular 8.0.0-rc.0 version comes with some bug fixes:
- bazel: make name param in ng add optional (#30074) (0b5f480)
- bazel: Make sure only single copy of [@angular](https://github.com/angular)/bazel is installed (#30072) (2905bf5)
- bazel: transitive npm deps in ng_module (#30065) (61365a9)
- common: add upgrade sub-package to ng_package rule for @angular/common (#30117) (6de4cbd), closes #30055 #30116
- common: adjust MockPlatformLocation to set state to new object (#30055) (825efa8)
- compiler: Fix compiler crash due to isSkipSelf of null (#30075) (28fd5ab)
- upgrade: do not break if onMicrotaskEmpty emits while a $digest is in progress (#29794) (0ddf2e7), closes #24680 /github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12 #24680
Now, let’s talk about the new project Ivy, an Angular 8 template renderer.
What Is Ivy?
Ivy has been the most discussed subject among angular developers since the time it was announced during Google I/O 2018 by Kara Erickson, who is responsible of the future of Angular.
For the simple reason that Angular 8 Ivy is the Google’s new born, there isn’t much resources talking about it on the internet. So many developers are not aware of Ivy’s purpose or more simply what Ivy is. This blog post aims to help people understand some basics about Angular Ivy and get a simple overview of the project.
Ivy is a new way of rendering Angular templates, which is completely different from any available frameworks we have seen, as it is based on the incremental DOM. The Angular team is working hard on a complete rewrite of the renderer responsible for turning the angular template into actual DOM nodes.
Incremental DOM
Angular Ivy is based on the incremental DOM, which means that every component is compiled into a series of instructions. These instructions are responsible for creating DOM trees and updating them whenever a data change occurs. So the question you need to ask, why incremental DOM and not the virtual DOM?
Why Incremental DOM
Google team have one goal to achieve: applications have to perform better on mobile devices. As a result two things need to be optimized, the bundle size and the memory footprint.
To reach these goals, the rendering engine Ivy needs:
- To be Tree Shakable: removes the unused instruction from the bundle at compile time, because the component doesn’t make a reference for it.
- To have low memory footprint: Only changed components allocate memory, which results in faster compilation and huge memory savings.
When Ivy will be completely ready, it should make Angular apps smaller, faster and simpler.
If you want to learn more about how Google uses incremental DOM, check these two links link1 and link2.
Why Not the Virtual DOM
Using the virtual DOM involves the use of an interpreter. A problem arises here, since the part needed of that interpreter isn’t known at compile time, which means that we have to transfer the entire app to the browser, resulting in a bigger bundle size and low performance.
Also, virtual DOM generates a whole tree from the ground every time you rerender, which leads to a waste of memory.
The Pros of Angular IVY (Per the Angular team)
- Generated code that is easier to read and debug at run time
- Smaller builds
- Delivery of pre-compiled code
- Faster re-build time
- enhanced payload size
- Improved template type checking
- Great backwards compatibility
- Rise of meta programming in Angular (new changes with no breaking changes)
- No need of metadata.json
Some Angular 8 features
- Creating optimized bundles for modern browsers
- Creating legacy bundles for older browsers
- Making the browser load the right set of bundles
- Automating this all by providing an CLI extension
- Opt-in telemetry in CLI to allow Angular collects anonymous information during development process.
- Dependency update on the tools, like Typescript, RxJs, Node, etc.
- Improved web worker building, which will increase the speed and parallelism ability of your application.
Angular 8 will be released in April/May 2019 and the complete version of Ivy will be available with Angular 9.
Conclusion
I hope this article helps you get an idea about Angular 8 Ivy, the concept of incremental DOM on which it is built, and to understand the Angular team choice of using the incremental DOM instead of the virtual DOM.
If you liked ❤️ the content please share it 📣 with your friends, and stay around for more to come.✌️
