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 full-size slide

  2. @mgechev
    Serving
    Agenda

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

    View full-size slide

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

    View full-size 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 full-size slide

  5. @mgechev
    Serving
    Rehydration
    Rehydration

    two pillars of the front-end frameworks of the future

    View full-size slide

  6. @mgechev
    Serving a web app in 2019

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. @mgechev
    Rehydration
    body
    section
    p P
    div
    button

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. @mgechev
    LAMP stack 



    MySQL
    Apache
    Browser

    View full-size slide

  18. @mgechev
    LAMP stack 



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

    View full-size slide

  19. @mgechev
    LAMP stack 



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

    View full-size slide

  20. @mgechev
    LAMP stack 



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

    View full-size slide

  21. @mgechev
    LAMP stack 



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

    View full-size slide

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

    View full-size slide

  23. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. @mgechev
    Happy User
    Rule #1

    View full-size slide

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

    View full-size slide

  28. @mgechev
    Progressive Rehydration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. @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 full-size slide

  32. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. @mgechev
    Series of waterfall downloads

    View full-size slide

  43. @mgechev
    Serving
    Serving

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. @mgechev
    Single HTTP request for getting the route

    View full-size slide

  47. @mgechev
    CDN edge server

    View full-size slide

  48. twitter.com/mgechev

    View full-size slide

  49. twitter.com/mgechev

    View full-size slide

  50. twitter.com/mgechev

    View full-size slide

  51. twitter.com/mgechev

    View full-size slide

  52. twitter.com/mgechev

    View full-size slide

  53. twitter.com/mgechev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. @mgechev
    It does not.

    View full-size slide

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

    View full-size slide

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

    github.com/mgechev

    blog.mgechev.com

    View full-size slide