Slide 1
Slide 1 text
An Intro to
Ember.js
Luke Melia
Flask NYC Meetup
January 22nd, 2014
Slide 2
Slide 2 text
About this Embereño
!2
Slide 3
Slide 3 text
■ Ember’s approach
■ Demo
■ When to use Ember
!3
Sections of the Talk
Slide 4
Slide 4 text
Ember’s Approach
■ Targeting “ambitious apps”
■ Convention over configuration
■ Boilerplate code
■ Community-driven,
paving cowpaths
!4
Slide 5
Slide 5 text
■ Forked off Sproutcore in 2011 by Yehuda
Katz, Tom Dale and others
■ Now a 9-person core team including
NYCers Stefan Penner & Alex Matchneer
■ Reached 1.0 release status on
August 31, 2013
■ Currently at 1.3.1
!5
Quick History
Slide 6
Slide 6 text
■ Robust object model (mixins, class-based
inheritance)
■ Key-value observer system to support
declarative data-binding
■ Dependency injection container
■ More: run loop, events, promises,
data-bound templates using Handlebars…
!6
Core building blocks
Slide 7
Slide 7 text
■ MVC is not created equal
■ C is for Controller, but “controller”
has many different meanings.
■ +R for Router
!7
MVC
Slide 8
Slide 8 text
!8
How the layers relate
Router Controller Controller
View View
Template
Model Model Model Model
Template
Slide 9
Slide 9 text
View View
Template
!9
Overall app data flow
Router Controller Controller
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
Slide 10
Slide 10 text
Models
!10
Slide 11
Slide 11 text
!11
Router Controller Controller
View View
Template
Model Model Model Model
Models:
Usually serialized/deserialized
to/from API
API Client
Template
Slide 12
Slide 12 text
!12
Router Controller Controller
View View
Template
Model Model Model Model
Models:
Should not depend on controllers,
views or other app state
Template
Slide 13
Slide 13 text
■ Subclass Ember.Object for your
model classes
■ Retrieve and persist data using XHR
!13
Models the simple way:
$.ajax plus Ember.Object
Slide 14
Slide 14 text
!14
Models the simple way:
$.ajax plus Ember.Object
Slide 15
Slide 15 text
■ Data library under development by the
Ember core team and community (an
“ORM” for the browser?)
■ Store + Adapter + Serializer
■ DS.Store implements an Identity Map
■ Currently 1.0 beta; API is much less stable
than Ember core
!15
Models the robust way:
Ember Data
Slide 16
Slide 16 text
!16
Models the robust way:
Ember Data
Slide 17
Slide 17 text
Controllers
!17
Slide 18
Slide 18 text
!18
Router Controller Controller
View View
Template
Model Model Model Model
Controllers:
Present data for
the view layer to render
Template
Slide 19
Slide 19 text
Controllers:
Expose bindable properties
!19
Slide 20
Slide 20 text
!20
Router Controller Controller
View View
Template
Model Model Model Model
Controllers:
Often proxy models
Template
Slide 21
Slide 21 text
Controllers:
Ember.ObjectController
■ Transparently proxies missing
properties and methods to the
object set as its content property
■ Destroyer of boilerplate
!21
Slide 22
Slide 22 text
Controllers:
Ember.ObjectController
!22
Slide 23
Slide 23 text
The View Layer
!23
Slide 24
Slide 24 text
View Layer:
Contain all DOM interaction
!24
Router Controller Controller
View View
Template
Model Model Model Model
Template
Slide 25
Slide 25 text
View Classes:
Responsibilities
■ Optional (will be generated)
■ Translate primitive events
(DOM events) into semantic
events that affect app state
!25
Slide 26
Slide 26 text
Views:
Let Handlebars do
the heavy lifting !26
Slide 27
Slide 27 text
Templates:
Bound Expressions !27
Slide 28
Slide 28 text
Templates:
Conditionals !28
Slide 29
Slide 29 text
Templates:
Outlets are placeholders !29
Slide 30
Slide 30 text
Views:
Ways to handle DOM events
■ Ember-dispatched events
■ Handlebars action helper
■ jQuery
!30
Slide 31
Slide 31 text
Views:
Ember-dispatched events
!31
Slide 32
Slide 32 text
Templates:
Firing events !32
That will trigger the
“selectPost” action on the controller,
or on the current route
Slide 33
Slide 33 text
Views:
Using jQuery to handle events
!33
Slide 34
Slide 34 text
Router
!34
Slide 35
Slide 35 text
Router:
Responsibilities
■Manages application state
■Fills outlets with template/view/
controller triads
■Keeps the URL up-to-date as
you transition between routes
!35
Slide 36
Slide 36 text
Router:
DSL
!36
Slide 37
Slide 37 text
Router:
Route classes I
!37
Slide 38
Slide 38 text
Router:
Route classes II
!38
■Lots of hooks to override
conventional behavior when
needed
■http://emberjs.com/api/classes/
Ember.Route.html
Slide 39
Slide 39 text
Router:
Naming Conventions
!39
Slide 40
Slide 40 text
!40
Overall app data flow, reprise
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
Slide 41
Slide 41 text
■ QUnit
■ ember-testing (built in DSL for
integration tests)
■ testem (ember-app-kit)
■ people also use Mocha, Jasmine, others
!41
Testing
Slide 42
Slide 42 text
Demo
!42
Slide 43
Slide 43 text
When to use Ember
!43
Slide 44
Slide 44 text
The client-side continuum
!44
Library Framework
Slide 45
Slide 45 text
When should you use Ember?
■ You’re making a non-trivial app
■ You want your app to grow and
remain maintainable
■ Scale to team-based development
■ You want to enjoy the journey!
!45
Slide 46
Slide 46 text
Ember.js
NYC Meetup
!46
Slide 47
Slide 47 text
Q & A
!
!
!
!
Follow me @lukemelia
Some examples appear courtesy of my company. Yapp Labs
offers Ember.js consulting and training.
Creative Commons photo credits: flickr.com/photos/fictures/4596895
!47