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.

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