Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Extinguish the Fire with Ember.js
Peter Brown
February 12, 2014
Technology
6
420
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
Make the Internet Great Again with Glimmer.js
beerlington
0
110
History of a Thriving Codebase
beerlington
2
310
Introduction to ClassyEnum and Friends
beerlington
1
140
Lighting Up with Ember.js
beerlington
8
510
Networking Refactored
beerlington
1
84
Intro to Object Oriented Programming in Ruby
beerlington
10
930
Responsible Metaprogramming in Rails
beerlington
3
710
BTVWAG Survey Results
beerlington
1
180
Behavior Driven Development
beerlington
2
840
Other Decks in Technology
See All in Technology
Trusted Web プロトタイプ
finengine
0
330
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
480
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
200
ReverseETLでユーザーに価値を届ける基盤を実現した話
hakky
0
350
テスト自動化を最速で軌道に乗せるために
nozomiito
0
140
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
漫画で使えそうな背景画像をblenderを使って作ってみた!
nokonoko1203
1
300
DevRel組織についての考察
taijihagino
PRO
0
140
Step-by-Step MLOps and Microsoft Products
shisyu_gaku
1
570
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
410
大声で伝えたい!定時に帰る方法
sbtechnight
0
240
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
270
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
324
55k
How STYLIGHT went responsive
nonsquared
85
4k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Six Lessons from altMBA
skipperchong
14
1.4k
Bash Introduction
62gerente
598
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Automating Front-end Workflow
addyosmani
1351
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
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