23 April 2019
The Angular team, though, have been working hard to make the framework even better – and are about to launch Angular Ivy. It’s a new rendering pipeline and view engine that’s set to revolutionise rendering in mainstream frameworks.
So how does Angular Ivy work and what can you look forward to?
Angular has always been based on using HTML and templates, and to create Ivy the Google team completely rewrote the code that translates the Angular template to what’s rendered in the browser. The new approach uses incremental DOM architecture.
With incremental DOM, every component gets compiled into a series of instructions – which then create DOM trees and update them in-place when the data changes. The framework doesn’t interpret the component, but rather the component references the instructions. If a particular instruction isn’t referenced, then it won’t be used – and so can be omitted from the bundle at compile time.
This tree shaking approach gives significantly smaller bundles and faster load times. It’s different from the virtual DOM approach to rendering – used by React – which requires an interpreter. At compile time it won’t be known which part of the interpreter is needed – so everything has to be shipped to the browser.
In addition, incremental DOM has a low memory footprint. That’s because it doesn’t need any memory to re-render the view if it doesn’t change the DOM. Memory only needs to be allocated when DOM nodes are added or removed – and the size of the allocation is proportional to the size of the DOM change.
This saves substantial memory, since many of the render calls don’t change much. Once again, that’s different from virtual DOM where a whole tree is created from scratch at each re-render.
By reducing the bundle size, load times and memory footprint – Angular Ivy will make the render pipelining process smaller, faster and simpler. This was nicely demonstrated this time last year at ngConf 2018, where the bundle size of the Hello World app was shown to be a mere 3.2KB (after minification and gzip). That’s certainly small.
At the time of writing (April 2019), Angular Ivy is currently not feature complete and hasn’t been battle tested at Google. But when it finally arrives it should make it easier and faster for you to develop SPAs – including for mobile devices.
Here at JBI Training, we provide a range of exceptional training courses for front end developers including: