EmberConf 2015 Keynote

Transcript

2. 625+ ATTENDEES 25 COUNTRIES
3. Ember is Growing
4. More EmberConf Attendees
5. More Ember CLI Users
6. More Addons
7. More Apps
9. Heroku Dashboard
16. More Meetups
19. Core Team
21. + @mixonic + @ef4 + @mmun
22. What's new since EmberConf 2014?
23. Rapid Release Worked Great!
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
43. Inspector
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
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
91. Thanks @dgeb / @steveklabnik
92. Thanks @ChristofferP
93. JSON API Out of the Box
94. Pagination & Filtering
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
120. Let's Take a Look
121. One More Thing
122. Performance
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
165. Landing in 1.13
166. Compatible With Your Apps!
167. Your Antidote to Hype Fatigue
168. Thank You!