Introduction to Ember.js

INTRODUCTION TO
EMBER.JS
Ben Hughes
SDJS, October 2012
http://benhugh.es
@rubiety
Wednesday, October 3, 12

View Slide


View Slide

WHY LEARN
EMBER.JS?
“It's not Ember that's hard. It's the concepts.”
- http://trek.github.com/

View Slide


View Slide

GAME PLAN:
•Ember Objects & Templates
•Ember Views & Controllers
•Ember Routers / State Managers
•Strengths / Weaknesses

View Slide

CONVENTIONS:
•Top-level Application Namespace (Object) “App”
•Classes are upper-case properties (App.User)
•Instances are lower-case properties (App.user)
•Camel-casing

View Slide

EM.OBJECT
The Core of Ember.js

View Slide

EM.OBJECT - FEATURES
•Computed Properties
•Observers
•Bindings
•Auto-Updating Templates

View Slide

EM.OBJECT - CLASSES
App.User = Ember.Object.extend({
firstName: null,
lastName: null
});
var user = App.User.create({
firstName: "Ben",
lastName: "Hughes"
});
user.get("firstName"); # "Ben"
user.get("lastName"); # "Hughes"

View Slide

EM.OBJECT - INSTANCES
var user = Ember.Object.create({
firstName: "Ben",
lastName: "Hughes"
});

View Slide

WITHOUT CLASS
var user = Ember.Object.create({
firstName: "Ben",
lastName: "Hughes"
});

View Slide

COMPUTED PROPERTIES
App.User = Ember.Object.extend({
firstName: null,
lastName: null,
fullName: function() {
return this.get("firstName") + " " + this.get("lastName");
}.property("firstName", "lastName")
});
var user = App.User.create({
firstName: "Ben",
lastName: "Hughes"
});

View Slide

GETTING/SETTING
user.set("firstName", "Benjamin");
user.setProperties({
firstName: "Benjamin"
});
user.get("firstName"); // "Ben"
user.get("lastName"); // "Hughes"

View Slide

ADVANCED COMPUTED
PROPERTIES
var project = Ember.Object.create({
todos: [ Ember.Object.create({done: false}) ],
remaining: function() {
return this.get("todos").filterProperty('done', false).get("length");
}.property("[email protected]")
});
project.get("remaining"); # 1

View Slide

OBSERVERS
// Explicit:
user.addObserver("fullName", function() {
alert("Changed Full Name");
});
user.set("firstName", "Benjamin");
// Implicit:
App.User.reopen({
fullNameChanged: function() {
alert("Changed Full Name");
}.observes('fullName')
});

View Slide

BINDINGS
App.wife = Ember.Object.create({
householdIncome: 80000
});
App.husband = Ember.Object.create({
householdIncomeBinding: "App.wife.householdIncome"
});
App.husband.get("householdIncome"); // 80000
App.husband.set("householdIncome", 90000);
App.wife.get("householdIncome"); // 90000

View Slide

FEATURES GUIDE
•Use Computed Properties to create a new
property synthesizing other properties.
•Use Observers to react to changes in another
property.
•Use Bindings to ensure objects in two different
layers are always in sync.

View Slide

TEMPLATES
Auto-updating templates bound to objects with Handlebars.js

View Slide

JAVASCRIPT REQUIREMENTS


View Slide

HANDLEBARS TEMPLATES
• Placed in • Can be named (stored for later use), or unnamed (evaluate immediately in-line) • Deliberately limited semantics (supports auto-updating) Wednesday, October 3, 12 

View Slide

Hello, {{App.user.fullName}} 

App.user.set("firstName", "Benjamin");
App.user = App.User.create({firstName: "Ben", lastName: "Hughes"});
BASIC EXAMPLE

View Slide

{{#with App.user}} Hello, {{fullName}} {{/with}} 

CONTEXT WITH “WITH”

View Slide

Hello,

Ben Hughes

UNDER THE HOOD

View Slide

App.user = App.User.create();

 {{#if App.user.lastName}} Hello, {{App.user.fullName}} {{else}} Sorry, not found. {{/if}} 

App.user.setProperties({firstName: "Ben", lastName: "Hughes"});

View Slide

App.company = Ember.Object.create({
people: [
{ name: 'Yehuda' },
{ name: 'Tom' }
]
});
 <ul> {{#each App.company.people}} <li>Hello, {{name}}!</li> {{/each}} </ul> 

View Slide

BINDING ATTRIBUTES


View Slide

ASYNCHRONOUS
LOADING
Ember’s approach to a difﬁcult problem...

View Slide

TRADITIONAL APPROACH
jQuery.getJSON('/posts/1', function(post) {
$("#post").html(
"" + post.title + "" +
"" + post.body + ""
);
});

View Slide

EMBER’S APPROACH
“In general, Ember's goal is to eliminate explicit
forms of asynchronous behavior. As we'll see
later, this gives Ember the ability to coalesce
multiple events that have the same result.
It also provides a higher level of abstraction,
eliminating the need to manually register and
unregister event listeners to perform most
common tasks.”

View Slide

LOADING USER VIA AJAX
 Hello, {{App.user.fullName}}. Your username is: {{App.user.username}}. 
App.user = App.User.find("rubiety");

View Slide

WRONG WAY
App.User.reopenClass({
find: function(username) {
$.ajax({
url: '/users/' + username,
dataType: 'json',
success: function(response) {
return response.data;
}
});
}
});
App.User.find("rubiety");

View Slide

RIGHT WAY
var user = App.User.create({ username: username });
$.ajax({
dataType: 'json',
user.setProperties(response.data);
}
});
return user;
}
});

View Slide

ONLY DISPLAY IF LOADED
App.user = App.User.find("rubiety");
 {{#if App.user.isLoaded}} Hello, {{App.user.fullName}}. Your username is: {{App.user.username}}. {{else}} Loading user... {{/if}} 

View Slide

ONLY DISPLAY IF LOADED
var user = App.User.create({ username: username });
$.ajax({
dataType: 'json',
user.setProperties(response.data);
user.set("isLoaded", true);
}
});
return user;
}
});

View Slide

EMBER-DATA
A client-side ORM for Ember. Not covering, but more info here:
https://github.com/emberjs/data

View Slide

VIEWS &
CONTROLLERS
Higher-level constructs for MVC design
You an do quite a lot just with auto-updating
templates and Ember.Object, but Ember supports
a wealth of higher-level components for complex
UI engineering

View Slide


View Slide

MVC COMPONENTS
• Model: Em.Object (or DS.Model) describes application structure,
including relationships between models.
• View: Em.View encapsulates templates and manages events. Usually
corresponds to a named Handlebars.js template.
• Controller: Mediate’s views access to model.
• Em.ArrayController proxies to array data
• Em.ObjectController proxies to a single object
• State Manager: (Routers) Act as a map of your application and
handle transitions as a user moves through it.

View Slide

EM.VIEW

View Slide

NAMED VIEWS

 Hello, {{name}} 

App.SayHelloView = Ember.View.extend({
templateName: 'say-hello'
});
var view = App.SayHelloView.create({name: "Bob"});
view.appendTo("#container"); // or view.append(); (appends to body)
view.remove();

View Slide

VIEWS INSIDE ANOTHER VIEW
 <h1>My Application</h1> {{#view App.SayHelloView name="Bob"}} 
 Hello, {{name}} 
App.SayHelloView = Ember.View.extend({
templateName: 'say-hello'
});

View Slide

VIEWS BOUND TO OTHER DATA
App.SayHelloView = Ember.View.extend({templateName: 'say-hello'});
var view = App.SayHelloView.create({
userBinding: "App.user"
});
view.append();
 Hello, {{user.fullName}} 
App.user.set({firstName: "Benjamin"});
// Hello, Benjamin Hughes

View Slide

VIEW CONTEXT
App.SayHelloView = Ember.View.extend({templateName: 'say-hello'});
var view = App.SayHelloView.create({
userBinding: "App.user",
contextBinding: "user",
});
view.append();
 Hello, {{fullName}} 

View Slide

EVENTS WITH {{ACTION}}
 {{#if isEditing}} First Name: {{view Ember.TextField valueBinding="user.firstName"}} Last Name: {{view Ember.TextField valueBinding="user.lastName"}} <a href="#" {{action "show"}}>Show User</a> {{else}} <h1>Showing User {{user.fullName}}.</h1> <a href="#" {{action "edit"}}>Edit User</a> {{/if}} 
App.UserView = Ember.View.extend({
templateName: "user",
userBinding: "App.user"
edit: function(e) { this.set("isEditing", true); },
show: function(e) { this.set("isEditing", false); }
});

View Slide

OTHER VIEW FEATURES
(NOT COVERED)
• Modifying a View’s HTML (Generated Tag)
• Custom Handlebars Helpers
• View Nesting / Hierarchy
• Event propagation through View Hierarchy
• {{action}} targeting another view or controller/router
• View Components (Controls for Select, TextField, etc.)
• ArrayProxy and Enumerable

View Slide

EM.CONTROLLER
Controlling access to your model data...

View Slide

App.usersController = Ember.ArrayController.create({
content: [
Em.Object.create({ firstName: "Ben", lastName: "Hughes" }),
Em.Object.create({ firstName: "Oscar", lastName: "Peterson"})
]
});
App.usersView = Ember.View.create({
templateName: "users",
controllerBinding: "App.usersController"
});
 <ul> {{#each controller}} <li>{{firstName}} {{lastName}}</li> {{/each}} </ul> 
App.usersView.append();

View Slide

App.usersView.append();
App.users = [
Em.Object.create({ firstName: "Ben", lastName: "Hughes" }),
Em.Object.create({ firstName: "Oscar", lastName: "Peterson"}),
Em.Object.create({ firstName: "Kenny", lastName: "Barron"}),
];
App.usersController = Ember.ArrayController.create({
contentBinding: "App.users"
});
App.usersView = Ember.View.create({
templateName: "users",
controllerBinding: "App.usersController"
});

View Slide

App.user = Em.Object.create({
firstName: "Ben",
lastName: "Hughes"
});
App.userController = Ember.ObjectController.create({
contentBinding: "App.user"
});
App.userView = Ember.View.create({
templateName: "user",
controllerBinding: "App.userController",
contextBinding: "controller",
});
 Hi, {{firstName}} {{lastName}} 

View Slide

EM.ROUTER
Managing State
Covering only brieﬂy - more information at:
http://trek.github.com/

View Slide

<h1>My Application</h1> {{outlet}} 
 <h2>Users</h2> ... 
 <h2>Projects</h2> ... 
App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend();
App.UsersController = Ember.ArrayController.extend();
App.UsersView = Ember.View.extend();
App.ProjectsController = Ember.ArrayController.extend();
App.ProjectsView = Ember.View.extend();

View Slide

App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: "/",
redirectsTo: "users"
});
users: Ember.route.extend({
route: "/users",
connectOutlets: function(router) {
router.get("applicationController").connectOutlet("users", App.User.all());
}
});
projects: Ember.route.extend({
route: "/projects",
connectOutlets: function(router) {
router.get("applicationController").connectOutlet("projects", App.Project.all());
}
})
});
});
App.initialize();
// Now Available:
App.router
App.router.applicationController, App.router.usersController, App.router.projectsController

View Slide

router.get("applicationController").connectOutlet("users", App.User.all());
// The above line automatically does the following:
// 1. New router.usersController with content = App.User.all();
router.usersController = App.UsersController.create({
content: App.User.all()
});
// 2. New App.UsersView controller = router.usersController, context = controller
var view = App.UsersView.create({
controller: router.usersController,
context: controller
});
// The view is rendered with the template (example below)
// and inserted into {{outlet}} of ApplicationView:

View Slide

OTHER ROUTER FEATURES
(NOT COVERED)
• Nested Routing
• Routing with Named Parameters (/users/:user_id)
• Serializing & Deserializing for State transition on # access
• Wiring up view actions to router events (and state transitions)

View Slide

CATPRINT
ORDER BUILDER

View Slide

EMBER STRENGTHS:
• Scales well with complexity
• Excellent strong object system throughout the library with
robust data binding / dependency resolution
• Robust View Hierarchy
• Performant Event Delegation
• Manages creating and destroying views efﬁciently for optimal
memory management without leaks and phantom events
• Excellent tools for complex UI engineering
• Lean Templates with Handlebars.js

View Slide

EMBER WEAKNESSES:
• A little too much ceremony for simple apps
• Poor Documentation, Few non-trivial example apps available
• Concepts are Difﬁcult
• A fair amount of “magic” and auto-instantiation with
Controllers / Routers
• Template auto-updating only works with Handlebars.js
• Pre-Version 1.0, so still a bit premature, but getting there
• Ember ORM (ember-data) “not production ready”
• Script tag “markers” in rendered markup, and Ember IDs

View Slide

WHEN MIGHT YOU USE EMBER?
• Complex applications with non-trivial nested UIs - Ember has
hierarchical views and powerful state managers to make this
easy
• Applications with lots of data dependency/recalculation/re-
rendering - Ember handles this very transparently
WHEN TO NOT USE EMBER:
• Applications with fairly simple views and minimal nesting /
event handling

View Slide

QUESTIONS?
Ben Hughes
http://benhugh.es
@rubiety
http://emberjs.com/
http://emberjs.com/guides/
http://trek.github.com/

View Slide

Introduction to Ember.js

Introduction to Ember.js

Ben Hughes

More Decks by Ben Hughes

Other Decks in Technology

Featured

Transcript