The Future of the Front-End Frameworks

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

October 18, 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
 three pillars of the front-end frameworks of

    the future Rehydration Data
  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
 three pillars of the front-end frameworks

    of the future Data
  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 SSR enabled app https://example.com Node.js Browser API server

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

  13. @mgechev Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate Server

    Client the app “replays” youtu.be/-kYtw3CSe6s
  14. @mgechev

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

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

  18. @mgechev

  19. @mgechev

  20. @mgechev

  21. @mgechev

  22. @mgechev

  23. @mgechev

  24. @mgechev LAMP stack 
 
 
 MySQL Apache Browser

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

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

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

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

    update_user.php
  29. @mgechev Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate Server

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

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

    Client
  32. @yourtwitter State transfer in LAMP <script> var userData = <?php

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

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

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

  37. @mgechev Happy User Rule #1

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

    • The app be responsive
  39. @mgechev Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate Server

    Client
  40. @mgechev Cons in LAMP • Should Does not provide immediate

    transitions across pages • Should not process Processes the same assets multiple times
  41. @mgechev Progressive Rehydration

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

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

  44. @mgechev

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

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

  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
  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
  49. @mgechev

  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 weather icon temp app profile avatar details form user

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

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

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

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

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

    service formatter
  59. @mgechev Series of waterfall downloads

  60. @mgechev

  61. @mgechev

  62. @mgechev Serving Serving
 three pillars of the front-end frameworks of

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

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

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

  66. @mgechev CDN edge server

  67. twitter.com/mgechev

  68. twitter.com/mgechev

  69. twitter.com/mgechev

  70. twitter.com/mgechev

  71. twitter.com/mgechev

  72. twitter.com/mgechev

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

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

    not scale either
  75. @mgechev What scales better then?

  76. @mgechev

  77. @mgechev

  78. @mgechev

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

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

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

  82. @mgechev It does not.

  83. @mgechev

  84. @mgechev Serving Data Data
 three pillars of the front-end frameworks

    of the future Rehydration
  85. @mgechev Reasoning about Features of our application Features of our

    users
  86. @mgechev In machine learning and pattern recognition, a feature is

    an individual measurable property or characteristic of a phenomenon being observed. Wikipedia
  87. @mgechev Adaptable, intelligent systems

  88. @mgechev

  89. @mgechev

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

  91. @mgechev

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

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

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

    app with instant
  95. @mgechev

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

  97. twitter.com/mgechev

  98. twitter.com/mgechev Naveed Ahmed

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

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

  101. twitter.com/mgechev

  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%
  103. twitter.com/mgechev 90% for users on fast 3G prefetching accuracy >

  104. @mgechev Serving Data 
 three pillars of the front-end frameworks

    of the future Rehydration
  105. @mgechev Serving Data Rehydration
 three pillars of the front-end frameworks

    of the future Rehydration
  106. @mgechev Serving Data Serving
 three pillars of the front-end frameworks

    of the future Rehydration
  107. @mgechev Serving Data Data
 three pillars of the front-end frameworks

    of the future Rehydration
  108. @mgechev

  109. @mgechev

  110. @mgechev

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