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

EmberConf 2015 Keynote

EmberConf 2015 Keynote

428167a3ec72235ba971162924492609?s=128

Yehuda Katz

March 09, 2015
Tweet

Transcript

  1. None
  2. 625+ ATTENDEES 25 COUNTRIES

  3. Ember is Growing

  4. More EmberConf Attendees

  5. More Ember CLI Users

  6. More Addons

  7. More Apps

  8. None
  9. Heroku Dashboard

  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. More Meetups

  17. None
  18. None
  19. Core Team

  20. None
  21. + @mixonic + @ef4 + @mmun

  22. What's new since EmberConf 2014?

  23. Rapid Release Worked Great!

  24. None
  25. http://getrwjblueabeer.com

  26. New RFC Process

  27. Features

  28. HTMLBars

  29. <a  {{bind-­‐attr  href=url}}>

  30. <a  href={{url}}>

  31. <a  href={{url}}> 1.11 Beta

  32. {{#each  item  in  list}}      {{item.name}}   {{/each}}  

    {{#with  long.title  as  t}}      {{t.name}}   {{/with}}   {{#calendar-­‐month}}      {{!-­‐-­‐  what  day  am  I  rendering?  -­‐-­‐}}   {{/calendar-­‐month}}
  33. {{#each  list  as  |item|}}      {{item.name}}   {{/each}}  

    {{#with  long.title  as  |t|}}      {{t.name}}   {{/with}}   {{#calendar-­‐month  as  |day|}}      <p>{{day.name}}</p><p>{{day.number}}</p>   {{/calendar-­‐month}}
  34. {{!-­‐-­‐  calendar-­‐month.hbs  -­‐-­‐}}   {{#each  days  as  |day|}}    

     {{yield  day}}   {{/each}} 1.10
  35. {{calendar-­‐day}}

  36. <calendar-­‐day>

  37. <calendar-­‐day> Canary

  38. Faster and Lower Memory

  39. Validates Your Templates

  40. <script  type="text/x-­‐placeholder-­‐start">   <script  type="text/x-­‐placeholder-­‐end">

  41. <script  type="text/x-­‐placeholder-­‐start">   <script  type="text/x-­‐placeholder-­‐end"> metamorphs 2011-2014

  42. None
  43. Inspector

  44. None
  45. None
  46. Inspector Improvements • Info • Nav Bar Tomster • Promises

    • Render Performance • Bookmarklet • Multiple <iframe>s • • Redesigned UI • Advanced Container • Array and Date support • Report Deprecations • Test Support
  47. Thanks @teddyzeenny

  48. Ember CLI • Test Support • Massive performance improvements •

    API Stubbing • Server Proxy • Content Security Policy • Transpile the Future w/ • Pod Directory Structure • Dependency Checking • Source Maps • Ember Doctor • http://emberaddons.com
  49. Addons and 663 more (and counting)

  50. What can an addon do? • Supply Configuration • Add

    Generators • Add CLI Commands • Server Middleware • Pre-& Post-Build Processing • Handle Errors • Add Linters to Test Output • And way more!
  51. Thanks Ember CLI Team

  52. Testing Ecosystem

  53. test("Page  contents",  function(assert)  {      assert.expect(2);      visit('/foos').then(function()

     {          assert.equal(find('.foos-­‐list').length,  1,              "Page  contains  list  of  models");          assert.equal(find('.foos-­‐list  .foo-­‐item').length,  5,              "List  contains  expected  number  of  models");      });   });
  54. moduleForComponent('pretty-­‐color');   test('changing  colors',  function(assert){      var  component  =

     this.subject();      component.set('name',  'red');      andThen(function()  {          //  first  call  to  $()  renders  the  component.          assert.equal(this.$().attr('style'),  'color:  red;');          component.set('name',  'green');      });      andThen(function()  {          assert.equal(this.$().attr('style'),  'color:  green;');      });   });
  55. Query Params

  56. JavaScript Modules

  57. Ember Data

  58. Big Rethink

  59. Relationship Syncing

  60. Post Comment Comment Comment post.comments  =  [c1,  c2,  c3] comment.post

     =  post comment.post  =  post comment.post  =  post Loaded All at Once
  61. Post Post Loaded First post.comments  =  []

  62. Post Comment Comment Comment Post Loaded First post.comments  =  []

    comment.post  =  post comment.post  =  post comment.post  =  post
  63. Post Comment Comment Comment Post Loaded First post.comments  =  [c1,

     c2,  c3] comment.post  =  post comment.post  =  post comment.post  =  post
  64. Comment Comment Comments Loaded First comment.post  =  null comment.post  =

     null
  65. Post Comment Comment Comments Loaded First post.comments  =  [c1,  c2]

    comment.post  =  null comment.post  =  null
  66. Post Comment Comment Comments Loaded First post.comments  =  [c1,  c2]

    comment.post  =  post comment.post  =  post
  67. Post Comment Comment Comments Loaded First post.comments  =  [c1,  c2]

    comment.post  =  post comment.post  =  post (and more loaded later)
  68. Post Comment Comment Comment Comments Loaded First post.comments  =  [c1,

     c2] comment.post  =  post comment.post  =  post comment.post  =  post (and more loaded later)
  69. Post Comment Comment Comment Comments Loaded First comment.post  =  post

    comment.post  =  post comment.post  =  post post.comments  =  [c1,  c2,  c3] (and more loaded later)
  70. Async Relationships

  71. Async Relationships built with async loading in mind

  72. Adapter Ecosystem

  73. Thanks @terzicigor

  74. ES6 Early Adopter

  75. ES2015 Early Adopter

  76. ES2016 Early Adopter

  77. What's Next?

  78. Versioned Guides

  79. None
  80. guides.emberjs.com

  81. Next Version: Ember CLI

  82. Engines

  83. List View

  84. <angle-­‐bracket> Components

  85. <angle-­‐bracket> Components Canary

  86. Liquid Fire @ef4

  87. Async & Routable Components @ef4

  88. Ember 2.0 (The Plan is the Feature)

  89. Ember Data

  90. None
  91. Thanks @dgeb / @steveklabnik

  92. Thanks @ChristofferP

  93. JSON API Out of the Box

  94. Pagination & Filtering

  95. None
  96. Shipping It

  97. Ember 2.0

  98. Ember 2.0 June 12

  99. Ember Inspector

  100. Ember Inspector June 12

  101. Ember CLI 1.0

  102. Ember CLI 1.0 June 12

  103. Ember Data 1.0

  104. Ember Data 1.0 June 12

  105. Liquid Fire 1.0

  106. Liquid Fire 1.0 June 12

  107. List View 1.0

  108. List View 1.0 June 12

  109. Are You Getting It?

  110. Ember 2.0

  111. Lockstep SemVer

  112. Pay as You Go

  113. Ember FastBoot

  114. Browser

  115. Browser GET /posts FastBoot

  116. Browser API Server JSON data GET /posts FastBoot

  117. Initial HTML Browser First Page API Server JSON data GET

    /posts FastBoot
  118. Initial HTML Browser First Page JavaScript JS App API Server

    JSON data GET /posts FastBoot
  119. None
  120. Let's Take a Look

  121. One More Thing

  122. Performance

  123. None
  124. None
  125. React Insights

  126. DOM is the Bottleneck

  127. "Just Refresh It"

  128. Virtual DOM

  129. <div  class="item">      {{#if  enabled}}        

     <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div> {  enabled:  true,  name:  "Tom  Dale",      details:  "A  True  Scotsman"  }
  130. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Tom  Dale",      details:  "A  True  Scotsman"  }
  131. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  132. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  133. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  134. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  135. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  136. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  137. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  138. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  139. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  140. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  141. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  }
  142. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } then, apply change
  143. Alternative Approach

  144. <div  class="item">      {{#if  enabled}}        

     <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div> {  enabled:  true,  name:  "Tom  Dale",      details:  "A  True  Scotsman"  }
  145. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  146. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  147. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  148. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  149. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  150. {  enabled:  true,  name:  "Tom  Dale",      details:  "A

     True  Scotsman"  } <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>      <p  class="popover">          A  True  Scotsman      </p>   </div> <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  151. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  152. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  153. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  154. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  155. <div  class="item">    <p>It's  Enabled</p>    <p>Tom  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  156. <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  157. <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  158. <div  class="item">    <p>It's  Enabled</p>    <p>Thomas  Dale</p>    

     <p  class="popover">          A  True  Scotsman      </p>   </div> {  enabled:  true,  name:  "Thomas  Dale",      details:  "A  True  Scotsman"  } <div  class="item">      {{#if  enabled}}          <p>It's  Enabled</p>      {{/if}}      <p>{{name}}</p>      <p  class="popover">{{details}}</p>   </div>
  159. Glimmer

  160. Builds on HTMLBars

  161. Let's Take a Look

  162. Is Ember Fast Yet?

  163. Is Ember Fast Yet? is-ember-fast-yet.firebaseapp.com

  164. None
  165. Landing in 1.13

  166. Compatible With Your Apps!

  167. Your Antidote to Hype Fatigue

  168. Thank You!