EmberConf 2016 Keynote

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=47 tomdale
March 29, 2016

EmberConf 2016 Keynote

Slides from the 2016 EmberConf keynote in Portland, OR.

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=128

tomdale

March 29, 2016
Tweet

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

  12. None
  13. None
  14. Stability without Stagnation

  15. None
  16. None
  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
  24. None
  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

  38. None
  39. None
  40. None
  41. None
  42. Community Citizens

  43. None
  44. None
  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
  49. None
  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
  54. None
  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
  57. None
  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

  66. None
  67. None
  68. 90.99% Availability Internet Explorer Edge Firefox Chrome Safari Opera Mobile

    Safari Android
  69. Reliable!

  70. FastBoot

  71. None
  72. www.ember-fastboot.com

  73. None
  74. FastBoot 1.0 Ember 2.7

  75. Ease of Use is

  76. Render Performance

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  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
  86. None
  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
  95. None
  96. The Way We Build Web Apps is Changing

  97. An SDK for the Web

  98. Thank You!