Ember.js. It’s time to try (again)

Core Concepts

Ember.js is a MVC (Model-View-Controller) JavaScript framework that focuses on the overall web application development and minimizes the trivial differences between applications — all while being a modern and light layer on top of native JavaScript. Ember is mostly used to develop large client-side web applications. In comparison to other JavaScript MVC frameworks, Ember empowers a developer to write organized and structured code. Moreover, Ember has immense backwards and forwards compatibility, thus helping businesses to stay up to date with its latest versions and latest community-driven conventions.

In Ember.js, route is used as a model, handlebar template as views and controllers manipulate the data in the model.
Let’s take a closer look at each of the MVC components:

• Model layer. Built with a combination of model and ember data.
  This layer is responsible for any kind of server-side communication as well as model-specific tasks such as data formatting. With ember data Ember model dramatically simplifies the code while improving the robustness and performance of the app.

• Controller layer. Built with a combination of routes and controllers.
  The layer between the model and view is the controller layer. The Ember Router is the mechanism updating app URLs and listening to URL changes. Each route can have a number of sub-routes, so the router can be used to navigate between the states in the application.
  Most notable controllers are the “Ember.ObjectController” and “Ember.ArrayController”.

• View layer. Built with a combination of templates and views.
  The view layer is responsible for drawing the elements on the screen. Ember.js has a great system for creation, management and rendering of views hierarchy that connects to the browser’s DOM. Views ensure the responding to user events, like clicks, drags, and scrolls, as well as updating the contents of the DOM when the data underlying the view changes.

Ember.js stands for Convention over Configuration. So instead of writing a lot of boilerplate code, Ember can automatically deduce much of the configuration itself, for example, to decide automatically the name of the route and the controller when defining a router resource. Ember even increases the bar by automatically creating the controller for your resource if you never define it specifically.

Ember includes both an excellent router and an optional data layer, called ember data. Unlike Angular.js and Backbone.js frameworks that have a very minimal data layer, Ember comes out of the box with a full data module which integrates really nicely with a Ruby-on-Rails back-end or any other RESTful JSON API that follows a simple set of conventions. It also provides support for setting up fixtures for developing against mock API and testing.

And when it comes to the design of Ember.js, performance has always been a major goal. The Run Loop ensuring that updated data only causes a single DOM update even if the same piece of data was updated several times, alongside with caching of computed properties, and the ability to precompile the HandleBars templates during the build time or on your server – all these concepts help to load and keep the application running fast.

Pros and Cons

Pros:

• High performance;
• Faster development due to Ember CLI;
• Well-documented framework;
• Many extensions (ember addons) that can be easily added to the application using a single terminal command (ember install). The centralized repository of all add-ons along with the search is also enjoyable.
• Built-in testing tools: standard ember-cli comes with QUnit.

Cons:

• Ember Data: suitable for standard REST API requests only.
• Many Ember addons: ports existing in the jQuery library.
• No so easy to learn as it might seem;
• Complications with processing quick changes;
• The most opinionated and heaviest of the frameworks;
• Very little flexibility;
• Smaller community and extensive amount of outdated tutorials on the web.
• Overblown for small projects.

Summary

Big companies have invested serious time and energy in Ember.js, and the results speak for themselves. Ember gives a developer the entire suite of functionality necessary to build a fully functional application without needing any extra tools.

Unfortunately, it can be difficult to slot Ember into an existing project. It works best when starting a new project as fitting Ember into an existing one can be difficult or even impossible.

Ember learning curve is not as short as it might seem. Still, having learned Ember ones, developers can easily switch between different projects and applications without having to completely relearn the architecture, patterns, conventions, etc.

Of course, choosing the most appropriate framework depends entirely on the needs of a project. However, if you are building a rich and ambitious app you should definitely check out Ember.js. There are many, many startups, large companies and in-betweens that find success with Ember.js, and in turn, contribute to it and help to grow the community.

Thanks for reading! Feel free to share your thoughts and comments below.