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

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

   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

   two pillars of the front-end frameworks of the future
   

   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
    

    View Slide

12. @mgechev
    Rehydration
    body
    section
    p P
    div
    button
    

    View Slide

13. @mgechev
    Rehydration
    body
    section
    p P
    div
    button
    CDN
    

    View Slide

14. @mgechev
    Rehydration
    body
    section
    p P
    div
    button
    CDN
    app.js
    

    View Slide

15. @mgechev
    Rehydration
    body
    section
    p P
    div
    button
    CDN
    app.js
    

    View Slide

16. @mgechev
    

    View Slide

17. @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

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

    View Slide

19. @mgechev
    Let’s go back to 2008…
    

    View Slide

20. @mgechev
    

    View Slide

21. @mgechev
    

    View Slide

22. @mgechev
    

    View Slide

23. @mgechev
    

    View Slide

24. @mgechev
    

    View Slide

25. @mgechev
    

    View Slide

26. @mgechev
    LAMP stack 

    

    

    MySQL
    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
    

    View Slide

29. @mgechev
    LAMP stack 

    

    

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

    View Slide

30. @mgechev
    LAMP stack 

    

    

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

    View Slide

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

    View Slide

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

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

    View Slide

34. @mgechev
    

    View Slide

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

    View Slide

36. @mgechev
    Happy User
    Rule #1
    

    View Slide

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

    View Slide

38. @mgechev
    Progressive Rehydration
    

    View Slide

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

    View Slide

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

    View Slide

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

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

43. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    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
    Series of waterfall downloads
    

    View Slide

54. @mgechev
    

    View Slide

55. @mgechev
    

    View Slide

56. @mgechev
    Serving
    Serving

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

    View Slide

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

    View Slide

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

    View Slide

59. @mgechev
    Single HTTP request for getting the route
    

    View Slide

60. @mgechev
    CDN edge server
    

    View Slide

61. twitter.com/mgechev
    

    View Slide

62. twitter.com/mgechev
    

    View Slide

63. twitter.com/mgechev
    

    View Slide

64. twitter.com/mgechev
    

    View Slide

65. twitter.com/mgechev
    

    View Slide

66. twitter.com/mgechev
    

    View Slide

67. @mgechev
    Route-level code-splitting does not scale
    

    View Slide

68. @mgechev
    

    View Slide

69. @mgechev
    

    View Slide

70. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

74. @mgechev
    It does not.
    

    View Slide

75. @mgechev
    

    View Slide

76. @mgechev
    

    View Slide

77. @mgechev
    

    View Slide

78. @mgechev
    

    View Slide

79. @mgechev
    We are building the future of frameworks together
    

    View Slide

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

    github.com/mgechev

    blog.mgechev.com
    

    View Slide