Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Ember.js

Luke Melia
January 22, 2014

Intro to Ember.js

Delivered at Flask-NYC Meetup on January 22nd, 2014

Luke Melia

January 22, 2014
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. Ember’s Approach ▪ Targeting “ambitious apps” ▪ Convention over configuration

    ▪ Boilerplate code ▪ Community-driven,
 paving cowpaths !4
  2. ▪ 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
  3. ▪ 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
  4. ▪ MVC is not created equal ▪ C is for

    Controller, but “controller” has many different meanings. ▪ +R for Router !7 MVC
  5. !8 How the layers relate Router Controller Controller View View

    Template Model Model Model Model Template
  6. 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
  7. !11 Router Controller Controller View View Template Model Model Model

    Model Models: Usually serialized/deserialized to/from API API Client Template
  8. !12 Router Controller Controller View View Template Model Model Model

    Model Models: Should not depend on controllers, views or other app state Template
  9. ▪ Subclass Ember.Object for your model classes ▪ Retrieve and

    persist data using XHR !13 Models the simple way: $.ajax plus Ember.Object
  10. ▪ 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
  11. !18 Router Controller Controller View View Template Model Model Model

    Model Controllers: Present data for the view layer to render Template
  12. !20 Router Controller Controller View View Template Model Model Model

    Model Controllers: Often proxy models Template
  13. Controllers: Ember.ObjectController ▪ Transparently proxies missing properties and methods to

    the object set as its content property ▪ Destroyer of boilerplate !21
  14. View Layer: Contain all DOM interaction !24 Router Controller Controller

    View View Template Model Model Model Model Template
  15. View Classes: Responsibilities ▪ Optional (will be generated) ▪ Translate

    primitive events (DOM events) into semantic events that affect app state !25
  16. Router: Responsibilities ▪Manages application state ▪Fills outlets with template/view/ controller

    triads ▪Keeps the URL up-to-date as you transition between routes !35
  17. Router: Route classes II !38 ▪Lots of hooks to override

    conventional behavior when needed ▪http://emberjs.com/api/classes/ Ember.Route.html
  18. !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
  19. ▪ QUnit ▪ ember-testing (built in DSL for integration tests)

    ▪ testem (ember-app-kit) ▪ people also use Mocha, Jasmine, others !41 Testing
  20. 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
  21. 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