Pro Yearly is on sale from $80 to $50! »

The Future of the Front-End Frameworks

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

November 22, 2019
Tweet

Transcript

  1. @yourtwitter The Future of the Front-End Web Frameworks Minko Gechev

    twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com
  2. @mgechev Serving Agenda
 two pillars of the front-end frameworks of

    the future Rehydration
  3. @mgechev Disclaimer: my personal opinion; does not reflect the future

    roadmap of Angular
  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…
  5. @mgechev

  6. @mgechev Serving Rehydration Rehydration
 two pillars of the front-end frameworks

    of the future
  7. @mgechev Serving a web app in 2019

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

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

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

  11. @mgechev

  12. @mgechev Rehydration body section p P div button

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

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

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

  16. @mgechev

  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
  18. @mgechev Cons • Stateful apps with complex state management •

    Not optimized for server-side rendering • Unresponsive apps before complete rehydration
  19. @mgechev Let’s go back to 2008…

  20. @mgechev

  21. @mgechev

  22. @mgechev

  23. @mgechev

  24. @mgechev

  25. @mgechev

  26. @mgechev LAMP stack 
 
 
 MySQL Apache Browser

  27. @mgechev LAMP stack 
 
 
 MySQL http://meteors-bg.com Apache Browser

  28. @mgechev LAMP stack 
 
 
 MySQL http://meteors-bg.com Apache Browser

  29. @mgechev LAMP stack 
 
 
 MySQL http://meteors-bg.com Apache Browser

  30. @mgechev LAMP stack 
 
 
 MySQL http://meteors-bg.com Apache Browser

    update_user.php
  31. @yourtwitter State transfer in LAMP <script> var userData = <?php

    echo json_encode($data) %> </script>
  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)
  33. @mgechev Cons • Does not provide immediate transitions across pages

    • Downloading/processing the same assets multiple times
  34. @mgechev

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

  36. @mgechev Happy User Rule #1

  37. @mgechev Optimizing for UX • The app must load fast

    • The app be responsive
  38. @mgechev Progressive Rehydration

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

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

    profile form details
  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
  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
  43. @mgechev

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

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

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

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

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

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

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

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

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

    service formatter
  53. @mgechev Series of waterfall downloads

  54. @mgechev

  55. @mgechev

  56. @mgechev Serving Serving
 two pillars of the front-end frameworks of

    the future Rehydration
  57. @mgechev weather icon temp app profile avatar details form user

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

    user service formatter
  59. @mgechev Single HTTP request for getting the route

  60. @mgechev CDN edge server

  61. twitter.com/mgechev

  62. twitter.com/mgechev

  63. twitter.com/mgechev

  64. twitter.com/mgechev

  65. twitter.com/mgechev

  66. twitter.com/mgechev

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

  68. @mgechev

  69. @mgechev

  70. @mgechev

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

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

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

  74. @mgechev It does not.

  75. @mgechev

  76. @mgechev

  77. @mgechev

  78. @mgechev

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

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