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