@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
two pillars of the front-end frameworks of the future
Rehydration
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
two pillars of the front-end frameworks of the future
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
Slide 12
Slide 12 text
@mgechev
Rehydration
body
section
p P
div
button
Slide 13
Slide 13 text
@mgechev
Rehydration
body
section
p P
div
button
CDN
Slide 14
Slide 14 text
@mgechev
Rehydration
body
section
p P
div
button
CDN
app.js
Slide 15
Slide 15 text
@mgechev
Rehydration
body
section
p P
div
button
CDN
app.js
Slide 16
Slide 16 text
@mgechev
Slide 17
Slide 17 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 18
Slide 18 text
@mgechev
Cons
● Stateful apps with complex state management
● Not optimized for server-side rendering
● Unresponsive apps before complete rehydration
Slide 19
Slide 19 text
@mgechev
Let’s go back to 2008…
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
Slide 25
Slide 25 text
@mgechev
Slide 26
Slide 26 text
@mgechev
LAMP stack
MySQL
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
Slide 29
Slide 29 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser
Slide 30
Slide 30 text
@mgechev
LAMP stack
MySQL
http://meteors-bg.com
Apache
Browser update_user.php
Slide 31
Slide 31 text
@yourtwitter
State transfer in LAMP
var userData = <?php echo json_encode($data) %>
Slide 32
Slide 32 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 33
Slide 33 text
@mgechev
Cons
● Does not provide immediate transitions across pages
● Downloading/processing the same assets multiple times
Slide 34
Slide 34 text
@mgechev
Slide 35
Slide 35 text
@mgechev
Let’s look into the future…
Slide 36
Slide 36 text
@mgechev
Happy User
Rule #1
Slide 37
Slide 37 text
@mgechev
Optimizing for UX
● The app must load fast
● The app be responsive
Slide 38
Slide 38 text
@mgechev
Progressive Rehydration
Slide 39
Slide 39 text
@mgechev
SSR enabled app
https://example.com
Node.js
Browser
API server
Slide 40
Slide 40 text
@mgechev
weather
icon temp
app
profile
avatar details
form
app
profile
form
details
Slide 41
Slide 41 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 42
Slide 42 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 43
Slide 43 text
@mgechev
Slide 44
Slide 44 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
app
Slide 45
Slide 45 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
app
Slide 46
Slide 46 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
app
Slide 47
Slide 47 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
app
Slide 48
Slide 48 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
profile
Slide 49
Slide 49 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
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
Series of waterfall downloads
Slide 54
Slide 54 text
@mgechev
Slide 55
Slide 55 text
@mgechev
Slide 56
Slide 56 text
@mgechev
Serving
Serving
two pillars of the front-end frameworks of the future
Rehydration
Slide 57
Slide 57 text
@mgechev
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 58
Slide 58 text
@mgechev
route.js
weather
icon temp
app
profile
avatar details
form
user
service
formatter
Slide 59
Slide 59 text
@mgechev
Single HTTP request for getting the route
Slide 60
Slide 60 text
@mgechev
CDN edge server
Slide 61
Slide 61 text
twitter.com/mgechev
Slide 62
Slide 62 text
twitter.com/mgechev
Slide 63
Slide 63 text
twitter.com/mgechev
Slide 64
Slide 64 text
twitter.com/mgechev
Slide 65
Slide 65 text
twitter.com/mgechev
Slide 66
Slide 66 text
twitter.com/mgechev
Slide 67
Slide 67 text
@mgechev
Route-level code-splitting does not scale
Slide 68
Slide 68 text
@mgechev
Slide 69
Slide 69 text
@mgechev
Slide 70
Slide 70 text
@mgechev
Slide 71
Slide 71 text
@mgechev
/script?a+b+c+d
Slide 72
Slide 72 text
@mgechev
/script?a+b+c+d
Slide 73
Slide 73 text
@mgechev
How does this work with a static server?
Slide 74
Slide 74 text
@mgechev
It does not.
Slide 75
Slide 75 text
@mgechev
Slide 76
Slide 76 text
@mgechev
Slide 77
Slide 77 text
@mgechev
Slide 78
Slide 78 text
@mgechev
Slide 79
Slide 79 text
@mgechev
We are building the future of frameworks together