Outside Looking In

OUTSIDE LOOKING IN Tim Kadlec @tkadlec #artifactconf

? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? 288 QUESTIONS ? ? ? ? ? ? ? ? ? ? ? ? ? PER?DAY ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ?? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? I HAVE 5 KIDS.

DAD….

DAD…. WHAT IF INSTEAD OF CHANGING THE BABY’S DIAPER…

DAD…. WHAT IF INSTEAD OF CHANGING THE BABY’S DIAPER… WE HAD TO CHANGE HIS HEAD?

ARE WE THERE YET?

BILLY’S BIRTHDAY WAS YESTERDAY.

BILLY’S BIRTHDAY WAS YESTERDAY. HE’S 5 YEARS OLDER THAN HIS SISTER WHO IS 9.

BILLY’S BIRTHDAY WAS YESTERDAY. HE’S 5 YEARS OLDER THAN HIS SISTER WHO IS 9. HOW TALL IS THEIR GRANDMA?

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE ME

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE YOU

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE US

WE’RE BUILDING A WEB OF EXCESS

306.3kb

▲191% 891.7kb

56.9kb

375.4KB ▲616% 56.9kb

375.4KB ▼1.9%

BECAUSE WE CAN

32 MONTHS

$214

85%

ANDROID > 1 YEAR OLD < $200

#THROTTLETHURSDAY

“ALL TESTING SHOULD BE DONE ON SLOW AND OLD ANDROID” https://twitter.com/simonhearne/status/1176559022666895360

19S 65S PIXEL 2 ALCATEL 1X

WE’VE BUILT A WEB THAT LARGELY DISMISSES AFFORDABLE, TYPICAL SMARTPHONES AND THE PEOPLE THAT USE THEM.

A GOOD FRAMEWORK MAKES IT EASY TO BUILD

A GOOD FRAMEWORK MAKES IT EASY TO BUILD WELL

60 DETECTABLE ERRORS PER PAGE

80 60 59.6 65.5 70.9 73.7 Angular VueJS 40 20 0 Overall React

375.4KB 1300KB

2400 2,243 2,345 Angular React 1800 1,653 1200 1,300 600 0 Overall VueJS

WE SHOULD EXPECT MORE OF OUR TOOLS.

UNLESS A GLOBALLY LAUNCHED FRAMEWORK LABELS ITSELF AS EXCLUSIVELY TARGETING THE USERS OF THE WEALTHY WESTERN WEB, IT HAS A RESPONSIBILITY TO HELP DEVELOPERS TARGET EVERY PHONE ON THE WIDENING PERFORMANCE GAP SPECTRUM. - SURMA

3RD PARTIES

706% Increase in 3rd party size 2011 2018

CLIENT-SIDE A/B TESTING & PERSONALIZATION

Single-Point of Failure (SPOF)

addEventListener(‘fetch’, event => { event.respondWith(handleRequest(event.request)) }) /** * Fetch and log a request * @param {Request} request */ async function handleRequest(request) { return new Response((new Date).toString()); }

2x-20x improvement

It’s still on us.

Checks & Balances

Feature-Policy: my-policy allowed-origins;

IN-BROWSER PERFORMANCE LINTING

Feature-Policy: oversized-images ‘none’;

Feature-Policy: unoptimized-lossy-images ‘none’; Feature-Policy: unoptimized-lossless-images-strict ‘none’;

Feature-Policy: unsized-media ‘none’;

“bundlesize”: [ { “path”: “./dist/vendor-.js”, “maxSize”: “3 kB” }, { “path”: “./dist/main.js”, “maxSize”: “20 kB” }, { “path”: “./dist/chunk-.js”, “maxSize”: “3 kB” } ]

SURFACE OUR BLIND SPOTS

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE ME

ME

WHITE

WHITE MALE

WHITE MALE RUGGEDLY HANDSOME

WHITE MALE RUGGEDLY HANDSOME HEALTHY

WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF

WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH

“WE’RE FOCUSED ABOVE THE FOLD.” - TATIANA MAC

TECHNICAL DOCUMENTATION

“JUST” “EASY” “SIMPLE”

WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH

CRITICISM.

OBSERVATION.

IS THIS IS FOR EVERYONE?

OR FOR PEOPLE LIKE US?

ME

YOU

US

EVERYONE

THANK YOU! Tim Kadlec @tkadlec #artifactconf