Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EmberConf 2016 Keynote

tomdale
March 29, 2016

EmberConf 2016 Keynote

Slides from the 2016 EmberConf keynote in Portland, OR.

tomdale

March 29, 2016
Tweet

More Decks by tomdale

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. Web Apps Native Apps • Almost-instant boot • No install

    step • Shareable • Bookmarkable • Instant second boot • Works offline • Access device features • Fast, animated UI
  4. 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. “
  5. • 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
  6. 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
  7. FastBoot Service Worker Engines Project Svelte First Boot Second Boot

    Load Time App Cache String Loading String Loading
  8. 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
  9. • 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
  10. 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
  11. DBMON 2x Speed Boost 101 components UPTIME BOXES 3x Speed

    Boost 1,099 components to ~ 20 to ~ 40
  12. 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
  13. FPS bigger is better mostly, object model improvements How do

    we get there? 60 Ember 2.6 + Glimmer2 Glimmer2 2
  14. 0.6 React Ember 2.4 Canary + Glimmer2 Bare Glimmer2 RENDER

    MS per component smaller is better 2
  15. 0.6 Canary + Glimmer2 Bare Glimmer2 2 RENDER MS per

    component smaller is better mostly, object model improvements How do we get there?
  16. • 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