Better performance for component-based
web apps

 

 

 

 

José M. Pérez

@jmperezperez

What we'll talk about

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

  • Modern libraries/frameworks
  • ES6
  • Code Splitting
  • CSS-in-JS
  • Combine all to build sites with great performance

We ❤️ modern tools

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

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?

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

Welcome to the era of <components />

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

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

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Serving a large bundle

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

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Server-Side Rendering

Waiting for server response

Visible, non-interactive page

Client-Side Rendering

Waiting for server response

Blank page

Ready

Ready

time

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

Solution

Serve to the user just what is needed

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

How we used to do web

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

We didn't have a way* to define dependencies

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

* With the exception of YUI Loader, Require.JS and custom tools

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

bundle.js

home.js

about.js

contact.js

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS GREAT

 

Serve the code for the current path

More importantly

Adding features has no cost in payload / rendering time

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

From this

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

To this

Lazy Loading

  • Image
  • Text with web font
  • Other components

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

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

Polyfill on-demand

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 THE EVEN MORE GREATER

 

Serve the code for the current screen

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS THE EVEN MORE GREATER

 

Serve the code for the current screen and browser

CSS-in-JS

Breaking down the styles 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.js

account.js

about.js

blog.js

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

JS code

CSS code within JS

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

THIS IS AMAZING

 

Serve the code for the current screen and browser

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

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

Wrapping up

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS

@jmperezperez

JS fatigue

These are tools. Add them to your toolbox.

Look at the bigger picture

Thanks!

@jmperezperez

Slides on https://slides.com/jmperez

Better performance for component-based web apps

By José M. Pérez

Better performance for component-based web apps

Modern tools are fun to use and they are useful to create websites with great performance.

  • 1,285