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!
