Slide 1
Slide 1 text
EXTINGUISH THE FIRE
WITH EMBER.JS
BTVWAG - Feb 12, 2014
Presented by Peter Brown
Slide 2
Slide 2 text
WEB DEVELOPER
@beerlington
Slide 3
Slide 3 text
PROBLEMS
‣ Client side development is challenging
‣ Expectations about how websites should work
‣ Single page applications aren’t always that
‣ Lack of conventions
Slide 4
Slide 4 text
HYPOTHESIS
As browsers become more capable and JS enables
us to do more, the applications we build will
become more ambitious and require better tools.
Complexity Capability
Slide 5
Slide 5 text
A framework for creating
ambitious web applications
Write dramatically less code
Built for productivity
Don't reinvent the wheel
EMBER.JS
Slide 6
Slide 6 text
WHAT DOES
EMBER LOOK LIKE?
Slide 7
Slide 7 text
ROUTER
Maps a URL to a Route
App.Router.map(function() {!
this.resource('posts');!
this.resource('post', { path: '/post/:post_id' });!
});!
Slide 8
Slide 8 text
ROUTER
/posts → PostsRoute
/post/123 → PostRoute
App.Router.map(function() {!
this.resource('posts');!
this.resource('post', { path: '/post/:post_id' });!
});!
Slide 9
Slide 9 text
ROUTER
Nested Routes
App.Router.map(function() {!
this.resource('post', { path: '/post/:post_id' }, function() {!
this.route('edit');!
this.resource('comments', function() {!
this.route('new');!
});!
});!
});!
Slide 10
Slide 10 text
ROUTER
/post/123 → PostRoute
/post/123/edit → PostEditRoute
/post/123comments → CommentsRoute
/post/123/comments/new → CommentsNewRoute
App.Router.map(function() {!
this.resource('post', { path: '/post/:post_id' }, function() {!
this.route('edit');!
this.resource('comments', function() {!
this.route('new');!
});!
});!
});!
Slide 11
Slide 11 text
ROUTE
Responsible for loading data, displaying
templates and setting up application state.
App.PostRoute = Ember.Route.extend({!
model: function(params) {!
return this.store.find('post', params.post_id);!
}!
});!
Slide 12
Slide 12 text
CONTROLLER
Acts as a proxy to the model and
handles events from the template
App.PostController = Ember.ObjectController.extend({!
actions: {!
publishPost: function() {!
this.toggleProperty('isPublished');!
}!
}!
});!
Slide 13
Slide 13 text
TEMPLATE
Handlebars = HTML + embedded expressions
Hello, {{firstName}}!!
Slide 14
Slide 14 text
TEMPLATE
Hello,
App.ApplicationController = Ember.Controller.extend({!
firstName: "Peter"!
});!
The PostRoute “glues” these together
Slide 15
Slide 15 text
TEMPLATE
Automatically bound to controller’s state
{{#if isPublished}}!
!
This post is published!!
!
{{else}}!
!
This post is NOT published!!
!
{{/if}}!
Slide 16
Slide 16 text
MODEL
Defines schema and relationships
App.Post = DS.Model.extend({!
title: DS.attr('string'),!
publishedAt: DS.attr('date'),!
author: DS.belongsTo('author')!
});!
Slide 17
Slide 17 text
VIEW
When you need more control, used less frequently,
always associated with a controller
var view = Ember.View.create({!
templateName: 'say-hello',!
name: "Bob"!
});!
Slide 18
Slide 18 text
COMPONENT
Custom HTML elements,
like views without controller
!
<h1>Blog Post</h1>!
<p>Lorem ipsum dolor sit amet.</p>!
!
Slide 19
Slide 19 text
DATA AND EVENT
RELATIONSHIPS
Slide 20
Slide 20 text
DATA BINDING
Route
View
Model
Controller
Template
Slide 21
Slide 21 text
EVENT BUBBLING
View
Model
Controller
Template
Route
Slide 22
Slide 22 text
UPDATING DATA
View
Controller
Template
Model
Route
Slide 23
Slide 23 text
EMBER’S ADVANTAGES
Slide 24
Slide 24 text
ARCHITECTURE
‣ Supports application growth via:
• Organization
• Eliminating boilerplate
• Sensible conventions
‣ Encapsulation
• Loose coupling between components
Slide 25
Slide 25 text
APPLICATION SPEED
‣ 100% of HTML rendering is in browser
‣ Server is responsible for data via API Requests
Slide 26
Slide 26 text
OBJECT MODEL
‣ Computed properties
• with and without aggregate data
‣ Observers
‣ Bindings
• two-way default, one-way for performance
Slide 27
Slide 27 text
MASTER-DETAIL INTERFACE
Slide 28
Slide 28 text
MASTER-DETAIL INTERFACE
Slide 29
Slide 29 text
FRIENDLY DOCUMENTATION
Slide 30
Slide 30 text
RAILS INFLUENCE
‣ Convention over configuration
• Naming conventions (code + files)
• If it feels painful, you’re likely doing it wrong
‣ REST architecture
Slide 31
Slide 31 text
EMBER’S DISADVANTAGES
Slide 32
Slide 32 text
LEARNING CURVE
Frustration
Time
Slide 33
Slide 33 text
SPRINKLES OF JAVASCRIPT
Slide 34
Slide 34 text
HANDLEBARS
Slide 35
Slide 35 text
EMBER DATA
BETA!
Slide 36
Slide 36 text
WHAT’S COMING?
Slide 37
Slide 37 text
EMBER DATA
1.0
Slide 38
Slide 38 text
BUILD TOOLS
‣ Modules as first-class citizens (ES6 modules)
‣ Built-in Bower support
‣ CLI commands
• $ ember server
• $ ember test
Slide 39
Slide 39 text
HTMLBARS
‣ Performance gains
‣ Faster Rendering (comparable to React)
‣ Will build DOM instead of strings
Slide 40
Slide 40 text
HTMLBARS
Before
After
!
Slide 41
Slide 41 text
OTHER FUN STUFF
‣ Slimming down the codebase
‣ Removing jQuery dependency
‣ Continued support for IE8
Slide 42
Slide 42 text
HONORABLE MENTION
Slide 43
Slide 43 text
HONORABLE MENTION
Slide 44
Slide 44 text
“What kind of application are you building?”
Tom Dale - Ember co-creator