EmberConf 2015 Keynote

EmberConf 2015 Keynote

428167a3ec72235ba971162924492609?s=128

Yehuda Katz

March 09, 2015
Tweet

Transcript

  1. 1.
  2. 8.
  3. 10.
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 15.
  9. 17.
  10. 18.
  11. 19.
  12. 20.
  13. 24.
  14. 27.
  15. 28.
  16. 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}}
  17. 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}}
  18. 42.
  19. 43.
  20. 44.
  21. 45.
  22. 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
  23. 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
  24. 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!
  25. 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");      });   });
  26. 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;');      });   });
  27. 60.

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

     =  post comment.post  =  post comment.post  =  post Loaded All at Once
  28. 62.

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

    comment.post  =  post comment.post  =  post comment.post  =  post
  29. 63.

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

     c2,  c3] comment.post  =  post comment.post  =  post comment.post  =  post
  30. 65.

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

    comment.post  =  null comment.post  =  null
  31. 66.

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

    comment.post  =  post comment.post  =  post
  32. 67.

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

    comment.post  =  post comment.post  =  post (and more loaded later)
  33. 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)
  34. 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)
  35. 79.
  36. 82.
  37. 83.
  38. 90.
  39. 95.
  40. 97.
  41. 110.
  42. 114.
  43. 119.
  44. 123.
  45. 124.
  46. 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"  }
  47. 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"  }
  48. 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"  }
  49. 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"  }
  50. 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"  }
  51. 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"  }
  52. 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"  }
  53. 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"  }
  54. 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"  }
  55. 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"  }
  56. 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"  }
  57. 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"  }
  58. 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"  }
  59. 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
  60. 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"  }
  61. 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>
  62. 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>
  63. 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>
  64. 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>
  65. 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>
  66. 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>
  67. 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>
  68. 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>
  69. 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>
  70. 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>
  71. 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>
  72. 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>
  73. 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>
  74. 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>
  75. 159.
  76. 164.
  77. 168.