Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember.js: An Antidote To Your Hype Fatigue

Ember.js: An Antidote To Your Hype Fatigue

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

May 07, 2015
Tweet

Transcript

  1. @chancancode  

  2. None
  3. None
  4. None
  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
  9. None
  10. Chapter 2 Create Controversies Kill Your Darlings Professional Thought Leadership

  11. None
  12. None
  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

  25. None
  26. Which of these is not a JavaScript Framework?

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

  35. None
  36. None
  37. None
  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

  45. None
  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

  61. None
  62. None
  63. None
  64. None
  65. None
  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
  73. None
  74. None
  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.
  77. None
  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

  108. None
  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'); }); });
  121. None
  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?

  133. None
  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

  142. None
  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

  149. None
  150. Synergy™

  151. RFCs

  152. RFCs

  153. Does it really work?

  154. None
  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>
  169. None
  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
  172. None
  173. None
  174. None
  175. None
  176. None
  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

  184. None
  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
  189. None
  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
  191. None
  192. None
  193. An Antidote to Your Hype Fatigue

  194. “Isn’t Ember dead?”

  195. @chancancode  