Tweet
Tweet

Slide 1

Slide 1 text

Better performance for component-based web apps Madrid | November 30 - December 1, 2018 José M. Pérez - @jmperezperez

Slide 2

Slide 2 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 3

Slide 3 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Modern libraries/frameworks

Slide 4

Slide 4 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez ES6 Modern libraries/frameworks

Slide 5

Slide 5 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Code Splitting Modern libraries/frameworks ES6

Slide 6

Slide 6 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez CSS-in-JS Modern libraries/frameworks ES6 Code Splitting

Slide 7

Slide 7 text

What we'll talk about What we'll talk about BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Combine all to build sites with great performance Modern libraries/frameworks ES6 Code Splitting CSS-in-JS

Slide 8

Slide 8 text

…and survive the …and survive the JavaScript fatigue JavaScript fatigue BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 9

Slide 9 text

Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies

Slide 10

Slide 10 text

Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies

Slide 11

Slide 11 text

Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies

Slide 12

Slide 12 text

Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies

Slide 13

Slide 13 text

Who I am Who I am BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Senior Software Engineer at Spotify Google Developer Expert in Web Technologies I build things using web

Slide 14

Slide 14 text

We ❤ modern tools We ❤ modern tools BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 15

Slide 15 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 16

Slide 16 text

Source: The State of Javascript 2018 BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 17

Slide 17 text

Developer Developer ergonomics ergonomics User User experience experience BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 18

Slide 18 text

Do not blame the user Do not blame the user BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 19

Slide 19 text

Do not blame the user Do not blame the user Low end device? Might not afford new one BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 20

Slide 20 text

Do not blame the user Do not blame the user Low end device? Might not afford new one Old browser? Might not have permissions to install new one BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 21

Slide 21 text

Do not blame the user Do not blame the user Low end device? Might not afford new one Old browser? Might not have permissions to install new one Slow network? On a plane, subway, public wifi, limited data plan... BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 22

Slide 22 text

Welcome to the era Welcome to the era of of BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 23

Slide 23 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 24

Slide 24 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 25

Slide 25 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 26

Slide 26 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 27

Slide 27 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 28

Slide 28 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 29

Slide 29 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 30

Slide 30 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 31

Slide 31 text

Serving a large bundle in Serving a large bundle in the old days the old days BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 32

Slide 32 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 33

Slide 33 text

Application code Application code Framework code Framework code BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 34

Slide 34 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 35

Slide 35 text

Server-Side Rendering a Slow App Server-Side Rendering a Slow App BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 36

Slide 36 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 37

Slide 37 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 38

Slide 38 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 39

Slide 39 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 40

Slide 40 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready

Slide 41

Slide 41 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready

Slide 42

Slide 42 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready

Slide 43

Slide 43 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready Execute JS

Slide 44

Slide 44 text

Server-Side Rendering Trade-off Server-Side Rendering Trade-off Server-Side Rendering Waiting for server response Visible, non-interactive page Client-Side Rendering Waiting for server response Blank page Execute JS time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Ready Ready Execute JS

Slide 45

Slide 45 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 46

Slide 46 text

Solution Solution Serve to the user Serve to the user just what is needed just what is needed BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 47

Slide 47 text

How we used to ensure How we used to ensure dependencies dependencies BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 48

Slide 48 text

We didn't have a way* to We didn't have a way* to define dependencies define dependencies * With the exception of YUI Loader, Require.JS and custom tools BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 49

Slide 49 text

ES6 - import/export ES6 - import/export BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 50

Slide 50 text

Modelling a web site has Modelling a web site has pages as dependencies pages as dependencies BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 51

Slide 51 text

Dynamic Loading Dynamic Loading BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 52

Slide 52 text

Code Splitting at Path Level Code Splitting at Path Level bundle.js bundle.js hom e.js about.js contact.js BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 53

Slide 53 text

THIS IS GREAT THIS IS GREAT Serve the code for the current path BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 54

Slide 54 text

More importantly More importantly Adding features has no cost in Adding features has no cost in payload / rendering time payload / rendering time BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 55

Slide 55 text

From this From this BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 56

Slide 56 text

To this To this BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 57

Slide 57 text

Lazy Loading Lazy Loading BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport

Slide 58

Slide 58 text

Lazy Loading Lazy Loading Image BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport

Slide 59

Slide 59 text

Lazy Loading Lazy Loading Image Text with web font BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport

Slide 60

Slide 60 text

Lazy Loading Lazy Loading Image Text with web font Other components BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Viewport

Slide 61

Slide 61 text

THIS IS EVEN GREATER THIS IS EVEN GREATER Serve the code for the current path BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 62

Slide 62 text

THIS IS EVEN GREATER THIS IS EVEN GREATER Serve the code for the current path screen BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 63

Slide 63 text

Polyfill on-demand Polyfill on-demand BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 64

Slide 64 text

Polyfill on-demand Polyfill on-demand BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 65

Slide 65 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 66

Slide 66 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 67

Slide 67 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 68

Slide 68 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez THIS IS EVEN MORE THIS IS EVEN MORE GREATER GREATER Serve the code for the current screen

Slide 69

Slide 69 text

THIS IS EVEN MORE THIS IS EVEN MORE GREATER GREATER Serve the code for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 70

Slide 70 text

CSS-in-JS CSS-in-JS Breaking down the Breaking down the styles monolith styles monolith BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 71

Slide 71 text

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 72

Slide 72 text

Before code-splitting Before code-splitting styles.css bundle.js BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 73

Slide 73 text

Code splitting + CSS-in-JS Code splitting + CSS-in-JS bundle.js account.js about.js blog.js JS code CSS code within JS BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 74

Slide 74 text

THIS IS AMAZING THIS IS AMAZING Serve the code for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 75

Slide 75 text

THIS IS AMAZING THIS IS AMAZING Serve the code Break the behemoth of JS and CSS for the current screen and browser BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 76

Slide 76 text

Wrapping up Wrapping up BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez

Slide 77

Slide 77 text

JS fatigue JS fatigue

Slide 78

Slide 78 text

JS fatigue JS fatigue

Slide 79

Slide 79 text

JS fatigue JS fatigue These are tools. Add them These are tools. Add them to your toolbox. to your toolbox.

Slide 80

Slide 80 text

JS fatigue JS fatigue These are tools. Add them These are tools. Add them to your toolbox. to your toolbox. Look at the bigger picture Look at the bigger picture

Slide 81

Slide 81 text

Thanks! Thanks! @jmperezperez