Madrid | November 30 - December 1, 2018

Better performance forcomponent-based web apps
José M. Pérez - @jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

What we'll talk about
Modern libraries/frameworks
ES6
Code Splitting
CSS-in-JS
Combine all to build sites with great performance

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez…and survive theJavaScript fatigue

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Who I amSenior Software Engineer at Spotify
Google Developer Expert in Web
TechnologiesI build things using web

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

We ❤ modern tools

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Source: The State of Javascript 2018

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Developer
ergonomics

User
experienceBETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Do not blame the user

Low end device?

Old browser?

Slow network?

Might not aﬀord new one

Might not have permissionsto install new one

On a plane, subway, public
wiﬁ, limited data plan...

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Welcome to the eraof <components />BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez<TabBar><LazyLoad(CoverArt)><Connect(NowPlayingBar)><Router>

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Serving a large bundle inthe old days

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Application code

Framework code

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Server-Side Rendering a Slow App

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Server-Side Rendering Trade-off
Client-SideRendering

Waiting forserver response

Server-SideRendering

Waiting for server response

Blank page

Visible, non-interactive pagetime

Execute JSReady

Execute JSReady

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperezSolution
Serve to the user
just what is needed

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

How we used to ensuredependencies

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

We didn't have a way* todefine dependencies* With the exception of YUI Loader, Require.JS and custom tools

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

ES6 - import/export

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Modelling a web site has
pages as dependencies

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Dynamic LoadingBETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Code Splitting at Path Level
bundle.jsbundle.jsjse.

sm booha.jtuactnos.jtc

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS GREAT
Serve the code for the current path

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

More importantly
Adding features has no cost inpayload / rendering time

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

From thisBETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

To thisBETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Viewport

Lazy Loading
Image
Text with web font
Other components

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS EVEN GREATER
Serve the code for the current path

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS EVEN GREATER
Serve the code for the current pathscreen

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Polyfill on-demand

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Polyfill on-demand

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

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

@jmperezperez

THIS IS EVEN MORE
GREATER
Serve the code for the current
screen and browser

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

CSS-in-JS
Breaking down thestyles monolith

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Before code-splitting
styles.css

bundle.js

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Code splitting + CSS-in-JS
bundle.jss.jtnacuocs

ab.jtou

blo

js.
g

JS codeCSS code
within JS

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS AMAZING
Serve the code for the currentscreen and browser

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS AMAZING
Serve the code Break thebehemoth of JS and CSS for thecurrent screen and browser

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Wrapping up

JS fatigue
These are tools. Add themto your toolbox.
Look at the bigger pictureThanks!
@jmperezperez