What is Ember.js

Ember is a JavaScript framework that aims to help developers create "ambitious web applications" that are scalable, performant and accessible.

Who is using Ember.js

Why should you care?

• A focus on features, not coding
• Promotes strict coding standards
• Adheres to current methodologies
  • Standard JSON API's
  • Seperation of Concerns
  • Bookmarkable Routes

What makes a framework/library?

Libraries

Frameworks

There are more: http://todomvc.com/

Qualities of a good Framework

Number 1

Where your code should be placed is clear.

Qualities of a good Framework

Number 2

You shouldn't have to write and maintain much code.

Qualities of a good Framework

Number 3

Changing code doesn't affect the whole application.

Seperation of Concerns (SoC)

Ember provides an architecture for managing an applications data model, logic and view presentation independently.

SoC Theory in Ember

SoC Practice in Ember

Routing

export Ember.Router.map({
  this.resource('assessments');
});

Ember creates and does a lookup on the following:

App.AssessmentsRoute = Ember.Route.extend();

App.AssessmentsController = Ember.Controller.extend();

App.AssessmentsView = Ember.View.extend();

SoC Practice in Ember

Routes

Routes handle the communication for retrieving a model:

// app/scripts/routes/assessments.js
export Ember.Route.extend({
    model: function() {
      // Hooking into our API's
      return $.ajax({ url: 'http://localhost:8888/assessments' });
    }
});

SoC Practice in Ember

Controllers

// app/scripts/controllers/assessments.js
export Ember.Controller.extend({
  // A computed property that observes the models `name` property
  // and returns the an uppercase version of the name
  title: function() {
     return this.get('model.name').toUpperCase();
  }.property('model.name')
});

<section class="assessment">
  <header>
    <h1>{{title}}</h1>
  </header>
</section>

SoC Practice in Ember

Views

// app/scripts/views/assessments.js
export Ember.View.extend({
  templateName: 'assessments/index.hbs',
  click: function(){
    // Handle a click event here
  }
});

User interaction is contained in your view. Associated templates can be defined here as well.