React goes head-to-head with Ember.js

React is an open source, Facebook-sponsored JavaScript library for building user interfaces. It ditches traditional data binding in favour of a unidirectional, 're-render everything' approach that is component-centric.

Win clients & work smarter with our FREE ebook: get it now!

Ember.js is an open source, heavyweight framework for building client-side web applications. It provides universal data binding and a URL-driven approach to structuring applications with a focus on scalability.

Which should you deploy when building your next project. Here's an analysis of their relative strengths and weaknesses.

Scope

React’s homepage describes it as "a JavaScript library for building user interfaces" (netm.ag/react-260). React provides a simple yet performant API for client-side rendering, and can be used as the rendering engine for other JavaScript libraries (including Ember).

Ember.js' homepage describes it as "a framework for creating ambitious web applications" (emberjs.com). Client-side rendering is one of the features Ember provides, but it also intends to provide structure to scalable web applications beyond just the view layer.

Managing State

React implements a unidirectional data flow, so whenever a component's setState method is called, that component (and any of its children) will re-render. Data flows downwards, events (clicks, form submits) flow upwards and ultimately translate into a setState .

Ember's object model facilitates Key-Value Observation, which allows Ember to re-render changes to specific React implements a unidirectional data flow, so whenever a component's setState method is called, that component (and any of its children) will re-render.

Scalability

React is arguably the most performant and flexible rendering library around, even when rendering large lists. That said, it doesn't intend to provide any sort of application structure, and must be used in conjunction with other libraries or architectures (such as Flux, react-router) for any medium or large-scale apps.

Ember’s patterns for structuring applications are baked into the framework in a convention-over-configuration manner and have seen great success in the ecosystem of large JavaScript applications. That said, Ember's view layer is less performant when rendering large lists, particularly relative to React.

Secret Weapon

Every time setState is called, React generates a new virtual DOM with the latest data and efficiently diffs it against the previous version, generating a minimal list of changes that need to be made to the real DOM to bring it in sync.

Ember's recent secret weapon is ember-cli , the official command line interface for building and managing Ember applications. ember-cli makes it incredibly simple to generate and import Ember add-ons into your projects.

The verdict

Keeping in mind that React is a UI library and Ember is an application framework, you should give both React and Ember a try. If you're building something large, lean towards Ember. If you're building something smaller but performance-sensitive, opt for React.

Words: Alex Matchneer

Alex Matchneer is Lead engineer, Express Checkout and a Core team member with Ember.js. Follow him on Twitter at @matchy This article first appeared in net magazine issue 260.

Like this? Read this!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.