What’s Changed and Where’s it Going?

2010

RWD is a Technique

RWD is a Philosophy

Looking at the Data

2014

Total Kilobytes

CSS Bytes

Image Bytes

Quick Note on Kilobytes

But...

DOMContentLoaded

onLoad

Charting that out

Looking at some Examples

1 MB 1 MB + CSS JS

37,000+ Lines of CSS

Managing CSS

Step 1: Interface Inventory

Step 2: Measure

Lighthouse

Step 3: Patternize

Step 4: Measure Change

source-map-explorer

Lighthouse: Before and After

Back to the Money Zone

Opportunities

Managing JS

npm

package.json

ES Modules

But we didn’t have that…

We had a 1MB jQuery “App”

You might not need...

Perhaps a framework makes more sense?

That which is not managed, grows

Rolling Out A Design System

Conway&amp;#039;s Law

Rupert&amp;#039;s Law

2019

HTML5 Components

Angular Components

React Components

Vue Components

Mobile has hit the tipping point

The Expectation Gap

Create and HTML Import

Import that HTML Import into HTML

All-in-JS Web Components

Import Module Script in HTML

Systems Using Web Components

HTML Template Instantiation Spec

Unity Component Spec

Web Assembly

Squoosh

So before I go…

Mobile First: Once More with Feeling

Thank you very much