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

The Future of the Front-End Frameworks

Minko Gechev
November 22, 2019

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.

Minko Gechev

November 22, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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