Ember.js: The Architecture Advantage

Ember.js: The Architecture Advantage

This talk covers in detail how Ember.js supports the development and maintenance of large, ambitious Javascript apps. Shallow explorations of Ember.js like ToDoMVC or getting started tutorials make it too easy to miss the amazing experience of scaling functionality in an Ember app.

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

July 12, 2013
Tweet

Transcript

  1. 12.

    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?
  2. 13.
  3. 15.

    This talk is an exploration of the value of good

    architecture in Ember.js... 15
  4. 21.
  5. 28.

    28 Clear Delineation of Responsibilities Router Controller Controller View View

    Template Model Model Model Model Template Templates define the HTML to render.
  6. 29.

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

    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.
  8. 31.

    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.
  9. 32.

    32 Clear Delineation of Responsibilities Router Controller Controller View View

    Template Model Model Model Model Template Views execute DOM-related logic.
  10. 33.
  11. 34.

    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.
  12. 35.

    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.
  13. 36.

    Pods of Functionality Ember apps are organized by hanging Controller-Template

    pairs off of each Route, providing clear boundaries and isolation. 36
  14. 38.

    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
  15. 54.

    54 Logicless templates Ember uses Handlebars, a superset of the

    Mustache templating language. Emphasis on keeping logic out of the template.
  16. 56.

    Data-bound Templates 56 All data-bound! Property paths in Ember Handlebars

    expressions are automatically observed and updated upon change.
  17. 57.

    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
  18. 62.

    62

  19. 63.

    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
  20. 64.

    64 The Ember Router is a state machine Template Router

    Current Route action action Template Router Product Route logout logout OrderConfirmation Route vs.
  21. 65.

    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
  22. 67.

    67 The Ember Router is a hierarchical state machine ApplicationRoute

    ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute
  23. 68.

    68 The Ember Router is a hierarchical state machine ApplicationRoute

    ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute ApplicationRoute OrderRoute BillingRoute
  24. 69.

    69

  25. 70.

    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.
  26. 72.

    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
  27. 73.

    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’ )
  28. 74.

    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
  29. 75.

    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
  30. 76.

    76 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A
  31. 77.

    77 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A
  32. 78.

    78 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A
  33. 79.

    79 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A
  34. 80.

    80 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A
  35. 81.

    81 Follow me @lukemelia Some examples appear courtesy of my

    company, Yapp Labs. We are available for Ember.js-related consulting. Contact luke@yapp.us. Q & A