A framework for creating ambitious web applications

Heads Up!

Ember is an open-source client-side JavaScript web application framework based on the MVC software architectural pattern.

It allows developers to create scalable single-page applications (SPA) by incorporating common idioms and best practices into a framework.

Why using SPA frameworks?

(great question, thanks for asking!)

1. It's lightweight!

Let's your server CTFO while the clients are working...

2. Decoupling

No more aspx.cs doing data retrievals + state management + page rendering + SMTP mailer + coffee ...

Such as...

// Button visibility
this.ButtonBack.Visible = (this.CurrentMode == PageMode.List) && (!isStandaloneDesktopDeployment);
this.ButtonNext.Visible = (this.CurrentMode == PageMode.List);
this.ButtonCancel.Visible = (this.CurrentMode != PageMode.List);
this.ButtonAddMailbox.Visible = (this.CurrentMode == PageMode.List);
this.HyperLinkBulkEdit.Visible = (this.CurrentMode == PageMode.List);
this.ButtonSave.Visible = (this.CurrentMode == PageMode.AddSingle) || (this.CurrentMode == PageMode.Edit);
this.LinkButtonDeleteAllUsers.Visible = (this.CurrentMode == PageMode.List) && hasUsers;

3. Better user experience

More native-app-like user experience, taking full advantage of CSS and JavaScript capabilities.

Client-side state, maintained during the whole life of the application.

What comes with Ember?

Free love, essentially.

Before Ember

Developers had to download and make work together a shit load of libraries to write their application (route, history, DOM, events, Ajax, storage, caching, ...).

Ember comes with...

A router

Translates a URL into a series of nested templates, each backed by a model. Ember automatically keeps the URL in the browser's address bar up-to-date.

App.Router.map(function() {
  this.route("projects", { path: "/projects" });
  this.route("mailboxes", { path: "/mailboxes" });
});

A store

Central repository (cache) of records in an application. All routes have access to this shared store; when they need to display or modify a record, they will ask the store for it.

App.MailboxRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('mailbox', 1);
  }
});

A templating system

Templates are written in the Handlebars templating language and describe the user interface. Each template is backed by a model, and the template automatically updates itself if the model changes.

{{input type="text" value=firstName}}

<ul>
  {{#each photo in photos}}
    <li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>

Models

A model is an object that stores persistent state. In many applications, models are loaded via an HTTP JSON API.

App.Project = DS.Model.extend({
    name: attr('string'),
    createdAt: attr('date')
});

Controllers

A controller gets a model from a route. Then, it makes the bridge between the model and the view or template.

App.ProjectController = DS.ObjectController.extend({
  cannotSave: function () {
    return Ember.computed.empty('firstName') || Ember.computed.empty('lastName');
  }.property('firstName', 'lastName')
});

<button {{action "save"}} {{bind-attr disabled="cannotSave"}}>Save</button>

If we put things together

200 projects and counting

ember-data: data persistence library
ember-validations: client-side model validation
ember-auth: authentication framework
ember-i18n: internationalization
ember-qunit: unit tests
ember-sockets, ember-notify, ember-prerender, ...

The cherry on the cake:

ember-cli

Command line interface for Ember projects.

Who is behind it?

Core team of about 20 developers from several companies
402 contributors submitted 7,250 commits
First commit on April 30, 2011
Ember data: 215 contributors / 2,440 commits

Commits on GitHub (1 year)

Most popular projects on GitHub

Rank	Name	Stars	Forks
1	Bootstrap	71,596	26,754
2	Node.js	31,760	7,089
3	JQuery	31,692	7,276
9	Ruby on Rails	23,136	8,740
27	Linux	15,457	6,198
45	Ember.js	11,213	2,421