Intro to Ember.js

Thursday, July 18, 13

Intro To Jay Phelps https://github.com/jayphelps July 18, 2013 1.0.0-rc.6 Thursday,
July 18, 13

WHAT EMBER IS • MVC client side JavaScript framework •
Open source • Convention over configuration (less boiler plate, steeper learning curve for some) Thursday, July 18, 13

CORE CONCEPTS • Classes • Computed Properties • Bindings •
Templates • MVC Thursday, July 18, 13

EMBER.OBJECT • Base “class” that almost every object should inherit
from • Contains magic Thursday, July 18, 13

CLASSES var Person = Ember.Object.extend({ say: function (message) { alert(message);
} }); var bob = Person.create(); bob.say('hello world'); // alerts "hello world" Thursday, July 18, 13

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." Thursday, July 18, 13

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 Thursday, July 18, 13

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 Thursday, July 18, 13

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" Thursday, July 18, 13

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. Thursday, July 18, 13

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" Thursday, July 18, 13

OBSERVERS • Should contain behavior that reacts a property’s value
changes Thursday, July 18, 13

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!” Thursday, July 18, 13

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. Thursday, July 18, 13

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 Thursday, July 18, 13

TEMPLATES • Uses Handlebars + Ember helpers • Ember adds
partial, render, view, and control helpers Thursday, July 18, 13

APPLICATION TEMPLATE <body> <script type="text/x-handlebars"> <div> {{outlet}} </div> </script> </body>
Thursday, July 18, 13

MVC...KINDA • Routes -> Models -> Controllers -> Views ->
Templates Thursday, July 18, 13

AN EMBER APP var App = Ember.Application.create(); App.Foo = Ember.Object.extend({
}); Thursday, July 18, 13

DEFINE YOUR ROUTES App.Router.map(function () { // route ‘index’ is
auto-assumed this.route('about'); this.route('contact'); }); Thursday, July 18, 13

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> Thursday, July 18, 13

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); } }); Thursday, July 18, 13

MODELS • ember-data • ember-model • BYO$A (bring your own
$.ajax); Thursday, July 18, 13

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

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!'); } }); Thursday, July 18, 13

DEMO Thursday, July 18, 13

THAT’S ALL FOLKS. Thursday, July 18, 13

Intro to Ember.js

Intro to Ember.js

Jay Phelps

More Decks by Jay Phelps

Other Decks in Programming

Featured

Transcript

Thursday, July 18, 13

Intro To Jay Phelps https://github.com/jayphelps July 18, 2013 1.0.0-rc.6 Thursday,

WHAT EMBER IS • MVC client side JavaScript framework •

CORE CONCEPTS • Classes • Computed Properties • Bindings •

EMBER.OBJECT • Base “class” that almost every object should inherit

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

var Man = Person.extend({ say: function (message) { message +=

EMBER.OBJECT • Obj.create() instead of new for instances • Obj.extend()

GETTER/SETTER • obj.get(‘key’) and obj.set(‘key’, value); • Always used on

GETTER/SETTER var Person = Ember.Object.extend({ name: '', sayMyName: function ()

COMPUTED PROPERTIES • Used to build a property that depends

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

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

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

BINDINGS • Properties that automatically listen and update their own

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

TEMPLATES • Uses Handlebars + Ember helpers • Ember adds

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

MVC...KINDA • Routes -> Models -> Controllers -> Views ->

AN EMBER APP var App = Ember.Application.create(); App.Foo = Ember.Object.extend({

DEFINE YOUR ROUTES App.Router.map(function () { // route ‘index’ is

APPLICATION TEMPLATE <body> <script type="text/x-handlebars"> <h1>My Great Web App</h1> <div>

DEFINE YOUR ROUTES App.IndexRoute = Ember.Route.extend({ setupController: function (controller) {

MODELS • ember-data • ember-model • BYO$A (bring your own

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

VIEWS App.AboutView = Ember.View.extend({ // template name is optional for

DEMO Thursday, July 18, 13

THAT’S ALL FOLKS. Thursday, July 18, 13