Outside Looking In

Slide 1

OUTSIDE LOOKING IN Tim Kadlec @tkadlec #artifactconf

Slide 2

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

Slide 3

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

Slide 4

DAD….

Slide 5

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

Slide 6

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

Slide 7

ARE WE THERE YET?

Slide 8

BILLY’S BIRTHDAY WAS YESTERDAY.

Slide 9

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

Slide 10

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

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE ME

Slide 20

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE YOU

Slide 21

ALWAYS EASIER TO BUILD FOR PEOPLE LIKE US

Slide 22

WE’RE BUILDING A WEB OF EXCESS

Slide 23

306.3kb

Slide 24

▲191% 891.7kb

Slide 25

56.9kb

Slide 26

375.4KB ▲616% 56.9kb

Slide 27

375.4KB ▼1.9%

Slide 28

BECAUSE WE CAN

Slide 29

32 MONTHS

Slide 30

$214

Slide 31

85%

Slide 32

ANDROID > 1 YEAR OLD < $200

Slide 33

Slide 34

Slide 35

#THROTTLETHURSDAY

Slide 36

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

Slide 37

Slide 38

19S 65S PIXEL 2 ALCATEL 1X

Slide 39

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

Slide 40

A GOOD FRAMEWORK MAKES IT EASY TO BUILD

Slide 41

A GOOD FRAMEWORK MAKES IT EASY TO BUILD WELL

Slide 42

Slide 43

60 DETECTABLE ERRORS PER PAGE

Slide 44

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

Slide 45

375.4KB 1300KB

Slide 46

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

Slide 47

Slide 48

Slide 49

Slide 50

WE SHOULD EXPECT MORE OF OUR TOOLS.

Slide 51

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

Slide 52

3RD PARTIES

Slide 53

706% Increase in 3rd party size 2011 2018

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

CLIENT-SIDE A/B TESTING & PERSONALIZATION

Slide 62

Slide 63

Slide 64

Slide 65

Single-Point of Failure (SPOF)

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

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()); }

Slide 73

2x-20x improvement

Slide 74

Slide 75

It’s still on us.

Slide 76

Checks & Balances

Slide 77

Slide 78

Feature-Policy: my-policy allowed-origins;

Slide 79

IN-BROWSER PERFORMANCE LINTING

Slide 80

Feature-Policy: oversized-images ‘none’;

Slide 81

Slide 82

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

Slide 83

Slide 84

Feature-Policy: unsized-media ‘none’;

Slide 85

Slide 86

Slide 87

Slide 88

Slide 89

Slide 90

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