Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Extinguish the Fire with Ember.js
Search
Peter Brown
February 12, 2014
Technology
6
500
Extinguish the Fire with Ember.js
Presented to the Burlington Web application group at the Front end framework faceoff.
Peter Brown
February 12, 2014
Tweet
Share
More Decks by Peter Brown
See All by Peter Brown
History of a Thriving Codebase
beerlington
2
420
Introduction to ClassyEnum and Friends
beerlington
1
250
Lighting Up with Ember.js
beerlington
8
560
Networking Refactored
beerlington
1
110
Intro to Object Oriented Programming in Ruby
beerlington
10
1.1k
Responsible Metaprogramming in Rails
beerlington
3
780
BTVWAG Survey Results
beerlington
1
210
Behavior Driven Development
beerlington
2
930
Other Decks in Technology
See All in Technology
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.2k
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
730
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
120
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
490
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
460
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
How to achieve interoperable digital identity across Asian countries
fujie
0
150
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
170
Where will it converge?
ibknadedeji
0
210
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
230
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
220
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Become a Pro
speakerdeck
PRO
29
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Agile that works and the tools we love
rasmusluckow
331
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Music & Morning Musume
bryan
46
6.8k
Making Projects Easy
brettharned
119
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Documentation Writing (for coders)
carmenintech
75
5.1k
Facilitating Awesome Meetings
lara
56
6.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Statistics for Hackers
jakevdp
799
220k
Transcript
EXTINGUISH THE FIRE WITH EMBER.JS BTVWAG - Feb 12, 2014
Presented by Peter Brown
WEB DEVELOPER @beerlington
PROBLEMS ‣ Client side development is challenging ‣ Expectations about
how websites should work ‣ Single page applications aren’t always that ‣ Lack of conventions
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
A framework for creating ambitious web applications Write dramatically less
code Built for productivity Don't reinvent the wheel EMBER.JS
WHAT DOES EMBER LOOK LIKE?
ROUTER Maps a URL to a Route App.Router.map(function() {! this.resource('posts');!
this.resource('post', { path: '/post/:post_id' });! });!
ROUTER /posts → PostsRoute /post/123 → PostRoute App.Router.map(function() {! this.resource('posts');!
this.resource('post', { path: '/post/:post_id' });! });!
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');! });! });! });!
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');! });! });! });!
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);! }! });!
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');! }! }! });!
TEMPLATE Handlebars = HTML + embedded expressions Hello, <strong>{{firstName}}</strong>!!
TEMPLATE Hello, App.ApplicationController = Ember.Controller.extend({! firstName: "Peter"! });! The PostRoute
“glues” these together
TEMPLATE Automatically bound to controller’s state {{#if isPublished}}! <span>! This
post is published!! </span>! {{else}}! <span>! This post is NOT published!! </span>! {{/if}}!
MODEL Defines schema and relationships App.Post = DS.Model.extend({! title: DS.attr('string'),!
publishedAt: DS.attr('date'),! author: DS.belongsTo('author')! });!
VIEW When you need more control, used less frequently, always
associated with a controller var view = Ember.View.create({! templateName: 'say-hello',! name: "Bob"! });!
COMPONENT Custom HTML elements, like views without controller <script type="text/x-handlebars"
id="components/blog-post">! <h1>Blog Post</h1>! <p>Lorem ipsum dolor sit amet.</p>! </script>!
DATA AND EVENT RELATIONSHIPS
DATA BINDING Route View Model Controller Template
EVENT BUBBLING View Model Controller Template Route
UPDATING DATA View Controller Template Model Route
EMBER’S ADVANTAGES
ARCHITECTURE ‣ Supports application growth via: • Organization • Eliminating
boilerplate • Sensible conventions ‣ Encapsulation • Loose coupling between components
APPLICATION SPEED ‣ 100% of HTML rendering is in browser
‣ Server is responsible for data via API Requests
OBJECT MODEL ‣ Computed properties • with and without aggregate
data ‣ Observers ‣ Bindings • two-way default, one-way for performance
MASTER-DETAIL INTERFACE
MASTER-DETAIL INTERFACE
FRIENDLY DOCUMENTATION
RAILS INFLUENCE ‣ Convention over configuration • Naming conventions (code
+ files) • If it feels painful, you’re likely doing it wrong ‣ REST architecture
EMBER’S DISADVANTAGES
LEARNING CURVE Frustration Time
SPRINKLES OF JAVASCRIPT
HANDLEBARS
EMBER DATA BETA!
WHAT’S COMING?
EMBER DATA 1.0
BUILD TOOLS ‣ Modules as first-class citizens (ES6 modules) ‣
Built-in Bower support ‣ CLI commands • $ ember server • $ ember test
HTMLBARS ‣ Performance gains ‣ Faster Rendering (comparable to React)
‣ Will build DOM instead of strings
HTMLBARS <img {{bind-attr src=imageUrl}}> Before After <img src="{{imageUrl}}">!
OTHER FUN STUFF ‣ Slimming down the codebase ‣ Removing
jQuery dependency ‣ Continued support for IE8
HONORABLE MENTION
HONORABLE MENTION
“What kind of application are you building?” Tom Dale -
Ember co-creator