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
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