Introduction to Ember.js

What is Ember.js and Where did it come from?

SproutCore → SproutCore 2 → Amber → Ember.js

According to the Ember.js website, Ember is "A framework for creating ambitious web applications"

Embers Goals

• Write dramatically less code
• Don't waste time on trivial decisions
• Develop faster with its friendly API's

Ember.js Recent Popularity

The API has been going through a lot of fluctuations and with the release of version 1 approaching, things have become more stable. I also believe this has translated to some book deals and a peepcode video.

I also noticed that the announcement of Discource by Jeff Atwood and the fact that it was using ember.js seemed like a big deal.

The parts of Ember

Router

Tracking State in your app. Matching URL's to Controllers.

Controller

Action Handling, Proxy object for Model

Model

Access to your application data, retrieval, storage

View

Handles user input

Template

Layout of HTML

Ember Data

Adaptors, Transforms - Loading data!

Router

                App = Ember.Application.create({});

                ...

                App.IndexRoute = Ember.Route.extend({
                    redirect: function () {
                        this.transitionTo('shelves');
                    }
                });
            

Controller

                App = Ember.Application.create({});

                ...

                App.ShelvesController = Ember.ArrayController.extend({
                    content: [],
                    needs: ["shelf"],
                    addBook: function (book) {
                        console.log("Adding a Book!");
                        var shelf = this.get("controllers.shelf").get('model'), books = shelf.get('books');
                        books.createRecord(book);
                    }
                });
            

Model

                App.Shelf = DS.Model.extend({
                    books: DS.hasMany('App.Book'),
                    category: DS.attr('string')
                });
            

View

                App = Ember.Application.create({});

                ...

                App.ShelfView = Ember.View.extend({
                    layoutName: 'shelfListLayout',
                    templateName: 'shelf'
                });
            

Template

Ember Data

                App.Store = DS.Store.extend({
                    revision: 11,
                    adapter: 'DS.FixtureAdapter'
                });