EmberConf 2016 Keynote

Slides from the 2016 EmberConf keynote in Portland, OR.

Transcript

1. EmberConf 2016 The Web Ahead
2. Ember 2.0
3. FastBoot Glimmer
4. Momentum
5. 950+ EmberConf Attendees
6. Zoey
7. Huge Ember CLI Adoption
8. 52M Ember CLI “live reload” events since last EmberConf
9. 4.7M ember serves since last EmberConf
10. 70.8K Chrome extension users
11. 332K ember-cli installs last month
14. Stability without Stagnation
17. Community Survey
18. 1,800+ survey participants 2× last year
19. 76% using Ember 2.x
20. 36% using Ember 1.13
21. Lessons Learned from 1.13
22. RFC 56
23. LTS Release • Upgrade less frequently • Bug fixes for 36 weeks • Security fixes for 60 weeks • Every 4th release is LTS • First LTS is Ember 2.4
25. The Ember Team
26. Subteams
27. Ember Data Core Lead Overall direction, crosscutting concerns Core Team Ember CLI Core Lead Learning Core Lead
28. Ember Data Stanley Stuart Brendan McLoughlin Clemens Müller Igor Terzic Christoffer Persson
29. Ember CLI Katie Gengler Nathan Hammond Chad Hietala Robert Jackson Stefan Penner Kelly Selden Jake Bixby
30. Learning David Baker Ricardo Mendes Leah Silber Todd Jordan
31. New Core Team Members
32. Dan Gebhardt Godfrey Chan
33. Alumni
34. Trek Glowacki
35. Alex Matchneer
36. Peter Wagenet
37. Ember at the Forefront
42. Community Citizens
45. The Web Ahead
46. Mobile Web
47. Apps have become nearly irrelevant on desktops because the web experience is close to perfect, while apps are vitally important on phones because the web experience is dismal. “ Nilay Patel http://www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
48. Web Apps Native Apps • Almost-instant boot • No install step • Shareable • Bookmarkable • Instant second boot • Works offline • Access device features • Fast, animated UI
50. Native App First Boot
51. Google+ Study • 9% of the visits to our interstitial page resulted in the ‘Get App’ button being pressed. (Note that some percentage of these users already have the app installed or may never follow through with the app store download.) • 69% of the visits abandoned our page. These users neither went to the app store nor continued to our mobile website. “
52. Web App First Boot
53. • On the Home Screen • Push Notifications Engagement • Quick boot (once installed) • Works offline Experience ✅Service Worker/Add to Home Screen ✅Service Worker ✅Service Worker/App Cache ✅Service Worker/App Cache/IndexedDB
55. •Web Workers •Service Worker •App Cache •WebGL •IndexedDB •Geolocation •Camera •ArrayBuffer •Animation
56. In my opinion, the data for Angular and Ember (the two options that Atwood mentioned) flat out disqualify them for mobile use. “ Henrik Joreteg https://joreteg.com/blog/viability- of-js-frameworks-on-mobile
58. Functionality Size
59. How do we deliver native-caliber features without giving up “instant?”
60. Load Time FastBoot Service Worker Engines Project Svelte App Cache String Loading
61. FastBoot Service Worker Engines Project Svelte First Boot Second Boot Load Time App Cache String Loading String Loading
62. FastBoot Engines Project Svelte • Render initial HTML on the server • Users see content before JavaScript loads • Mitigates all but largest payload sizes • Reduce framework size by removing deprecated features • Ship Ember as ES6 modules (tree shaking) • Eliminate unused modules • Split up app code into separate bundles • Users only load code for the part of the app they're using
63. • Make application available offline • Precise control over network • Preemptively fetch resources • Never download JavaScript assets after first boot • Update atomically • Available everywhere today • Ship JavaScript modules as strings • Only pay evaluation cost for modules that are actually used Service Worker App Cache String Loading
64. App Cache FastBoot
65. App Cache
68. 90.99% Availability Internet Explorer Edge Firefox Chrome Safari Opera Mobile Safari Android
69. Reliable!
70. FastBoot
72. www.ember-fastboot.com
74. FastBoot 1.0 Ember 2.7
75. Ease of Use is
76. Render Performance
83. import Ember from 'ember'; export default Ember.Component.extend({ didReceiveAttrs() { this.set('upDays', this.computeUpDays()); this.set('streak', this.computeStreak()); }, computeUpDays() { return this.days.reduce((upDays, day) => { return upDays += (day.up ? 1 : 0); }, 0); }, computeStreak() { let [ max ] = this.days.reduce(([ max, streak ], day) => { if (day.up && streak + 1 > max) { return [streak + 1, streak + 1]; } else if (day.up) { return [max, streak + 1]; } else { return [max, 0]; } }, [0, 0]); return max; } }); app/components/server-uptime.js <div class="server-uptime"> <h1>{{name}}</h1> <h2>{{upDays}} Days Up</h2> <h2>Biggest Streak: {{streak}}</h2> <div class="days"> {{#each days key="number" as |day|}} {{uptime-day day=day}} {{/each}} </div> </div> templates/components/server-uptime.js
84. DBMON 2x Speed Boost 101 components UPTIME BOXES 3x Speed Boost 1,099 components to ~ 20 to ~ 40
85. export default class ServerUptime extends Component { didReceiveAttrs() { this.set('upDays', this.computeUpDays()); this.set('streak', this.computeStreak()); }, computeUpDays() { return this.days.reduce((upDays, day) => { return upDays += (day.up ? 1 : 0); }, 0); }, computeStreak() { let [ max ] = this.days.reduce(([ max, streak ], day) => { if (day.up && streak + 1 > max) { return [streak + 1, streak + 1]; } else if (day.up) { return [max, streak + 1]; } else { return [max, 0]; } }, [0, 0]); return max; } }); app/components/server-uptime.js <div class="server-uptime"> <h1>{{@name}}</h1> <h2>{{upDays}} Days Up</h2> <h2>Biggest Streak: {{streak}}</h2> <div class="days"> {{#each @days key="number" as |day|}} <uptime-day day={{day}} /> {{/each}} </div> </div> templates/components/server-uptime.js
87. 60 React Ember 2.4 Ember 2.6 + Glimmer2 Glimmer2 2 FPS bigger is better
88. FPS bigger is better mostly, object model improvements How do we get there? 60 Ember 2.6 + Glimmer2 Glimmer2 2
89. Initial Render?
90. In component-heavy scenarios, CANARY + GLIMMER 2 IS 1.5-2X FASTER THAN 2.4 ALREADY
91. 0.6 React Ember 2.4 Canary + Glimmer2 Bare Glimmer2 RENDER MS per component smaller is better 2
92. 0.6 Canary + Glimmer2 Bare Glimmer2 2 RENDER MS per component smaller is better mostly, object model improvements How do we get there?
93. There are other wins: GLIMMER 2 TEMPLATES ARE 5X SMALLER THAN HTMLBARS
94. • Written in TypeScript • Awesome, powerful, composable primitives • Teaches us how to make core Ember better • Compiles templates to FRP program, runs it on a custom VM • Unlocks adaptive, runtime optimizations • Paves the path to eagerly awaited features 2
96. The Way We Build Web Apps is Changing
97. An SDK for the Web
98. Thank You!