Ember.js: An Antidote To Your Hype Fatigue

Transcript

1. @chancancode  
5. Animated Gifts
6. Programmer to Thought Leader™ Professional Thought Leadership Angelina Fabbro, Sara Chipps, Gabe Scholz, Tom Dale, Horse JS, Allen Pike g g n n o o r r w w ™
7. Chapter 1 Leading By Example Professional Thought Leadership Thought Leadership
8. Chapter 1 Leading By Example Professional Thought Leadership Thought Leaders Ship
10. Chapter 2 Create Controversies Kill Your Darlings Professional Thought Leadership
13. Thought Leadership Is Dead
14. Fatigue
15. Fatigue Fatigue
16. Fatigue Fatigue Fatigue
17. Fatigue Fatigue Fatigue Fatigue
18. Fatigue Fatigue Fatigue Fatigue Fatigue
19. Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue
20. Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue
21. Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue
22. Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue
23. Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue Fatigue
24. JavaScript Frameworks Fatigue
26. Which of these is not a JavaScript Framework?
28. 2015 2014 2013 2012 2011 2010 ? “1.0” Releases R.I.P.
29. 2015 2014 2013 2012 2011 2010 ? Reaching “Critical Mass”
30. Hype
31. THE HYPE CYCLE PLATEAU OF PRODUCTIVITY SLOPE OF ENLIGHTENMENT TROUGH OF DISILLUSIONMENT TECHNOLOGY TRIGGER PEAK OF INFLATED EXPECTATIONS VISIBILITY MATURITY Ember in the Real World by Brandon Hays, Fluent Conf
32. “HYPE” IS NOT AN INSULT, IT’S AN INEVITABILITY PLATEAU OF PRODUCTIVITY SLOPE OF ENLIGHTENMENT TROUGH OF DISILLUSIONMENT TECHNOLOGY TRIGGER PEAK OF INFLATED EXPECTATIONS VISIBILITY MATURITY Ember in the Real World by Brandon Hays, Fluent Conf
33. Hype Fatigue
34. An Antidote to Your Hype Fatigue
38. “Isn’t Ember dead?”
39. Big Bets
40. 1. Ambitious Web Applications 2. Future Standards Foresight 3. Stability Without Stagnation
41. 1. Ambitious Web Applications
42. Widgets
43. MVC
44. Full-fledged Applications
46. Solving the Hard Problems™
47. MVC
48. [ MVC ]s
49. [ MVC ]s + Router
50. [ MVC ]s + Router + Data Store
51. [ [ MVC ]s + Router + Data Store ] + Testing
52. [ [ MVC ]s + Router + Data Store ] + Testing + Build Tools
53. [ [ MVC ]s + Router + Data Store ] + Testing + Build Tools + Deployment
54. [ [ [ MVC ]s + Router + Data Store ] + Testing + Build Tools + Deployment ] + Ecosystem
55. Solving the Hard Problems™ Real World
56. Solving the Hard Problems™ Real World Boring
57. “Ember is dead.”
58. “Apple has stopped innovating.”
59. Innovations
60. Ember Inspector
66. Ember Data
67. Models // app/models/post.js export default DS.Model.extend({ title: DS.attr(“string”), body: DS.attr(“string”), published: DS.attr(“date”), });
68. Relationships // app/models/post.js export default DS.Model.extend({ title: DS.attr(“string”), body: DS.attr(“string”), published: DS.attr(“date”), author: DS.belongsTo(“user”), comments: DS.hasMany(“comment”), });
69. store.find(“post”); store.find(“post”, {q: “Rails”}); store.find(“post”, 1); store.filter(“post”, function(post) { ... }); store.createRecord(“post”, { title: “Rails is Omakase”, body: “...” }); Identity Store
70. Data Sources
71. JSON API
72. // app/adapters/application.js export default DS.RestAdapter.extend({ host: “https://...” }); // app/adapters/user.js export default FirebaseAdapter.extend({ firebase: “https://...” }); Data Sources
75. Ember CLI
76. % ember new test-app version: 0.2.3 installing create .bowerrc create .editorconfig create .ember-cli create .jshintrc create .travis.yml create Brocfile.js create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html ... Installed packages for tooling via npm. Installed browser packages via Bower. Successfully initialized git.
78. % ember serve version: 0.2.3 Livereload server on port 35729 Serving on http://localhost:4200/ Build successful - 3774ms. Slowest Trees | Total ----------------------------------------------+--------------------- Concat: Vendor | 3005ms Slowest Trees (cumulative) | Total (avg) ----------------------------------------------+--------------------- Concat: Vendor (1) | 3005ms Babel (2) | 231ms (115 ms)
79. Generators
80. % ember generate resource post version: 0.2.3 installing create app/models/post.js installing create tests/unit/models/post-test.js installing create app/routes/post.js create app/templates/post.hbs installing create tests/unit/routes/post-test.js
81. Conventions
82. Assets Pipeline
83. Modules
84. JSHint, Babel, etc
85. Build Tools
86. Testing
87. Unit Testing
88. Acceptance Testing
89. Browser Testing
90. Browser Testing Test Harness™
91. % ember generate resource post version: 0.2.3 installing create app/models/post.js installing create tests/unit/models/post-test.js installing create app/routes/post.js create app/templates/post.hbs installing create tests/unit/routes/post-test.js
92. moduleForModel('post'); test('slug', function(assert) { var post = this.subject({ title: 'Rails is omakase' }); assert.equal(post.get('slug'), 'rails-is-omakase'); });
93. moduleForComponent('delete-button'); test('delete confirmation', function(assert) { var component = this.subject({ text: 'Delete post' }); component.$().click(); assert.equal(component.$().text(), 'Are you sure?'); });
94. module('Acceptance: check out', { ... }); test('Express checkout', function(assert) { visit('/products/agile-web-development-with-rails'); click('#express-checkout'); fillIn('#login .username', 'godfrey'); fillIn('#login .secret', 'secret'); click('#login .submit'); andThen(function() { var confirmation = find('#notice h3').text(); assert.equal(confirmation, 'Thank you for your order'); }); });
95. % ember test version: 0.2.3 Built project successfully. ok 1 PhantomJS 1.9 - JSHint - .: app.js should pass jshint ok 2 PhantomJS 1.9 - JSHint - helpers: helpers/resolver.js should pass jshint ... ok 11 PhantomJS 1.9 - route:post: it exists 1..11 # tests 11 # pass 11 # fail 0 # ok
96. % ember test --server
97. Ember Addons
98. Coffee Script ember install ember-cli-coffeescript
99. Sass ember install ember-cli-sass
100. Mocha ember install ember-cli-mocha
101. Code Coverage ember install ember-cli-blanket
102. Sauce Labs ember install ember-cli-sauce
103. Firebase ember install emberfire
104. Authentication ember install ember-cli-simple-auth
105. Animations ember install liquid-fire
106. Deployment ember install ember-cli-deploy
107. Canadian Stylesheets ember install ember-cli-canadian-stylesheets
109. ~ 1000 addons (and counting)
110. Big Bets
111. 1. Ambitious Web Applications 2. Future Standards Foresight 3. Stability Without Stagnation
112. 2. Future Standards Foresight
113. Programmer to Thought Leader™ JavaScript Thought Leadership Yehuda Katz g g n n o o r r w w ™
114. Promises
115. Routes // app/routes/post.js export default Ember.Route.extend({ model: function(params) { return $.ajax(“/posts/” + params.post_id); } });
116. Ember Data store.find(“post”, 1).then(function(post) { ... });
117. Synergy™ // app/routes/post.js export default Ember.Route.extend({ model: function(params) { return this.store.find(“post”, params.post_id); } });
118. Synergy™ // app/routes/post.js export default Ember.Route.extend({ });
119. Testing module('Acceptance: check out', { ... }); test('Express checkout', function(assert) { visit('/products/agile-web-development-with-rails') .then(function() { click('#express-checkout'); }) .then(function() { fillIn('#login .username', 'godfrey'); fillIn('#login .secret', 'secret'); }) .then(function() { click('#login .submit'); }) .then(function() { var confirmation = find('#notice h3').text(); assert.equal(confirmation, 'Thank you for your order'); }); });
120. Synergy™ module('Acceptance: check out', { ... }); test('Express checkout', function(assert) { visit('/products/agile-web-development-with-rails'); click('#express-checkout'); fillIn('#login .username', 'godfrey'); fillIn('#login .secret', 'secret'); click('#login .submit'); andThen(function() { var confirmation = find('#notice h3').text(); assert.equal(confirmation, 'Thank you for your order'); }); });
122. Web Components
123. Custom Elements
124. A directive that is restricted to element names with an isolated scope that uses transclusion.
125. Ember Components
126. <my-button ... > ... </my-button>
127. {{#my-button ...}} ... {{/my-button}}
128. ...for now.
129. ES 6+
130. ES6 Modules // app/models/post.js import DS from “ember-data”; export default DS.Model.extend({ title: DS.attr(“string”), body: DS.attr(“string”), published: DS.attr(“date”), }); // test/unit/models/post-test.js import Post from 'test-app/models/post'; // ...
131. ES6 Syntax // app/routes/post.js export default Ember.Route.extend({ model(params) { return $.ajax(`/posts/${ params.post_id) }`); } });
132. ES6 Classes?
134. The Future Is Now™
135. ember install ember-cli-computed-decorators
136. // app/models/user.js import DS from 'ember-data'; import computed from 'ember-computed-decorators'; export default DS.Model.extend({ firstName: DS.attr(“string”), lastName: DS.attr(“string”), @computed(“firstName”, “lastName”) fullName(firstName, lastName) { return `${ firstName } ${ lastName }`; } });
137. // app/models/user.js import DS from 'ember-data'; import computed from 'ember-computed-decorators'; export default DS.Model.extend({ firstName: DS.attr(“string”), lastName: DS.attr(“string”), @computed(“firstName”, “lastName”) fullName(firstName, lastName) { return `${ firstName } ${ lastName }`; } });
138. Synergy™
139. Big Bets
140. 1. Ambitious Web Applications 2. Future Standards Foresight 3. Stability Without Stagnation
141. 3. Stability Without Stagnation
143. Release Channels
144. Release Beta Canary
145. May 1.11 1.12 Beta 3 Apr Mar Feb Jan Dec Nov Oct Sep Aug 1.10 1.12 Beta 2 1.12 Beta 1 1.11 Beta 5 1.11 Beta 4 1.11 Beta 3 Canary Beta Release 1.11 Beta 2 1.11 Beta 1 1.10 Beta 4 1.10 Beta 3 1.10 Beta 2 1.10 Beta 1 1.9 1.9 Beta 4 1.9 Beta 3 1.9 Beta 1 1.8 1.8 Beta 5 1.8 Beta 4 1.8 Beta 3 1.8 Beta 2 1.8 Beta 1 1.7 1.7 Beta 5 1.7 Beta 4 Bound Attributes HTML Bars Glimmer Block Params Injected Properties New CP Syntax {{component}} Streams Handlebars 2.0 Metamorph 2015
146. May 1.11 1.12 Beta 3 Apr Mar Feb Jan Dec Nov Oct Sep Aug 1.10 1.12 Beta 2 1.12 Beta 1 1.11 Beta 5 1.11 Beta 4 1.11 Beta 3 Canary Beta Release 1.11 Beta 2 1.11 Beta 1 1.10 Beta 4 1.10 Beta 3 1.10 Beta 2 1.10 Beta 1 1.9 1.9 Beta 4 1.9 Beta 3 1.9 Beta 1 1.8 1.8 Beta 5 1.8 Beta 4 1.8 Beta 3 1.8 Beta 2 1.8 Beta 1 1.7 1.7 Beta 5 1.7 Beta 4 Bound Attributes HTML Bars Glimmer Block Params Injected Properties New CP Syntax {{component}} Streams Handlebars 2.0 Metamorph 2015
147. Semantic Versioning
148. Deprecations
150. Synergy™
151. RFCs
152. RFCs
153. Does it really work?
155. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes
156. HTMLBars Ember 1.10
157. Before
158. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div {{bind-attr class=":post post.isFeatured:featured"}}> {{markdownToHTML post.body}} </div>
159. After
160. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div {{bind-attr class=":post post.isFeatured:featured"}}> {{markdownToHTML post.body}} </div>
161. Bound Attributes Ember 1.11
162. Before
163. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div {{bind-attr class=":post post.isFeatured:featured"}}> {{markdownToHTML post.body}} </div>
164. After
165. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div {{bind-attr class=":post post.isFeatured:featured"}}> {{markdownToHTML post.body}} </div>
166. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div {{bind-attr class=":post post.isFeatured:featured"}}> {{markdownToHTML post.body}} </div>
167. Improved
168. // app/templates/post.hbs <h1>{{ post.title }}</h1> <div class="post {{if post.isFeatured 'featured'}}"> {{markdownToHTML post.body}} </div>
170. Reactive Programming
171. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes
177. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes 1.12 ??? 1.13? Glimmer
178. Fast Boot™
179. One-way Binding By Default
180. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes 1.12 ??? 1.13? Glimmer, One-way binding
181. Components Everywhere
182. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes 1.12 ??? 1.13? Glimmer, One-way binding, Routable components, <... />, ...
183. Ember 2.0
185. Notable Features Shipped During 1.x 1.2 Router loading/error substates 1.3 Router auto location 1.6 ES6-ify Ember internals 1.7 Query params, nestable routes 1.8 Remove metamorph <script> tags 1.9 Handlebars 2.0, Streams 1.10 HTMLBars, {{else if}}, block params 1.11 Bound attributes 1.12 ??? 1.13? Glimmer, One-way binding, Routable components, <... />, ...
186. Notable Features Shipped With 2.0 < This slide is intentionally left blank >
187. Big Bets
188. 1. Ambitious Web Applications 2. Future Standards Foresight 3. Stability Without Stagnation
190. THE HYPE CYCLE PLATEAU OF PRODUCTIVITY SLOPE OF ENLIGHTENMENT TROUGH OF DISILLUSIONMENT TECHNOLOGY TRIGGER PEAK OF INFLATED EXPECTATIONS VISIBILITY MATURITY Ember in the Real World by Brandon Hays, Fluent Conf
193. An Antidote to Your Hype Fatigue
194. “Isn’t Ember dead?”
195. @chancancode  