jQuery isn't enough:

An introduction to Ember.js

Katie Gengler
jQuery Conference 2013: Portland

@katiegengler


Freelance software developer from the New York area.

katie@codeallday.com

ENOUGH WHAT??

Abstraction

What is Ember?

"A framework for creating ambitious web applications."

BENEFITS OF A FRAMEWORK

Keep team members on the same page.

DRY

Develop your application, not a framework.

Better Maintainability

DEMO

Photo Gallery
Source

EMBER'S STANDOUT FEATURES

All the benefits of a framework, plus:

Useful URLs

Keeps data in sync across the UI

Handles event delegation and View Hierarchy

Cares about performance.
Cleans up after you.

Creating the application:



                        Pg = Ember.Application.create();
                    

That's it!

The Router



Pg.Router.map(function() {
    this.route('index', {path: '/'});
    this.resource('galleries', function(){
      this.route('new');
      this.route('show', {path: '/:gallery_id'})
    });
    this.resource('photo', {path: '/photos/:photo_id'});
});
                        

Route Definition


Pg.GalleriesIndexRoute = Ember.Route.extend({
    model: function(){
        return Pg.Gallery.find();
    }
});
                        

linkTo Helper


                            {{#linkTo "galleries.index"}}Galleries{{/linkTo}}
                        

Templates


{{#each photos}}
    <li>{{#linkTo "photo" this}}<img class="th" {{bindAttr src="thumbnailSrc"}}>{{/linkTo}}
{{/each}}
                        
                    

Controllers


Pg.PhotoController = Ember.ObjectController.extend({
    edit: function(){
        this.set('isEditing', true);
    },
    doneEditing: function(){
        this.get('model').save();
        this.set('isEditing', false);
    }
});
                    

RESOURCES