Angular Ivy vs React

React – can it keep up with Angular Ivy?

React is a popular JavaScript library that’s used for building UIs. It was originally developed by Facebook and can be found in many fast high-performing web applications such as Instagram, WhatsApp, Airbnb, Dropbox and Facebook itself.

Angular is also popular with front-end developers, who find it particularly useful for high speed single-page applications (SPAs). Developed by Google, it’s a full-scale JavaScript framework – and not just a library. High-profile users include Google, Wix, Twitter, PayPal and Netflix.

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.

It’s also very popular with developers. It’s primarily a JavaScript library that’s designed to build user interfaces – so developers can use their own choice of libraries and frameworks to do other tasks in the application. The technology has been open sourced since 2013 and there’s a very strong developer community. Over 1,300 developers, for example, from across the world attended last month’s React Amsterdam conference, which was totally sold out.

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:

• 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
• Angular training course (3 days) where you learn to develop engaging, single page web applications with Angular – See our Angular 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