Angular Ivy – what can developers look forward to?

Angular is a popular JavaScript front-end web framework from Google. It’s a client-side MVC (model-view-controller) framework where the templating is based on bidirectional UI data binding. Angular is particularly useful for developing high speed single-page applications (SPAs) and high-profile users include Wix, Twitter, Airbnb, Netflix and Google itself.

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:

• Angular training course (3 days) where you learn to develop engaging, single page web applications with Angular – See our Angular training course outline
• React training course (2 days) where the focus is on building large data-driven applications with React and Flux – See our React training course outline
• React Native training course (3 days) where you learn the key skills to create high performance mobile apps with React Native – See our React Native training course outline

FIND OUT MORE

EMAIL US