EmberConf 2016 Keynote

Slides from the 2016 EmberConf keynote in Portland, OR.

Transcript

1. EmberConf 2016
   The Web Ahead
   

   View Slide

2. Ember 2.0
   

   View Slide

3. FastBoot
   Glimmer
   

   View Slide

4. Momentum
   

   View Slide

5. 950+
   EmberConf Attendees
   

   View Slide

6. Zoey
   

   View Slide

7. Huge Ember CLI Adoption
   

   View Slide

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

   View Slide

9. 4.7M
   ember serves
   since last EmberConf
   

   View Slide

10. 70.8K
    Chrome extension users
    

    View Slide

11. 332K
    ember-cli installs last month
    

    View Slide

12. View Slide

13. View Slide

14. Stability without Stagnation
    

    View Slide

15. View Slide

16. View Slide

17. Community Survey
    

    View Slide

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

    View Slide

19. 76%
    using Ember 2.x
    

    View Slide

20. 36%
    using Ember 1.13
    

    View Slide

21. Lessons Learned from 1.13
    

    View Slide

22. RFC 56
    

    View Slide

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
    

    View Slide

24. View Slide

25. The Ember Team
    

    View Slide

26. Subteams
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. Learning
    David Baker Ricardo Mendes
    Leah Silber Todd Jordan
    

    View Slide

31. New Core Team Members
    

    View Slide

32. Dan Gebhardt Godfrey Chan
    

    View Slide

33. Alumni
    

    View Slide

34. Trek Glowacki
    

    View Slide

35. Alex Matchneer
    

    View Slide

36. Peter Wagenet
    

    View Slide

37. Ember at the Forefront
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. Community Citizens
    

    View Slide

43. View Slide

44. View Slide

45. The Web Ahead
    

    View Slide

46. Mobile Web
    

    View Slide

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
    

    View Slide

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

    View Slide

49. View Slide

50. Native App
    First Boot
    

    View Slide

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

    View Slide

52. Web App
    First Boot
    

    View Slide

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
    

    View Slide

54. View Slide

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

    View Slide

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
    

    View Slide

57. View Slide

58. Functionality
    Size
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

64. App Cache
    FastBoot
    

    View Slide

65. App Cache
    

    View Slide

66. View Slide

67. View Slide

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

    View Slide

69. Reliable!
    

    View Slide

70. FastBoot
    

    View Slide

71. View Slide

72. www.ember-fastboot.com
    

    View Slide

73. View Slide

74. FastBoot 1.0
    Ember 2.7
    

    View Slide

75. Ease of Use is
    

    View Slide

76. Render Performance
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

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
    
    {{name}}
    {{upDays}} Days Up
    Biggest Streak: {{streak}}
    
    {{#each days key="number" as |day|}}
    {{uptime-day day=day}}
    {{/each}}
    
    
    templates/components/server-uptime.js
    

    View Slide

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

    View Slide

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
    
    {{@name}}
    {{upDays}} Days Up
    Biggest Streak: {{streak}}
    
    {{#each @days key="number" as |day|}}
    
    {{/each}}
    
    
    templates/components/server-uptime.js
    

    View Slide

86. View Slide

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

    View Slide

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

    View Slide

89. Initial Render?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

95. View Slide

96. The Way We Build Web Apps
    is Changing
    

    View Slide

97. An SDK for the Web
    

    View Slide

98. Thank You!
    

    View Slide