Intro to Ember.js

Thursday, July 18, 13

Intro To

Jay Phelpshttps://github.com/jayphelps

July 18, 2013

1.0.0-rc.6


WHAT EMBER IS

• MVC client side JavaScript framework

• Open source

• Convention over configuration (less boiler plate, steeper learning curve for some)


CORE CONCEPTS

• Classes

• Computed Properties

• Bindings

• Templates

• MVC


EMBER.OBJECT

• Base “class” that almost every object should inherit from

• Contains magic


CLASSES

var Person = Ember.Object.extend({ say: function (message) { alert(message); }});

var bob = Person.create();bob.say('hello world');// alerts "hello world"


var Man = Person.extend({ say: function (message) { message += ', says the man.'; this._super(message); }});

var dudebro = Man.create();dudebro.say('hello world');// alerts "hello world, says the man."


EMBER.OBJECT

• Obj.create() instead of new for instances

• Obj.extend() for single inheritance (mixins exist as well)

• this._super() calls overridden implementation

• Obj.reopen() to edit class definition

• Obj.reopenClass() to modify static members


GETTER/SETTER

• obj.get(‘key’) and obj.set(‘key’, value);

• Always used on instances that inherit Ember.Object

• Allows dynamically created property values

• Objects can listen for property changes

• Use .setProperties({ key: value }) for multiple at a time


GETTER/SETTER

var Person = Ember.Object.extend({ name: '',

sayMyName: function () { alert(this.get('name')); }});

var dudebro = Person.create();dudebro.set('name', 'Tomster');dudebro.sayMyName();// alerts "Tomster"


COMPUTED PROPERTIES

• Used to build a property that depends on other properties.

• Function prototype .property() helper

• Provide any property keys you access and the property value will recomputed if they change

• Should not contain application behavior, and should generally not cause any side-effects when called.


COMPUTED PROPERTIES

var Person = Ember.Object.extend({ firstName: '',

lastName: '', fullName: function () {

return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')});

var person = Person.create({ firstName: 'Bilbo',

lastName: 'Baggins',});

person.get('fullName');// "Bilbo Baggins"


OBSERVERS

• Should contain behavior that reacts a property’s value changes


OBSERVERS

var Person = Ember.Object.extend({ firstName: '',

lastName: '', fullName: function () {

return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName'),

fullNameDidChange: function () { alert('changed!'); }.observes('fullName')});

var person = Person.create({ firstName: 'Bilbo',

lastName: 'Baggins',});

person.set('firstName', 'Frodo');// alerts “changed!”


BINDINGS

• Properties that automatically listen and update their own value to match a target property or vice versa

• Are most often used to ensure objects in two different layers are always in sync. For example, you bind your views to your controller using Handlebars.


BINDINGS

App.wife = Ember.Object.create({ householdIncome: 80000});

App.husband = Ember.Object.create({ // Notice the `Binding` suffix, which triggers the binding householdIncomeBinding: 'App.wife.householdIncome'});

App.husband.get('householdIncome');// 80000

// Someone gets raise.App.husband.set('householdIncome', 90000);

App.wife.get('householdIncome');// 90000


TEMPLATES

• Uses Handlebars + Ember helpers

• Ember adds partial, render, view, and control helpers


APPLICATION TEMPLATE

<body><script type="text/x-handlebars"> <div> {{outlet}} </div></script></body>


MVC...KINDA

• Routes -> Models -> Controllers -> Views -> Templates


AN EMBER APP

var App = Ember.Application.create();

App.Foo = Ember.Object.extend({ });


DEFINE YOUR ROUTES

App.Router.map(function () { // route ‘index’ is auto-assumed this.route('about'); this.route('contact');});


APPLICATION TEMPLATE

<body><script type="text/x-handlebars"> <h1>My Great Web App</h1> <div> {{outlet}} </div></script><script type="text/x-handlebars" data-template-name="index"> <h1>{{welcomeMessage}}</h1> <ul> {{#each names}} <li>{{this}}</li> {{/each}} </ul> {{#linkTo about}}Navigate to `about` page{{/linkTo}}</script><script type="text/x-handlebars" data-template-name="about"> <p>The current time is: {{time}}</p> {{#linkTo index}}Navigate to `index` (home) page{{/linkTo}}</script>


DEFINE YOUR ROUTES

App.IndexRoute = Ember.Route.extend({ setupController: function (controller) { controller.set('welcomeMessage', 'Welcome!'); }});

App.AboutRoute = Ember.Route.extend({ setupController: function (controller) { setInterval(function () { controller.set('time', new Date()); }, 1000); }});


MODELS

• ember-data

• ember-model

• BYO$A (bring your own $.ajax);


CONTROLLERS

App.IndexController = Ember.ObjectController.extend({ welcomeMessage: '', names: ['Bilbo', 'Frodo', 'Sam']});


VIEWS

App.AboutView = Ember.View.extend({ // template name is optional for views // that are rendered from a route templateName: 'about', // events bubble up to each parent view until it reaches // the root view click: function (event) { alert('about view clicked!'); }});


DEMO


THAT’S ALL FOLKS.


Technology

Intro to Ember.js