Over a million developers have joined DZone.

AngularJS vs. EmberJS

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In our last article, we compared AngularJS to React and looked at some of the elements that differentiated the two frameworks. In this article we’ll take a look at EmberJS, a framework that aims to do “all the heavy lifting” in web development. Below we’ll look briefly at its history, its usage, and we’ll compare it to AngularJS in terms of features and functionality.

The Origins of EmberJS

EmberJS is a JavaScript framework that was once known called SproutCore. In December of 2011, the JavaScript framework was renamed to Ember to differentiate the framework from the widget library provided in SproutCore 1.0. Ember was developed by Yehuda Katz, who is also a contributor to jQuery, Rails, and SproutCore projects.

Convention over Configuration

One of the ideas at the core of EmberJS is the idea of “Convention over Configuration.” Instead of providing detailed configuration for the various routes in your application, Ember favors following naming conventions and automatically generating the resulting code, earmarking configuration only for cases where convention is not followed. For example, if an underlying application has a “Sale” table driven by a “Sale” class, then there will be a corresponding route “/sale/” created automatically by the Ember application. However, if this convention is deviated from (such as calling the table “Sales” instead of “Sale”), then configuration must be used to perform the mapping.

Templating

One of the biggest benefits of templating is that it reduces the overall amount of code written. Some JavaScript frameworks, such as Backbone, don’t provide a fully-featured templating mechanism. Both EmberJS and AngularJS, however, have templating as a core feature of the framework. AngularJS, for example, uses binding expressions in HTML attributes to drive the templating functionality, which makes for very succinct templates based upon valid HTML code. EmberJS, on the other hand, incorporates the Handlebars templating engine. This templating engine, built upon the popular Mustache templating engine, relies heavily on string transformations to provide the template and fill it with data.

AngularJS’ templating engine has a deep understanding of the DOM, allowing it to create a well-structured template that reduces the total amount of code required to create the resulting page. EmberJS and Handlebars, on the other hand, know nothing about the DOM and rely instead upon straight text manipulation, building the HTML document dynamically. While each approach has its own merits, AngularJS’ use of templating typically results in fewer lines of code than would be used to produce the same result in EmberJS.

Performance

AngularJS and EmberJS are both focused on rebuilding a DOM as necessary to reflect underlying changes in the data. As such they aren’t going to be particularly fast when compared to performance-focused front end frameworks like ReactJS. However, while both frameworks tend to suffer when dealing with large data sets, there are some trade-offs between the two. AngularJS tends to be much faster than EmberJS when rendering static lists that won’t change particularly often, or that don’t rely upon user interaction (such as providing an editable field in each table entry). However, when interactivity is the focus, then EmberJS tends to produce much faster code than AngularJS.

The key to this seeming contradiction is in how changes are handled. When creating input fields in an HTML document using AngularJS, a separate data binding is created for each rendered field. When one field changes, AngularJS tends to check every single bound field on the page for any changes before re-rendering, a pattern which breaks down once the number of fields grows large. EmberJS, on the other hand, uses observers to change values. These observers do dirty-checking that results in only rendering the values being changed, an approach that is much faster than checking every single field every time a change is made. Thus, EmberJS – though it takes longer for the initial render – is often much faster than AngularJS when editing a table of similar size.

Application Architecture

Both AngularJS and EmberJS use an MVC architecture at their core. The interpretations of what an MVC architecture consists of, though, vary slightly between the two frameworks. AngularJS focuses on manipulating data through the use of models and two-way data binding, putting emphasis on document structure with an event-driven architecture managed through controllers. It focuses more highly on interaction with the browser, working with valid HTML syntax to ensure common representation. While EmberJS also makes use of two-way data binding via models, and uses an event driven architecture, its focus is on the application’s behavior. Both are opinionated frameworks, but EmberJS can be said to have stronger opinions about how an application should be built – AngularJS gives you a bit of flexibility to implement your own client-side stack, while EmberJS is going to make a lot of assumptions about your underlying application and try to get you to conform to its expectations.

Conclusion

AngularJS and EmberJS are similar frameworks on a number of levels, but also differ in several elements. AngularJS, for example, will display a large static data set more quickly than EmberJS, but EmberJS will make it easier to add interactivity to that large data set and will handle changes more efficiently. Furthermore, while both are opinionated frameworks, EmberJS takes a somewhat stronger position than AngularJS, which can make some tasks around porting an existing application challenging to complete. In the end, each architecture has its own trade-offs, and determining which framework is right for you is simply a matter of evaluating your application’s needs versus the strengths of each framework.

Build your Angular app and connect it to any database with Backand today. – Get started now.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,emberjs ,dom ,angularjs ,mvc ,react ,html5

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}