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. Ember.js: The Architecture Advantage Luke Melia GothamJS July 12th, 2013

  2. About this Javascript Developer 2

  3. Relevant Experience 3 2 Years of Ember under my belt

  4. Relevant Experience 4 6 Consumer-grade Ember.js apps

  5. Relevant Experience 5 44 Commits to Ember.js

  6. Ember.js NYC Meetup 6

  7. “I’m evaluating Javascript MVC frameworks.” 7

  8. 8 Smart developers experiment with technologies before making big choices...

  9. Smart developers experiment with technologies before making big choices... 9

  10. ...and they visit with the community around a project. 10

  11. But it’s hard to know what it’s like to actually

    live with it. 11
  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?
  13. Ember’s approach shines as the size and complexity of an

    app grows. 13 Let’s look at why.
  14. This talk is not an Ember tutorial. 14

  15. This talk is an exploration of the value of good

    architecture in Ember.js... 15
  16. ...with pictures of New York City... 16

  17. ...and no pictures of cats. 17

  18. 18 Unless it’s a Broadway cat!

  19. 19 Or a subway cat.

  20. What are the qualities of a framework that supports app

    evolution well? 20
  21. 21 3

  22. It should be clear where code belongs and where to

    find it. 22
  23. You should have to write and maintain the least amount

    of code necessary. 23
  24. Change in one area of your app should not affect

    other areas. 24
  25. 25 ๏ Well-Organized ๏ Eliminates Boilerplate ๏ Loosely Coupled

  26. 26 ๏ Well-Organized ๏ Eliminates Boilerplate ๏ Loosely Coupled

  27. 27 Clear Delineation of Responsibilities Router Controller Controller View View

    Template Model Model Model Model Template
  28. 28 Clear Delineation of Responsibilities Router Controller Controller View View

    Template Model Model Model Model Template Templates define the HTML to render.
  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.
  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.
  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.
  32. 32 Clear Delineation of Responsibilities Router Controller Controller View View

    Template Model Model Model Model Template Views execute DOM-related logic.
  33. 33 A map helps you know where you are and

    where to find things.
  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.
  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.
  36. Pods of Functionality Ember apps are organized by hanging Controller-Template

    pairs off of each Route, providing clear boundaries and isolation. 36
  37. Go with the Flow Ember apps have a clear flow

    of data and events. 37
  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
  39. Ember Components Web components while we’re waiting for web components.

    39
  40. Truth in Javascript ๏ Not in DOM ๏ Not in

    the URL 40
  41. 41 ๏ Well-Organized ๏ Eliminates Boilerplate ๏ Loosely Coupled

  42. Convention Over Configuration 42

  43. Convention Over Configuration 43 PostController instance

  44. Convention Over Configuration 44

  45. Convention Over Configuration 45

  46. ObjectController 46 All properties not defined on the ObjectController will

    be delegated to the model.
  47. Convention Over Configuration 47 Default behavior

  48. A Sidenote on Embracing Asynchrony 48 the model hook is

    Promise-aware
  49. Convention Over Configuration 49 Default behavior

  50. Convention Over Configuration 50

  51. Active Generation 51

  52. Convention Over Configuration 52

  53. 53 ๏ Well-Organized ๏ Eliminates Boilerplate ๏ Loosely Coupled

  54. 54 Logicless templates Ember uses Handlebars, a superset of the

    Mustache templating language. Emphasis on keeping logic out of the template.
  55. Logicless Templates 55 Yep. Nope. Not even possible.

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

    expressions are automatically observed and updated upon change.
  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
  58. 58 Uniform Access Principle in Basic Javascript

  59. 59 Uniform Access Principle in Basic Javascript

  60. 60 Uniform Access Principle in Ember.js

  61. 61 Uniform Access Principle in Ember.js

  62. 62

  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
  64. 64 The Ember Router is a state machine Template Router

    Current Route action action Template Router Product Route logout logout OrderConfirmation Route vs.
  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
  66. 66 The Ember Router is a hierarchical state machine

  67. 67 The Ember Router is a hierarchical state machine ApplicationRoute

    ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute
  68. 68 The Ember Router is a hierarchical state machine ApplicationRoute

    ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute ApplicationRoute OrderRoute BillingRoute
  69. 69

  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.
  71. Ember’s Container & Resolver 71 Container App & framework code

    lookup(‘controller:post’)
  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
  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’ )
  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
  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
  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
  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
  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
  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
  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
  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