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. EmberConf 2016
    The Web Ahead

    View full-size slide

  2. FastBoot
    Glimmer

    View full-size slide

  3. 950+
    EmberConf Attendees

    View full-size slide

  4. Huge Ember CLI Adoption

    View full-size slide

  5. 52M
    Ember CLI “live reload” events
    since last EmberConf

    View full-size slide

  6. 4.7M
    ember serves
    since last EmberConf

    View full-size slide

  7. 70.8K
    Chrome extension users

    View full-size slide

  8. 332K
    ember-cli installs last month

    View full-size slide

  9. Stability without Stagnation

    View full-size slide

  10. Community Survey

    View full-size slide

  11. 1,800+
    survey participants
    2× last year

    View full-size slide

  12. 76%
    using Ember 2.x

    View full-size slide

  13. 36%
    using Ember 1.13

    View full-size slide

  14. Lessons Learned from 1.13

    View full-size slide

  15. 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

    View full-size slide

  16. The Ember Team

    View full-size slide

  17. Ember
    Data
    Core
    Lead
    Overall direction, crosscutting concerns
    Core Team
    Ember
    CLI
    Core
    Lead
    Learning
    Core
    Lead

    View full-size slide

  18. Ember Data
    Stanley Stuart Brendan McLoughlin
    Clemens Müller Igor Terzic Christoffer Persson

    View full-size slide

  19. Ember CLI
    Katie Gengler
    Nathan Hammond
    Chad Hietala
    Robert Jackson
    Stefan Penner
    Kelly Selden
    Jake Bixby

    View full-size slide

  20. Learning
    David Baker Ricardo Mendes
    Leah Silber Todd Jordan

    View full-size slide

  21. New Core Team Members

    View full-size slide

  22. Dan Gebhardt Godfrey Chan

    View full-size slide

  23. Trek Glowacki

    View full-size slide

  24. Alex Matchneer

    View full-size slide

  25. Peter Wagenet

    View full-size slide

  26. Ember at the Forefront

    View full-size slide

  27. Community Citizens

    View full-size slide

  28. The Web Ahead

    View full-size slide

  29. 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

    View full-size slide

  30. Web Apps Native Apps
    • Almost-instant boot
    • No install step
    • Shareable
    • Bookmarkable
    • Instant second boot
    • Works offline
    • Access device features
    • Fast, animated UI

    View full-size slide

  31. Native App
    First Boot

    View full-size slide

  32. 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.

    View full-size slide

  33. Web App
    First Boot

    View full-size slide

  34. • 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

    View full-size slide

  35. •Web Workers
    •Service Worker
    •App Cache
    •WebGL
    •IndexedDB
    •Geolocation
    •Camera
    •ArrayBuffer
    •Animation

    View full-size slide

  36. 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

    View full-size slide

  37. Functionality
    Size

    View full-size slide

  38. How do we deliver native-caliber
    features without giving up “instant?”

    View full-size slide

  39. Load Time
    FastBoot
    Service
    Worker
    Engines
    Project
    Svelte
    App
    Cache
    String
    Loading

    View full-size slide

  40. FastBoot Service
    Worker
    Engines
    Project
    Svelte
    First Boot Second Boot
    Load Time
    App
    Cache
    String
    Loading
    String
    Loading

    View full-size slide

  41. 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

    View full-size slide

  42. • 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

    View full-size slide

  43. App Cache
    FastBoot

    View full-size slide

  44. 90.99% Availability
    Internet Explorer
    Edge
    Firefox
    Chrome
    Safari
    Opera
    Mobile Safari
    Android

    View full-size slide

  45. www.ember-fastboot.com

    View full-size slide

  46. FastBoot 1.0
    Ember 2.7

    View full-size slide

  47. Ease of Use is

    View full-size slide

  48. Render Performance

    View full-size slide

  49. 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

    {{name}}
    {{upDays}} Days Up
    Biggest Streak: {{streak}}

    {{#each days key="number" as |day|}}
    {{uptime-day day=day}}
    {{/each}}


    templates/components/server-uptime.js

    View full-size slide

  50. DBMON
    2x Speed Boost
    101 components
    UPTIME BOXES
    3x Speed Boost
    1,099 components
    to ~ 20 to ~ 40

    View full-size slide

  51. 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

    {{@name}}
    {{upDays}} Days Up
    Biggest Streak: {{streak}}

    {{#each @days key="number" as |day|}}

    {{/each}}


    templates/components/server-uptime.js

    View full-size slide

  52. 60
    React Ember 2.4 Ember 2.6 + Glimmer2 Glimmer2
    2
    FPS
    bigger is better

    View full-size slide

  53. FPS
    bigger is better
    mostly, object model improvements
    How do we get there?
    60
    Ember 2.6 + Glimmer2 Glimmer2
    2

    View full-size slide

  54. Initial Render?

    View full-size slide

  55. In component-heavy scenarios,
    CANARY + GLIMMER 2 IS
    1.5-2X FASTER
    THAN 2.4 ALREADY

    View full-size slide

  56. 0.6
    React Ember 2.4 Canary + Glimmer2 Bare Glimmer2
    RENDER MS
    per component
    smaller is better
    2

    View full-size slide

  57. 0.6
    Canary + Glimmer2 Bare Glimmer2
    2
    RENDER MS
    per component
    smaller is better
    mostly, object model improvements
    How do we get there?

    View full-size slide

  58. There are other wins:
    GLIMMER 2 TEMPLATES ARE
    5X SMALLER
    THAN HTMLBARS

    View full-size slide

  59. • 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

    View full-size slide

  60. The Way We Build Web Apps
    is Changing

    View full-size slide

  61. An SDK for the Web

    View full-size slide