Slide 1
Slide 1 text
Ember.js:
The Architecture
Advantage
Luke Melia
GothamJS
July 12th, 2013
Slide 2
Slide 2 text
About this Javascript Developer
2
Slide 3
Slide 3 text
Relevant
Experience
3
2
Years of Ember
under my belt
Slide 4
Slide 4 text
Relevant
Experience
4
6
Consumer-grade
Ember.js apps
Slide 5
Slide 5 text
Relevant
Experience
5
44
Commits
to Ember.js
Slide 6
Slide 6 text
Ember.js NYC
Meetup
6
Slide 7
Slide 7 text
“I’m evaluating
Javascript MVC
frameworks.”
7
Slide 8
Slide 8 text
8
Smart
developers
experiment with
technologies
before making
big choices...
Slide 9
Slide 9 text
Smart
developers
experiment with
technologies
before making
big choices...
9
Slide 10
Slide 10 text
...and they
visit with the
community
around a
project.
10
Slide 11
Slide 11 text
But it’s hard to
know what it’s
like to actually
live with it.
11
Slide 12
Slide 12 text
12
How
does a framework
support you as the size and
complexity of your app increases?
How
does a framework
support you as the size and
complexity of your app increases?
How
does a framework
support you as the size and
complexity of your app increases?
Slide 13
Slide 13 text
Ember’s approach
shines as the size
and complexity of
an app grows.
13
Let’s look at why.
Slide 14
Slide 14 text
This talk is not an Ember tutorial.
14
Slide 15
Slide 15 text
This talk is an
exploration of the
value of good
architecture in
Ember.js...
15
Slide 16
Slide 16 text
...with pictures of
New York City...
16
Slide 17
Slide 17 text
...and no pictures
of cats.
17
Slide 18
Slide 18 text
18
Unless it’s a
Broadway cat!
Slide 19
Slide 19 text
19
Or a subway cat.
Slide 20
Slide 20 text
What are the qualities
of a framework that
supports app
evolution well?
20
Slide 21
Slide 21 text
21
3
Slide 22
Slide 22 text
It should be clear
where code
belongs and
where to find it.
22
Slide 23
Slide 23 text
You should have
to write and
maintain the least
amount of code
necessary.
23
Slide 24
Slide 24 text
Change in one
area of your app
should not affect
other areas.
24
Slide 25
Slide 25 text
25
๏ Well-Organized
๏ Eliminates Boilerplate
๏ Loosely Coupled
Slide 26
Slide 26 text
26
๏ Well-Organized
๏ Eliminates Boilerplate
๏ Loosely Coupled
Slide 27
Slide 27 text
27
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
Slide 28
Slide 28 text
28
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
Templates define the HTML to render.
Slide 29
Slide 29 text
29
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
Models encapsulate the data and
logic of your problem domain.
Slide 30
Slide 30 text
30
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
Controllers present data to a template for rendering,
by proxying models and
by managing local transient state.
Slide 31
Slide 31 text
31
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
The Router transitions between a
collection of routes, each representing
a high-level application state.
Each Route coordinates models and
controllers for its state and handles
high-level events appropriately.
Slide 32
Slide 32 text
32
Clear Delineation of Responsibilities
Router Controller Controller
View View
Template
Model Model Model Model
Template
Views execute DOM-related logic.
Slide 33
Slide 33 text
33
A map helps you know
where you are and
where to find things.
Slide 34
Slide 34 text
The router DSL is a map of your app 34
PostRoute will load the Post model into the
PostController and render the “post” template
into the main outlet.
Slide 35
Slide 35 text
The router DSL is a map of your app 35
CommentsRoute will render the “comments”
template with the CommentsController into
the main outlet of the “post” template.
Slide 36
Slide 36 text
Pods of
Functionality
Ember apps are
organized by hanging
Controller-Template
pairs off of each
Route, providing
clear boundaries and
isolation.
36
Slide 37
Slide 37 text
Go with
the Flow
Ember apps
have a clear flow
of data and
events.
37
Slide 38
Slide 38 text
38
A clear flow of data and events
Router Controller Controller
View View
Template
Model Model Model Model
Data flows down from
models via bindings
Events flow up from
view layer to the router
Router updates models &
controllers based on events
Template
Slide 39
Slide 39 text
Ember
Components
Web components
while we’re waiting
for web components.
39
Slide 40
Slide 40 text
Truth in
Javascript
๏ Not in DOM
๏ Not in the URL
40
Slide 41
Slide 41 text
41
๏ Well-Organized
๏ Eliminates Boilerplate
๏ Loosely Coupled
Slide 42
Slide 42 text
Convention Over Configuration 42
Slide 43
Slide 43 text
Convention Over Configuration 43
PostController instance
Slide 44
Slide 44 text
Convention Over Configuration 44
Slide 45
Slide 45 text
Convention Over Configuration 45
Slide 46
Slide 46 text
ObjectController 46
All properties not defined on the ObjectController
will be delegated to the model.
Slide 47
Slide 47 text
Convention Over Configuration 47
Default
behavior
Slide 48
Slide 48 text
A Sidenote on Embracing Asynchrony 48
the model hook
is Promise-aware
Slide 49
Slide 49 text
Convention Over Configuration 49
Default
behavior
Slide 50
Slide 50 text
Convention Over Configuration 50
Slide 51
Slide 51 text
Active Generation 51
Slide 52
Slide 52 text
Convention Over Configuration 52
Slide 53
Slide 53 text
53
๏ Well-Organized
๏ Eliminates Boilerplate
๏ Loosely Coupled
Slide 54
Slide 54 text
54
Logicless templates
Ember uses
Handlebars,
a superset of the
Mustache templating
language.
Emphasis on keeping
logic out of the template.
Slide 55
Slide 55 text
Logicless Templates 55
Yep.
Nope. Not even possible.
Slide 56
Slide 56 text
Data-bound Templates 56
All data-bound!
Property paths in Ember Handlebars expressions
are automatically observed and updated upon
change.
Slide 57
Slide 57 text
Uniform Access Principle
“All services available through a
module should be available
through a uniform notation,
which does not betray
whether they are implemented
through storage or computation.”
Bertrand Meyer
57
Slide 58
Slide 58 text
58
Uniform Access Principle in Basic Javascript
Slide 59
Slide 59 text
59
Uniform Access Principle in Basic Javascript
Slide 60
Slide 60 text
60
Uniform Access Principle in Ember.js
Slide 61
Slide 61 text
61
Uniform Access Principle in Ember.js
Slide 62
Slide 62 text
62
Slide 63
Slide 63 text
63
The Ember Router is a state machine
■ State machines are a proven way to reduce
complexity in apps
■ External components send events to a state
machine without knowing what state it is in –
the current state will handle it
■ Similar win as polymorphism – very decoupled
Slide 64
Slide 64 text
64
The Ember Router is a state machine
Template Router
Current
Route
action action
Template Router
Product
Route
logout logout
OrderConfirmation
Route
vs.
Slide 65
Slide 65 text
65
The Ember Router is a
hierarchical state machine
■ Hierarchical state machines allow better
modeling of common event handling
■ Events start at the current route and flow up to
parent routes until a route handles it
■ The router provides a natural hierarchy
Slide 66
Slide 66 text
66
The Ember Router is a
hierarchical state machine
Slide 67
Slide 67 text
67
The Ember Router is a
hierarchical state machine
ApplicationRoute
ProductRoute OrderRoute
ShippingRoute BillingRoute ConfirmationRoute
Slide 68
Slide 68 text
68
The Ember Router is a
hierarchical state machine
ApplicationRoute
ProductRoute OrderRoute
ShippingRoute BillingRoute ConfirmationRoute
ApplicationRoute
OrderRoute
BillingRoute
Slide 69
Slide 69 text
69
Slide 70
Slide 70 text
Ember’s Container & Resolver 70
■ The Container is the crux of Ember’s dependency
injection.
■ Dependency injection is another proven design
pattern for reducing coupling.
■ Instead of an object instantiating its collaborators,
the container “injects” them at creation time.
Slide 71
Slide 71 text
Ember’s Container & Resolver 71
Container
App &
framework
code
lookup(‘controller:post’)
Slide 72
Slide 72 text
Ember’s Container & Resolver 72
Container
App &
framework
code
lookup... Resolver
resolve(‘controller:post’)
The DefaultResolver will convert “controller:post” to
“PostController” and return that from the App global.
The Container instantiates it with any registered injections.
App.PostController
Slide 73
Slide 73 text
Ember’s Container & Resolver 73
Container
App &
framework
code
lookup...
Custom
Resolver
resolve(‘controller:post’)
Substitute a custom Resolver to integrate Ember’s
conventions with your module and file system conventions.
No globals, no requires, no cruft!
requireModule(
‘app/controllers/post’
)
Slide 74
Slide 74 text
Room for Improvement
๏ Ember’s container-ization is
not yet 100% complete
๏ Controllers can become
junk drawers
๏ Persistence libraries are
still evolving
๏ The Ember global is
unavoidable for now
๏ Approaching 1.0, asymptotically 74
Slide 75
Slide 75 text
75
Thanks to awesome Flickr people
http://www.flickr.com/photos/nikonvscanon/3453373352
http://www.flickr.com/photos/yourdon/9215882934
http://www.flickr.com/photos/wallyg/5584045410
http://www.flickr.com/photos/klg19/6227922248
http://www.flickr.com/photos/bestarns/8305879000
http://www.flickr.com/photos/kinerific/7561104998
http://www.flickr.com/photos/curiousexpeditions/2402300942
http://www.flickr.com/photos/wiredphotostream/6303520386
http://www.flickr.com/photos/jmarx/4672943910
http://www.flickr.com/photos/chrisgold/6894624818
http://www.flickr.com/photos/romanschmitz/7245386194
http://www.flickr.com/photos/iandavid/3804456709
http://www.flickr.com/photos/onesevenone/5883546214
http://www.flickr.com/photos/numbphoto/4637718471
http://www.flickr.com/photos/fakeisthenewreal/121258082
http://www.flickr.com/photos/9061377@N05/703903629
http://www.flickr.com/photos/niznoz/4170565734
http://www.flickr.com/photos/en321/434725548
http://www.flickr.com/photos/23912576@N05/3446062013
http://www.flickr.com/photos/wwward0/6790464887
http://www.flickr.com/photos/martyj/2444129560
http://www.flickr.com/photos/rrrrred/4566754249
http://www.flickr.com/photos/nodame88/3038653470
http://www.flickr.com/photos/joiseyshowaa/3191428445
http://www.flickr.com/photos/ktylerconk/1526148499
http://www.flickr.com/photos/niceimages/9057275375
http://www.flickr.com/photos/perspective/7726249646
http://www.flickr.com/photos/onesevenone/6434338833
http://www.flickr.com/photos/instantvantage/5862910811
http://www.flickr.com/photos/vogelium/6209272108
http://www.flickr.com/photos/alanrmiles/3405474639
http://www.flickr.com/photos/onesevenone/4051045279
http://www.flickr.com/photos/digiart2001/3611238793
http://www.flickr.com/photos/posterboynyc/8737852416
http://www.flickr.com/photos/dcreeves2000/114712202
http://www.flickr.com/photos/23912576@N05/2883743786
Slide 76
Slide 76 text
76
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A
Slide 77
Slide 77 text
77
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A
Slide 78
Slide 78 text
78
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A
Slide 79
Slide 79 text
79
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A
Slide 80
Slide 80 text
80
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A
Slide 81
Slide 81 text
81
Follow me @lukemelia
Some examples appear courtesy of my company, Yapp Labs.
We are available for Ember.js-related consulting. Contact [email protected].
Q & A