@yourtwitter
The Future of the Front-End Web Frameworks
Minko Gechev
twitter.com/mgechev
github.com/mgechev
blog.mgechev.com
Slide 2
Slide 2 text
@mgechev
Serving
Agenda
three pillars of the front-end frameworks of the future
Rehydration Data
Slide 3
Slide 3 text
@mgechev
Disclaimer: my personal opinion; does
not reflect the future roadmap of Angular
Slide 4
Slide 4 text
@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…
Slide 5
Slide 5 text
@mgechev
Slide 6
Slide 6 text
@mgechev
Serving
Rehydration
Rehydration
three pillars of the front-end frameworks of the future
Data
Slide 7
Slide 7 text
@mgechev
Serving a web app in 2019
Slide 8
Slide 8 text
@mgechev
SSR enabled app
Node.js
Browser
API server
Slide 9
Slide 9 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 10
Slide 10 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 11
Slide 11 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 12
Slide 12 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 13
Slide 13 text
@mgechev
Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
Server Client
the app “replays” youtu.be/-kYtw3CSe6s
Slide 14
Slide 14 text
@mgechev
Slide 15
Slide 15 text
@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
Slide 16
Slide 16 text
@mgechev
Cons
● Stateful apps with complex state management
● Not optimized for server-side rendering
● Unresponsive apps before complete rehydration
Slide 17
Slide 17 text
@mgechev
Let’s go back to 2007…
Slide 18
Slide 18 text
@mgechev
Slide 19
Slide 19 text
@mgechev
Slide 20
Slide 20 text
@mgechev
Slide 21
Slide 21 text
@mgechev
Slide 22
Slide 22 text
@mgechev
Slide 23
Slide 23 text
@mgechev
Slide 24
Slide 24 text
@mgechev
LAMP stack
MySQL
Apache
Browser
Slide 25
Slide 25 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser
Slide 26
Slide 26 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser
Slide 27
Slide 27 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser
Slide 28
Slide 28 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser update_user.php
Slide 29
Slide 29 text
@mgechev
Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
Server Client
Slide 30
Slide 30 text
@mgechev
Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
Server Client
Slide 31
Slide 31 text
@mgechev
Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
Server Client
Slide 32
Slide 32 text
@yourtwitter
State transfer in LAMP
var userData = <?php echo json_encode($data) %>
Slide 33
Slide 33 text
@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)
Slide 34
Slide 34 text
@mgechev
Cons
● Does not provide immediate transitions across pages
● Downloading/processing the same assets multiple times
Slide 35
Slide 35 text
@mgechev
Slide 36
Slide 36 text
@mgechev
Let’s look into the future…
Slide 37
Slide 37 text
@mgechev
Happy User
Rule #1
Slide 38
Slide 38 text
@mgechev
Optimizing for UX
● The app must load fast
● The app be responsive
Slide 39
Slide 39 text
@mgechev
Bootstrap Fetch data Render Bootstrap Fetch data Render/Hydrate
Server Client
Slide 40
Slide 40 text
@mgechev
Cons in LAMP
● Should Does not provide immediate transitions across pages
● Should not process Processes the same assets multiple times
Slide 41
Slide 41 text
@mgechev
Progressive Rehydration
Slide 42
Slide 42 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 43
Slide 43 text
@mgechev
Bootstrap Fetch data Render ????????
Server Client
Slide 44
Slide 44 text
@mgechev
Slide 45
Slide 45 text
@mgechev
weather
icon temp
app
profile
avatar details
form
Slide 46
Slide 46 text
@mgechev
weather
icon temp
app
profile
avatar details
form
Slide 47
Slide 47 text
@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
Slide 48
Slide 48 text
@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
Slide 49
Slide 49 text
@mgechev
Slide 50
Slide 50 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 51
Slide 51 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 52
Slide 52 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 53
Slide 53 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 54
Slide 54 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 55
Slide 55 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 56
Slide 56 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 57
Slide 57 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 58
Slide 58 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 59
Slide 59 text
@mgechev
Series of waterfall downloads
Slide 60
Slide 60 text
@mgechev
Slide 61
Slide 61 text
@mgechev
Slide 62
Slide 62 text
@mgechev
Serving
Serving
three pillars of the front-end frameworks of the future
Rehydration Data
Slide 63
Slide 63 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 64
Slide 64 text
@mgechev
route.js
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 65
Slide 65 text
@mgechev
Single HTTP request for getting the route
Slide 66
Slide 66 text
@mgechev
CDN edge server
Slide 67
Slide 67 text
twitter.com/mgechev
Slide 68
Slide 68 text
twitter.com/mgechev
Slide 69
Slide 69 text
twitter.com/mgechev
Slide 70
Slide 70 text
twitter.com/mgechev
Slide 71
Slide 71 text
twitter.com/mgechev
Slide 72
Slide 72 text
twitter.com/mgechev
Slide 73
Slide 73 text
@mgechev
Route-level code-splitting does not scale
* No code-splitting does not scale either
Slide 74
Slide 74 text
@mgechev
Route-level code-splitting does not scale
* No code-splitting does not scale either
Slide 75
Slide 75 text
@mgechev
What scales better then?
Slide 76
Slide 76 text
@mgechev
Slide 77
Slide 77 text
@mgechev
Slide 78
Slide 78 text
@mgechev
Slide 79
Slide 79 text
@mgechev
/script?a+b+c+d
Slide 80
Slide 80 text
@mgechev
/script?a+b+c+d
Slide 81
Slide 81 text
@mgechev
How does this work with a static server?
Slide 82
Slide 82 text
@mgechev
It does not.
Slide 83
Slide 83 text
@mgechev
Slide 84
Slide 84 text
@mgechev
Serving Data
Data
three pillars of the front-end frameworks of the future
Rehydration
Slide 85
Slide 85 text
@mgechev
Reasoning about
Features of our application
Features of our users
Slide 86
Slide 86 text
@mgechev
In machine learning and pattern
recognition, a feature is an
individual measurable property
or characteristic of a
phenomenon being observed.
Wikipedia
Slide 87
Slide 87 text
@mgechev
Adaptable, intelligent systems
Slide 88
Slide 88 text
@mgechev
Slide 89
Slide 89 text
@mgechev
Slide 90
Slide 90 text
@mgechev
We already have this in the recommender systems!
Slide 91
Slide 91 text
@mgechev
Slide 92
Slide 92 text
@mgechev
Recommender systems are not yet part of the front-end toolchain
Slide 93
Slide 93 text
@mgechev
Recommender systems are not yet part of the front-end toolchain
Slide 94
Slide 94 text
@mgechev
Example: Predictive Prefetching
Application usage Data analytics/ML model Web app with instant
Slide 95
Slide 95 text
@mgechev
Slide 96
Slide 96 text
twitter.com/mgechev
github.com/guess-js
Slide 97
Slide 97 text
twitter.com/mgechev
Slide 98
Slide 98 text
twitter.com/mgechev
Naveed Ahmed
Slide 99
Slide 99 text
twitter.com/mgechev
Search and Find Latest Jobs in Pakistan
mustakbil.com
Slide 100
Slide 100 text
twitter.com/mgechev
Search and Find Latest Jobs in Pakistan
mustakbil.com
Slide 101
Slide 101 text
twitter.com/mgechev
Slide 102
Slide 102 text
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%
Slide 103
Slide 103 text
twitter.com/mgechev
90%
for users on fast 3G
prefetching accuracy
>
Slide 104
Slide 104 text
@mgechev
Serving Data
three pillars of the front-end frameworks of the future
Rehydration
Slide 105
Slide 105 text
@mgechev
Serving Data
Rehydration
three pillars of the front-end frameworks of the future
Rehydration
Slide 106
Slide 106 text
@mgechev
Serving Data
Serving
three pillars of the front-end frameworks of the future
Rehydration
Slide 107
Slide 107 text
@mgechev
Serving Data
Data
three pillars of the front-end frameworks of the future
Rehydration