Introduction
to Ember.js


May 2014: Tech Talk

What is Ember?

"A Framework for creating ambitious web applications"


Single Page App

Javascript App

Long Lived Javascript App

What does that mean?


  • Single full page load
    • Required libraries
    • Code to wire-up the app
    • Optionally, required DOM structure
  • Subsequent XHRs
    • Get model data
    • Optionally, view templates and application assets
  • Event handling
    • Manipulate the DOM
    • More XHRs
    • Repeat

Ember is MVC*

*sort of


More like MVC+R



Ember Lifecycle


  1. Route
    1. Fetches model data
    2. Creates model instances
    3. Optionally handles user defined actions
  2. Controller
    1. Receives model
    2. Decorates model with additional properties
    3. Passes data backing the view
    4. Optionally handles user defined actions

Ember Lifecycle

  1. View
    1. Handles DOM events
    2. Renders Templates
  2. Templates
    1. Handlebars Templates
    2. Mustache Syntax

Router


The Router contains your route names and controls the URLs

 App.Router.map(function() {
    this.resource('students', function() {
        this.route('top');
        this.resource('student', { path: '/:student_id' });        
    });
});

Routes and the Router is one reason Ember is special

Routes


  • Responsible for fetching the model
    • Plain XHR
    • jQuery $.ajax  ($.getJSON )
    • Ember-Model
    • Ember-Data
App.StudentsRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.cast($.getJSON('/api/students'));
    }
});

Controllers

  1. The bridge between the model and the view
  2. Decorates the model with additional properties

App.StudentsController = Ember.ArrayController.extend({
  males: function() {
    return this.get('content').filterBy('gender', 'male').get('length');
  }.property('content.@each.gender'),
  females: function() {
    return this.get('content').filterBy('gender', 'female').get('length');
  }.property('content.@each.gender')
});

Views

Typically you won't have to define them UNLESS

  1. You need specific handling of user events
  2. You want to create a re-usable component

Templates


  • Use Handlebars syntax
  • Can be defined 'in-line' via <script>
  • Are precompiled for production use


<ul>
    {{#each item in model itemController="student"}}
      <li>{{full_name}}<li>
    {{/each}}
</ul>
Males: {{males}}<br>
Females: {{females}}

References


  1. http://emberjs.jsbin.com/biyes/1/edit
  2. Ember getting started guide
  3. Smashing Magazine
  4. Building an Ember Application
Made with Slides.com