$30 off During Our Annual Pro Sale. View Details »

EmberConf 2015 Keynote

EmberConf 2015 Keynote

Yehuda Katz

March 09, 2015
Tweet

More Decks by Yehuda Katz

Other Decks in Technology

Transcript

  1. View Slide

  2. 625+
    ATTENDEES
    25
    COUNTRIES

    View Slide

  3. Ember is Growing

    View Slide

  4. More EmberConf Attendees

    View Slide

  5. More Ember CLI Users

    View Slide

  6. More Addons

    View Slide

  7. More Apps

    View Slide

  8. View Slide

  9. Heroku Dashboard

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. More Meetups

    View Slide

  17. View Slide

  18. View Slide

  19. Core Team

    View Slide

  20. View Slide

  21. + @mixonic + @ef4 + @mmun

    View Slide

  22. What's new since
    EmberConf 2014?

    View Slide

  23. Rapid Release Worked Great!

    View Slide

  24. View Slide


  25. http://getrwjblueabeer.com

    View Slide

  26. New RFC Process

    View Slide

  27. Features

    View Slide

  28. HTMLBars

    View Slide


  29. View Slide


  30. View Slide


  31. 1.11 Beta

    View Slide

  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}}

    View Slide

  33. {{#each  list  as  |item|}}  
       {{item.name}}  
    {{/each}}  
    {{#with  long.title  as  |t|}}  
       {{t.name}}  
    {{/with}}  
    {{#calendar-­‐month  as  |day|}}  
       {{day.name}}{{day.number}}  
    {{/calendar-­‐month}}

    View Slide

  34. {{!-­‐-­‐  calendar-­‐month.hbs  -­‐-­‐}}  
    {{#each  days  as  |day|}}  
       {{yield  day}}  
    {{/each}}
    1.10

    View Slide

  35. {{calendar-­‐day}}

    View Slide


  36. View Slide


  37. Canary

    View Slide

  38. Faster and Lower Memory

    View Slide

  39. Validates Your Templates

    View Slide

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

    View Slide

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

    View Slide

  42. View Slide

  43. Inspector

    View Slide

  44. View Slide

  45. View Slide

  46. Inspector Improvements
    • Info
    • Nav Bar Tomster
    • Promises
    • Render Performance
    • Bookmarklet
    • Multiple s

    • Redesigned UI
    • Advanced Container
    • Array and Date support
    • Report Deprecations
    • Test Support

    View Slide

  47. Thanks @teddyzeenny

    View Slide

  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

    View Slide

  49. Addons
    and 663 more (and counting)

    View Slide

  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!

    View Slide

  51. Thanks Ember CLI Team

    View Slide

  52. Testing Ecosystem

    View Slide

  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");  
       });  
    });

    View Slide

  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;');  
       });  
    });

    View Slide

  55. Query Params

    View Slide

  56. JavaScript Modules

    View Slide

  57. Ember Data

    View Slide

  58. Big Rethink

    View Slide

  59. Relationship Syncing

    View Slide

  60. Post
    Comment Comment Comment
    post.comments  =  [c1,  c2,  c3]
    comment.post  =  post comment.post  =  post comment.post  =  post
    Loaded All at Once

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. Comment Comment
    Comments Loaded First
    comment.post  =  null comment.post  =  null

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  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)

    View Slide

  70. Async Relationships

    View Slide

  71. Async Relationships
    built with async loading in mind

    View Slide

  72. Adapter Ecosystem

    View Slide

  73. Thanks @terzicigor

    View Slide

  74. ES6 Early Adopter

    View Slide

  75. ES2015 Early Adopter

    View Slide

  76. ES2016 Early Adopter

    View Slide

  77. What's Next?

    View Slide

  78. Versioned Guides

    View Slide

  79. View Slide

  80. guides.emberjs.com

    View Slide

  81. Next Version: Ember CLI

    View Slide

  82. Engines

    View Slide

  83. List View

    View Slide

  84. Components

    View Slide

  85. Components
    Canary

    View Slide

  86. Liquid Fire
    @ef4

    View Slide

  87. Async & Routable Components
    @ef4

    View Slide

  88. Ember 2.0
    (The Plan is the Feature)

    View Slide

  89. Ember Data

    View Slide

  90. View Slide

  91. Thanks @dgeb / @steveklabnik

    View Slide

  92. Thanks @ChristofferP

    View Slide

  93. JSON API Out of the Box

    View Slide

  94. Pagination & Filtering

    View Slide

  95. View Slide

  96. Shipping It

    View Slide

  97. Ember 2.0

    View Slide

  98. Ember 2.0
    June 12

    View Slide

  99. Ember Inspector

    View Slide

  100. Ember Inspector
    June 12

    View Slide

  101. Ember CLI 1.0

    View Slide

  102. Ember CLI 1.0
    June 12

    View Slide

  103. Ember Data 1.0

    View Slide

  104. Ember Data 1.0
    June 12

    View Slide

  105. Liquid Fire 1.0

    View Slide

  106. Liquid Fire 1.0
    June 12

    View Slide

  107. List View 1.0

    View Slide

  108. List View 1.0
    June 12

    View Slide

  109. Are You Getting It?

    View Slide

  110. Ember 2.0

    View Slide

  111. Lockstep SemVer

    View Slide

  112. Pay as You Go

    View Slide

  113. Ember FastBoot

    View Slide

  114. Browser

    View Slide

  115. Browser
    GET /posts
    FastBoot

    View Slide

  116. Browser
    API
    Server
    JSON data
    GET /posts
    FastBoot

    View Slide

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

    View Slide

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

    View Slide

  119. View Slide

  120. Let's Take a Look

    View Slide

  121. One More Thing

    View Slide

  122. Performance

    View Slide

  123. View Slide

  124. View Slide

  125. React Insights

    View Slide

  126. DOM is the Bottleneck

    View Slide

  127. "Just Refresh It"

    View Slide

  128. Virtual DOM

    View Slide

  129.  
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  130.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  131.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  132.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  133.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  134.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  135.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  136.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  137.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  138.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  139.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  140.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  141.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  142.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
    then, apply change

    View Slide

  143. Alternative Approach

    View Slide

  144.  
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }

    View Slide

  145. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  146. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  147. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  148. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  149. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  150. {  enabled:  true,  name:  "Tom  Dale",  
       details:  "A  True  Scotsman"  }
     
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  151.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  152.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  153.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  154.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  155.  
     It's  Enabled  
     Tom  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  156.  
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  157.  
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  158.  
     It's  Enabled  
     Thomas  Dale  
         
           A  True  Scotsman  
         

    {  enabled:  true,  name:  "Thomas  Dale",  
       details:  "A  True  Scotsman"  }
     
       {{#if  enabled}}  
           It's  Enabled  
       {{/if}}  
       {{name}}  
       {{details}}  

    View Slide

  159. Glimmer

    View Slide

  160. Builds on HTMLBars

    View Slide

  161. Let's Take a Look

    View Slide

  162. Is Ember Fast Yet?

    View Slide

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

    View Slide

  164. View Slide

  165. Landing in 1.13

    View Slide

  166. Compatible With Your Apps!

    View Slide

  167. Your Antidote to Hype Fatigue

    View Slide

  168. Thank You!

    View Slide