Understanding Ember.js (SXSW)

Presented at SXSW 2015.

Ember.js is being rapidly adopted by companies large and small, from Vine (Twitter) & Yahoo, to startups left and right. This talk will explain why, and teach you about how Ember works.

I'll explore Ember's core concepts, and the design decisions behind them. An emphasis will be placed on proper flow of data and events through an Ember app, the division of responsibilities within the layers of an Ember app, and more.

Transcript

1. Understanding Ember.js Luke Melia, Yapp & Yapp Labs SXSW, March 13th, 2015 1
2. About this Nerd 2
3. Product + Ember Consulting 3 TODO: Half page Yapp,
 half page Yapp Labs Ember.js Consulting & Training
4. My experience with Ember Very early adopter Contributor to Ember.js codebase and ecosystem Develop and maintain commercial Ember.js apps Consultant to a few dozen Ember- using companies, both startups and enterprises. Give talks on Ember, including last week at EmberConf 2015 4
5. Organizer of Ember.js NYC Live streamed monthly at
 http://live.ember.nyc 5
6. What to expect
 from this session Starting high-level, moving to low- level. Pace and emphasis depends on who is in the room. Plus Q & A 6
7. How we deliver software has evolved… 7
8. How we deliver software has evolved… 8
9. How we deliver software has evolved… 9
10. How we deliver software has evolved… 10
11. How we deliver software has evolved… 11
12. How we deliver software has evolved… 12
13. …then came our beloved Internet… 13
14. …and the browser, which became the most ubiquitous app runtime in the world. 14
15. How we deliver via the web has evolved… 15 Static HTML sent from server to browser
16. How we deliver via the web has evolved… 16 Dynamic HTML sent from server to browser
17. How we deliver via the web has evolved… 17 Apps running on the server,
 sending HTML representations to browser
18. How we deliver via the web has evolved… 18 Server sends JS to the the browser,
 where the app is run, and interacts with a an API on the server
19. “The future is already here — it’s just not very evenly distributed” - William Gibson Many in tech haven’t yet arrived at the browser app paradigm. But for those of us who have, building apps the “old” way already feels antiquated. 19
20. If it quacks like a duck… Single Page Apps Rich Client Apps Browser Apps All synonymous 20
21. Let’s look at some Ember apps (Quick demos of Beatport, Vine, Twitch, Bustle, & Zendesk) 21
22. Similar to Native Mobile Apps Native apps have a similar paradigm of client app code talking to an API Differences in “install” and “update” processes. Walled gardens vs. open web. 22
23. We have been moving in this direction with Javascript in web tech for a while. In many of our early attempts, our Javascript code collapsed under its own weight. 23
24. The Need We desperately needed collective wisdom and best practices that we didn’t yet have. 24
25. The Need We needed it in the form of code that could help us structure and build these experiences in an approachable and maintainable way. 25
26. The Need There were lots of developers around the world solving the same problems at the same time. 26
27. The Need And as has become custom, we tried to share what we learned with each other in the form of code, open source code. 27
28. The Need There were no obstacles to doing this on the open web, no gatekeepers to check progress. 28
29. Lots of innovation in this space:
 a mind-boggling number of frameworks. 29
30. 30 by The big three (today)
31. Goliath tech companies slug it out
 in market after market. 31 by
32. But this space is different. 32
33. Ember is the opposite, it is decentralized. 33 14 core team members from 11 different companies, large and small Competitive spirit, but no corporate agenda All work happens in the open
34. Driven by a belief that our apps are not unique snowflakes. 34
35. Driven by the belief that we can build great apps faster by aggressively commoditizing solutions to our shared problems. 35
36. Driven by a wish to “end the bikeshedding…” 36
37. Ember is driven by a belief that building web apps can be a joy, and that we should not settle for less. 37
38. Who is using Ember? 38 Many more… See also: http://builtwithember.io
39. 39 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?
40. Ember’s approach shines as the size and complexity of an app grows. 40 Let’s look at why.
41. It should be clear where code belongs and where to find it. 41
42. You should have to write and maintain the least amount of code necessary. 42
43. Change in one area of your app should not affect other areas. 43
44. Clear Delineation of Responsibilities 44 Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes
45. Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes Router 45 The Router transitions between a collection of routes, each representing a high-level application state.
46. Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes 46 Routes Each Route selects an appropriate model for its state, and handles high-level events appropriately.
47. Router Controller Component Controller Component Component Component C C C C C C C C C C C C Template Template Routes Models 47 Model Model Model Model Models encapsulate the data and
 relationships in your problem domain.
48. Router Component Model Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes Models 48 Controllers present data to a template for rendering, by providing access to models and by managing local transient state. Controller Controller
49. Templates 49 Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes Templates define the HTML to render via databinding and components.
50. Components 50 Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes Components render a UI consisting of data-bound HTML and event handlers. They are composable.
51. Inside Components 51 Component
52. Inside Ember Components 52 Javascript Template The Template is declarative way to describe
 the HTML to be output, including bound data.
 The Javascript portion lets you handle DOM events, lifecycle management, and more.
53. Ember’s Nested Routes and URLs 53
54. github.com/emberjs/ember.js 54
55. github.com/emberjs/ember.js/issues 55
56. github.com/emberjs/ember.js/issues?q=closed 56
57. github.com/emberjs/ember.js 57
58. github.com/emberjs/ember.js/issues 58
59. github.com/emberjs/ember.js/issues?q=closed 59
60. github.com/emberjs/ember.js 60 {{outlet}}
61. github.com/emberjs/ember.js/issues 61 {{outlet}}
62. github.com/emberjs/ember.js/issues?q=closed 62
63. 63 A map helps you know where you are and where to find things.
64. The router DSL is a map of your app 64 PostRoute will load the Post model into the PostController and render the ‘post’ template
 into the main outlet.
65. The router DSL is a map of your app 65 CommentsRoute will set up the CommentsController and render the ‘comments’ template into the main outlet of the ‘post’ template.
66. Pods of Functionality Ember apps are organized by hanging Controller- Template pairs off of each Route, providing clear boundaries and isolation. 66
67. Go with
    the Flow
    Ember apps have a clear flow of data and events. 67
68. Router Controller Component Model Controller Component Component Component C C C C C C C C C C C C Model Model Model Template Template Routes A clear information flow: data down, actions up 68 Data flows down from models via bindings Actions flow up from view layer to the router Router updates models & controllers based on events
69. Clean, declarative templates Ember uses Handlebars,
 a superset of the Mustache templating language.
 
 Emphasis on keeping templates “clean.” 69
70. Clean, declarative templates 70 Yep. Nope. Not even possible.
71. Data-bound Templates 71 All data-bound! Property paths in Ember Handlebars expressions are automatically observed and updated upon change.
72. Emphasis on declarative interfaces (supports backward-compatible performance improvements) 72 metal-views htmlbars
73. Ember’s Object Model, Observables, and Computed Properties 73
74. Ember’s Object Model, Observables, CPs 74
75. Ember’s Object Model, Observables, CPs 75
76. Ember’s Object Model, Observables, CPs 76
77. Ember’s Object Model, Observables, CPs 77
78. Ember’s Object Model, Observables, CPs 78
79. Ember’s Object Model, Observables, CPs 79
80. Ember’s Object Model, Observables, CPs 80
81. Ember’s Object Model, Observables, and Computed Properties 81 Wins: write more declarative code Leverage decades of OO code reuse experience Consistent APIs throughout Ember
82. Ember Data 82 make it easier to read and write to JSON REST APIs supports working with relationships between models 1.0 scheduled for June 12th
83. Embracing Web Standards, and Pushing the Web Forward The Ember community is a leading force in vetting and influencing emerging web standards. This includes Promises, ES6 Modules, and soon, annotations. Core team member Yehuda Katz served on the TC-39 standards body and maintains close relationships there. ember-cli apps ship with ember-cli-babel, which transpiles ES6 features to ES5-safe code. 83
84. Testing 84 Excellent tooling for acceptance tests Decent support for unit tests Mature adapters for QUnit (default) and Mocha
85. Testing Code Example 85
86. Liquid Fire 86 Animation library for Ember Very clean separation of concerns Demo! (An abbreviated version of this)
87. Liquid Fire 87
88. ember-cli: Amazing development experience 88 Generators &
 project scaffolding ES6 Module-based workflow Broccoli-based build
 with fast incremental builds Production packaging LiveReload
89. ember-cli: Amazing development experience 89 Development server with express.js, fast rebuilds, mocks & proxy capabilities Robust addon API
90. Addon Ecosystem 90 725 addons and counting!
91. 6-week release cycle, semantic versioning 91
92. Ember
 Inspector 92
93. Open Source License: MIT License 93 Very open, commercial-friendly OSS license “Do whatever you like with it”
94. Downsides: Summary SEO Time to initial render Rerender performance 94
95. Downsides: Solution on the Horizon Fastboot! Renders initial HTML on a Node.js server by running Ember app in Node-land Precedence in other frameworks Currently under development 95
96. Downsides: Solution on the Horizon Glimmer! Diffs dynamic nodes for very fast, update- only-what-is-necessary re-renders In development 96
97. 97 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
98. Creative Commons photo credits: https://www.flickr.com/photos/appraisaliq/5641906164, https://www.flickr.com/photos/pfsullivan_1056/6009151814, https://www.flickr.com/ photos/avaragado/6960433672, https://www.flickr.com/photos/clunkyrobot/82060751, https://www.flickr.com/photos/dhaun/14064199636, https://www.flickr.com/photos/ dehub/2570417338, https://www.flickr.com/photos/joestump/5193676861, https://www.flickr.com/photos/splorp/8544662113, https://www.flickr.com/photos/reutc/2459061463, https://www.flickr.com/photos/cristiano_betta/2909483129, https://www.flickr.com/photos/jasonunbound/240727795, https://www.flickr.com/photos/ armydre2008/5899177632, https://www.flickr.com/photos/chaoticmind75/5529114126, https://www.flickr.com/photos/15609463@N03/15004281025, https://www.flickr.com/ photos/simonsmithster/3418650838, https://www.flickr.com/photos/thomashawk/9974469983, https://www.flickr.com/photos/bestarns/8305879000, https://www.flickr.com/ photos/kinerific/7561104998, https://www.flickr.com/photos/fakeisthenewreal/121258082, https://www.flickr.com/photos/9061377@N05/703903629, https://www.flickr.com/ photos/niznoz/4170565734 98 Thank you! @lukemelia @yapplabs @embernyc