Pro Yearly is on sale from $80 to $50! »

Intro to Ember.js

49612ba6e616ca3c4c668ad35e3e84ce?s=47 Luke Melia
January 22, 2014

Intro to Ember.js

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

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

January 22, 2014
Tweet

Transcript

  1. An Intro to Ember.js Luke Melia Flask NYC Meetup January

    22nd, 2014
  2. About this Embereño !2

  3. ▪ Ember’s approach ▪ Demo ▪ When to use Ember

    !3 Sections of the Talk
  4. Ember’s Approach ▪ Targeting “ambitious apps” ▪ Convention over configuration

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

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

    Template Model Model Model Model Template
  9. 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
  10. Models !10

  11. !11 Router Controller Controller View View Template Model Model Model

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

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

    persist data using XHR !13 Models the simple way: $.ajax plus Ember.Object
  14. !14 Models the simple way: $.ajax plus Ember.Object

  15. ▪ 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
  16. !16 Models the robust way: Ember Data

  17. Controllers !17

  18. !18 Router Controller Controller View View Template Model Model Model

    Model Controllers: Present data for the view layer to render Template
  19. Controllers: Expose bindable properties !19

  20. !20 Router Controller Controller View View Template Model Model Model

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

    the object set as its content property ▪ Destroyer of boilerplate !21
  22. Controllers: Ember.ObjectController !22

  23. The View Layer !23

  24. View Layer: Contain all DOM interaction !24 Router Controller Controller

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

    primitive events (DOM events) into semantic events that affect app state !25
  26. Views: Let Handlebars do the heavy lifting !26

  27. Templates: Bound Expressions !27

  28. Templates: Conditionals !28

  29. Templates: Outlets are placeholders !29

  30. Views: Ways to handle DOM events ▪ Ember-dispatched events ▪

    Handlebars action helper ▪ jQuery !30
  31. Views: Ember-dispatched events !31

  32. Templates: Firing events !32 That will trigger the “selectPost” action

    on the controller, or on the current route
  33. Views: Using jQuery to handle events !33

  34. Router !34

  35. Router: Responsibilities ▪Manages application state ▪Fills outlets with template/view/ controller

    triads ▪Keeps the URL up-to-date as you transition between routes !35
  36. Router: DSL !36

  37. Router: Route classes I !37

  38. Router: Route classes II !38 ▪Lots of hooks to override

    conventional behavior when needed ▪http://emberjs.com/api/classes/ Ember.Route.html
  39. Router: Naming Conventions !39

  40. !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
  41. ▪ QUnit ▪ ember-testing (built in DSL for integration tests)

    ▪ testem (ember-app-kit) ▪ people also use Mocha, Jasmine, others !41 Testing
  42. Demo !42

  43. When to use Ember !43

  44. The client-side continuum !44 Library Framework

  45. 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
  46. Ember.js NYC Meetup !46

  47. 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