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
480
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
160
History of a Thriving Codebase
beerlington
2
380
Introduction to ClassyEnum and Friends
beerlington
1
230
Lighting Up with Ember.js
beerlington
8
550
Networking Refactored
beerlington
1
97
Intro to Object Oriented Programming in Ruby
beerlington
10
1k
Responsible Metaprogramming in Rails
beerlington
3
750
BTVWAG Survey Results
beerlington
1
190
Behavior Driven Development
beerlington
2
920
Other Decks in Technology
See All in Technology
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
350
Efficient zero-copy networking using io_uring
ennael
PRO
0
410
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
130
SageMaker学習のツボ / The Key Points of Learning SageMaker
cmhiranofumio
0
220
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
170
Azure App Service on Linux の Sidecar に Phi-3 を配置してインテリジェントなアプリケーションを作ってみよう/jazug-anniv14
thara0402
0
550
怖くないオフライン機能開発 〜基本的な技術で実現する現場向けオフライン機能 / Developing offline functions without fear ~ Offline functions for the field realized with basic technology
kaminashi
1
120
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
170
シェルとPerlの使い分け、 そういった思考の道具は、どこから来て、どこへゆくのか?v1.1.0
fmlorg
0
570
Do you know “Environment Variables” ?
akimiya
0
100
RAG: from dumb implementation to serious results
glaforge
0
300
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
250
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Automating Front-end Workflow
addyosmani
1365
200k
The Invisible Side of Design
smashingmag
297
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
240
Documentation Writing (for coders)
carmenintech
65
4.4k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
We Have a Design System, Now What?
morganepeng
50
7.2k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Typedesign – Prime Four
hannesfritz
39
2.3k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
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