20 May 2019
React – can it keep up with Angular Ivy?
A major difference to date between React and Angular is rendering speed. One of React’s best features is that it uses virtual DOM and a diffing algorithm for rendering – which makes DOM manipulation extremely fast. The resulting quick rendering speed has given React the edge over Angular – up until now anyway.
That’s about to change with the introduction of Angular Ivy
With it, the Angular team has introduced a new approach to rendering that uses incremental DOM architecture. It’s fundamentally different from React’s virtual DOM approach, which requires the use of an interpreter. At compile time it’s not known which part of the interpreter is needed – so everything is shipped to the browser.
Using the new incremental DOM approach, components are compiled into a series of instructions. These then create DOM trees and update them in-place when the data changes. Rather than interpreting components, the components reference the instructions. At compile time, only instructions that have been referenced are used – which gives smaller bundles and faster load times.
Incremental DOM also has a lower memory footprint compared to virtual DOM. 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 – unlike with 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’s rendering process is smaller, faster and simpler than React’s.
The React team, though, is working hard to counter this, and has outlined a number of rendering initiatives in the React 16.x Roadmap. These include a project to simplify and modernise React DOM, with the aim of reducing bundle size and aligning closer with browser behaviour. The team has also started to design a new server renderer that supports the React Suspense component. This will include waiting for asynchronous data on the server without double rendering, and progressively loading page content in chunks.
On a wider front, React is likely to have a bright future for a number of reasons. It was, after all, originally developed by Facebook and continues to be supported by them. That corporate backing alone gives it a certain amount of future stability and should ensure ongoing improvement initiatives.
Another popular feature of React is its unidirectional data flow, where properties are passed from the parent component to child components as a single set of immutable values. That’s different from Angular, which uses bidirectional data binding for templating, and can make React applications more predictable and easier to debug if something goes wrong. Many developers also find it easier to learn React and appreciate its elegance and relative simplicity.
Here at JBI Training, we provide a range of exceptional training courses for front end developers. Our React and Angular training courses include: