The Ultimate Beginners Guide to Ember.js

What is Ember

A framework for creating ambitious web applications.

Rails turned many of us from dabblers into developers and Ember has that same feel of rightness for me that Rails did in 2004.

Ecosystem

• HandleBars
• EmberData
• Rake::Pipeline

<h1>Comments</h1>

<div id="comments">
  {{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
  {{/each}}
</div>
					

App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    birthday: DS.attr('date'),

    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});
					

  match 'modules/**/*.js' do
    if ENV['RAKEP_MODE'] == 'production'
      filter EmberAssertFilter
      uglify {|input| input}
    end
    concat 'app.js'
  end

  match 'css/**/*.css' do
    if ENV['RAKEP_MODE'] == 'production'
      yui_css
    end
    concat ['bootstrap.css', 'main.css'], 'app.css'
  end
					

QA and Q&A

• QUnit
• YUIDoc
• jsFiddle
• IRC

Basic Concepts

• Bindings
• Computed Properties
• MVC

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});
MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});
// Later, after Ember has resolved bindings...
MyApp.country.get('presidentName');
// "Barack Obama"
					

Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,
  fullName: function() {
    var firstName = this.get('firstName');
    var lastName = this.get('lastName');
   return firstName + ' ' + lastName;
  }.property('firstName', 'lastName')
});
var himself = Person.create({
  firstName: "Donald",
  lastName: "Duck"
});
himself.get('fullName') // "Donald Trump"
					

controllers
helpers
models
routes
templates
views
					

Declarative Thinking

• The Router
• Properties, properties, properties...

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      redirectsTo: 'posts'
    }),
    posts: Ember.Route.extend({
      route: '/posts',
      connectOutlets: function(router) {
        router.get('applicationController').connectOutlet('posts', App.Post.find());
      }
    }),
    post: Ember.Route.extend({
      route: '/posts/:post_id'
    })
  })
});
					

App.Models.Task = DS.Model.extend({
  // Properties:
  //
  title:      DS.attr('string'),
  completed:  DS.attr('boolean'),
  created_at: DS.attr('string'),

  // Observe changes and persist them in elasticsearch
  //
  changed: function() {
    App.store.commit()
  }.observes('completed')
});
					

Differences to Rails

• Actions defined in Views/Router
• Monkey Patching is State of the Art
• Not so DRY

RailsBinding

• Yehuda Katz
• ember-rails
• active_model_serializers
• Convention over Configuration

Cool Stuff

• Progressive Loading
• Statefull Routing
• CoffeScript looks clean
• Back to BASIC
• Flavour Saver

Offline Websites

• LocalStorage
• RackOffline
• EmberData promises

PhoneGap

1. Follow the Tutorials
2. Copy App to assets/www
3. Profit!

Libraries

• UI elements styled using Twitter Boostrap
• Skeleton Project
• Ember for Rails 3.1+
• I18n

Projects

• Official Examples
• Travis CI
• Sample App with Rails backend
• Entry in the TodoMVC
• Ember port of Peepcode Backbone music app

Resources

• Ember.js Dashboard
• What's new in EmberJS
• Advice on & Instruction in the Use Of Ember.js
• Official Documentation
• JavaScript Web Applications and elasticsearch

Merci!

Slides: http://talks.cyt.ch/talk-emberjs