The Future of the Front-End Frameworks

Over the years, complexity in modern web applications has been mostly going towards the client side. Shipping large single-page applications, however, introduced a lot of complexity and has its own performance penalty.

In this talk, we’re going to peek into the future. We’ll look at where modern web frameworks are heading to satisfy the continually evolving business requirements while providing excellent development ergonomics and performance.

Transcript

1. @yourtwitter
   The Future of the Front-End Web Frameworks
   Minko Gechev
   twitter.com/mgechev

   github.com/mgechev

   blog.mgechev.com
   

   View Slide

2. @mgechev
   Serving
   Agenda

   three pillars of the front-end frameworks of the future
   Rehydration Data
   

   View Slide

3. @mgechev
   Disclaimer: my personal opinion; does
   not reflect the future roadmap of Angular
   

   View Slide

4. @mgechev
   Not stating…
   ● …the “framework of the future” is Angular, React, etc.
   ● …the “framework of the future” is not Angular, React, etc.
   ● The language of the future is JavaScript
   ● The “future” is next year…
   

   View Slide

5. @mgechev
   

   View Slide

6. @mgechev
   Serving
   Rehydration
   Rehydration

   three pillars of the front-end frameworks of the future
   Data
   

   View Slide

7. @mgechev
   Serving a web app in 2019
   

   View Slide

8. @mgechev
   SSR enabled app
   Node.js
   Browser
   API server
   

   View Slide

9. @mgechev
   SSR enabled app
   https://example.com
   Node.js
   Browser
   API server
   

   View Slide

10. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server
    

    View Slide

11. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server
    

    View Slide

12. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server
    

    View Slide

13. @mgechev
    Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
    Server Client
    the app “replays” youtu.be/-kYtw3CSe6s
    

    View Slide

14. @mgechev
    

    View Slide

15. @mgechev
    Pros
    ● Server-side rendering - social media & SEO friendly
    ● Once the app is loaded, the user get immediate experience
    ● Resources are downloaded and processed only once
    

    View Slide

16. @mgechev
    Cons
    ● Stateful apps with complex state management
    ● Not optimized for server-side rendering
    ● Unresponsive apps before complete rehydration
    

    View Slide

17. @mgechev
    Let’s go back to 2007…
    

    View Slide

18. @mgechev
    

    View Slide

19. @mgechev
    

    View Slide

20. @mgechev
    

    View Slide

21. @mgechev
    

    View Slide

22. @mgechev
    

    View Slide

23. @mgechev
    

    View Slide

24. @mgechev
    LAMP stack 

    

    

    MySQL
    Apache
    Browser
    

    View Slide

25. @mgechev
    LAMP stack 

    

    

    MySQL
    http://meteors-bg.com
    Apache
    Browser
    

    View Slide

26. @mgechev
    LAMP stack 

    

    

    MySQL
    http://meteors-bg.com
    Apache
    Browser
    

    View Slide

27. @mgechev
    LAMP stack 

    

    

    MySQL
    http://meteors-bg.com
    Apache
    Browser
    

    View Slide

28. @mgechev
    LAMP stack 

    

    

    MySQL
    http://meteors-bg.com
    Apache
    Browser update_user.php
    

    View Slide

29. @mgechev
    Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
    Server Client
    

    View Slide

30. @mgechev
    Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
    Server Client
    

    View Slide

31. @mgechev
    Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
    Server Client
    

    View Slide

32. @yourtwitter
    State transfer in LAMP
    <br/>var userData = <?php echo json_encode($data) %><br/>
    

    View Slide

33. @mgechev
    Pros
    ● The app is server-side rendered by default
    ● The app is interactive immediately
    ● The app “rehydrates” without destroying the rendered UI
    ● We get only the assets needed by the current page (ideally)
    

    View Slide

34. @mgechev
    Cons
    ● Does not provide immediate transitions across pages
    ● Downloading/processing the same assets multiple times
    

    View Slide

35. @mgechev
    

    View Slide

36. @mgechev
    Let’s look into the future…
    

    View Slide

37. @mgechev
    Happy User
    Rule #1
    

    View Slide

38. @mgechev
    Optimizing for UX
    ● The app must load fast
    ● The app be responsive
    

    View Slide

39. @mgechev
    Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
    Server Client
    

    View Slide

40. @mgechev
    Cons in LAMP
    ● Should Does not provide immediate transitions across pages
    ● Should not process Processes the same assets multiple times
    

    View Slide

41. @mgechev
    Progressive Rehydration
    

    View Slide

42. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server
    

    View Slide

43. @mgechev
    Bootstrap Fetch data Render ????????
    Server Client
    

    View Slide

44. @mgechev
    

    View Slide

45. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    

    View Slide

46. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    

    View Slide

47. @mgechev
    Rules of Progressive Rehydration
    Component is loaded & bootstrapped on interaction
    Component is loaded & bootstrapped when it receives new data
    Each logical unit has its own bundle
    

    View Slide

48. @mgechev
    Rules of Progressive Rehydration
    Component is loaded & bootstrapped on interaction
    Component is loaded & bootstrapped when it receives new data
    Each logical unit has its own bundle
    

    View Slide

49. @mgechev
    

    View Slide

50. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

51. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

52. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

53. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

54. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

55. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

56. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

57. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

58. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

59. @mgechev
    Series of waterfall downloads
    

    View Slide

60. @mgechev
    

    View Slide

61. @mgechev
    

    View Slide

62. @mgechev
    Serving
    Serving

    three pillars of the front-end frameworks of the future
    Rehydration Data
    

    View Slide

63. @mgechev
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

64. @mgechev
    route.js
    weather
    icon temp
    app
    profile
    avatar details
    form
    user
    service
    formatter
    

    View Slide

65. @mgechev
    Single HTTP request for getting the route
    

    View Slide

66. @mgechev
    CDN edge server
    

    View Slide

67. twitter.com/mgechev
    

    View Slide

68. twitter.com/mgechev
    

    View Slide

69. twitter.com/mgechev
    

    View Slide

70. twitter.com/mgechev
    

    View Slide

71. twitter.com/mgechev
    

    View Slide

72. twitter.com/mgechev
    

    View Slide

73. @mgechev
    Route-level code-splitting does not scale
    * No code-splitting does not scale either
    

    View Slide

74. @mgechev
    Route-level code-splitting does not scale
    * No code-splitting does not scale either
    

    View Slide

75. @mgechev
    What scales better then?
    

    View Slide

76. @mgechev
    

    View Slide

77. @mgechev
    

    View Slide

78. @mgechev
    

    View Slide

79. @mgechev
    /script?a+b+c+d
    

    View Slide

80. @mgechev
    /script?a+b+c+d
    

    View Slide

81. @mgechev
    How does this work with a static server?
    

    View Slide

82. @mgechev
    It does not.
    

    View Slide

83. @mgechev
    

    View Slide

84. @mgechev
    Serving Data
    Data

    three pillars of the front-end frameworks of the future
    Rehydration
    

    View Slide

85. @mgechev
    Reasoning about
    Features of our application
    Features of our users
    

    View Slide

86. @mgechev
    In machine learning and pattern
    recognition, a feature is an
    individual measurable property
    or characteristic of a
    phenomenon being observed.
    Wikipedia
    

    View Slide

87. @mgechev
    Adaptable, intelligent systems
    

    View Slide

88. @mgechev
    

    View Slide

89. @mgechev
    

    View Slide

90. @mgechev
    We already have this in the recommender systems!
    

    View Slide

91. @mgechev
    

    View Slide

92. @mgechev
    Recommender systems are not yet part of the front-end toolchain
    

    View Slide

93. @mgechev
    Recommender systems are not yet part of the front-end toolchain
    

    View Slide

94. @mgechev
    Example: Predictive Prefetching
    Application usage Data analytics/ML model Web app with instant
    

    View Slide

95. @mgechev
    

    View Slide

96. twitter.com/mgechev
    github.com/guess-js
    

    View Slide

97. twitter.com/mgechev
    

    View Slide

98. twitter.com/mgechev
    Naveed Ahmed
    

    View Slide

99. twitter.com/mgechev
    Search and Find Latest Jobs in Pakistan
    mustakbil.com
    

    View Slide

100. twitter.com/mgechev
     Search and Find Latest Jobs in Pakistan
     mustakbil.com
     

     View Slide

101. twitter.com/mgechev
     

     View Slide

102. twitter.com/mgechev
     Prefetching data consumption
     one user at the home page
     2.56MB
     Prefetch all modules
     100%
     1.22MB
     Prefetch visibile links
     48%
     0.18MB
     Predictive prefetching
     7%
     

     View Slide

103. twitter.com/mgechev
     90%
     for users on fast 3G
     prefetching accuracy
     >
     

     View Slide

104. @mgechev
     Serving Data
     

     three pillars of the front-end frameworks of the future
     Rehydration
     

     View Slide

105. @mgechev
     Serving Data
     Rehydration

     three pillars of the front-end frameworks of the future
     Rehydration
     

     View Slide

106. @mgechev
     Serving Data
     Serving

     three pillars of the front-end frameworks of the future
     Rehydration
     

     View Slide

107. @mgechev
     Serving Data
     Data

     three pillars of the front-end frameworks of the future
     Rehydration
     

     View Slide

108. @mgechev
     

     View Slide

109. @mgechev
     

     View Slide

110. @mgechev
     

     View Slide

111. @mgechev
     Thank you!
     twitter.com/mgechev

     github.com/mgechev

     blog.mgechev.com
     

     View Slide