Tweet
Tweet

Slide 1

Slide 1 text

Front-End Ops Alex Sexton | 2014

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

A little under a year later…

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Naming Things #hardCSproblems

Slide 6

Slide 6 text

Regressive Enhancement

Slide 7

Slide 7 text

Polyfill

Slide 8

Slide 8 text

Prollyfill

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Parlayfill

Slide 12

Slide 12 text

Mollyfill

Slide 13

Slide 13 text

ANYWAYS

Slide 14

Slide 14 text

Front-End Ops Alex Sexton | 2014

Slide 15

Slide 15 text

FEO

Slide 16

Slide 16 text

UGLY (in spanish)

Slide 17

Slide 17 text

FeOps

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Iron Ops catchy

Slide 20

Slide 20 text

I pay the Iron Price for lower latency

Slide 21

Slide 21 text

What is Front-End Ops?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

“Some weird terms you invented to describe things that don’t exist.” - John Edgar, Digital Ocean

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

First Of All

Slide 26

Slide 26 text

More Importantly…

Slide 27

Slide 27 text

That’s the whole point.

Slide 28

Slide 28 text

Serving webpages is really hard.

Slide 29

Slide 29 text

that’s why we have conferences for this stuff (jQConf, FEOpsConf)

Slide 30

Slide 30 text

Conferences That Don’t Exist

Slide 31

Slide 31 text

HTML &ENTITY; CONF

Slide 32

Slide 32 text

SundayMorningConf

Slide 33

Slide 33 text

Front-End Ops is the collection of things you can do to make serving webpages easier. opposite of harder

Slide 34

Slide 34 text

So you can focus on your product.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Mature FEOps benefits the people who don’t have time to think about this stuff.

Slide 37

Slide 37 text

Lots of folks agree!

Slide 38

Slide 38 text

So really what is it?

Slide 39

Slide 39 text

The App Everything Else

Slide 40

Slide 40 text

The App Everything Else FEOps™

Slide 41

Slide 41 text

Article Recap

Slide 42

Slide 42 text

“Front-End Ops Engineers are the bridge between an application’s intent and an application’s reality”

Slide 43

Slide 43 text

Why?

Slide 44

Slide 44 text

We’re collectively insane.

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Why now?

Slide 47

Slide 47 text

Application logic is being deferred to the client side.

Slide 48

Slide 48 text

Performance Testing

Slide 49

Slide 49 text

Error Logging

Slide 50

Slide 50 text

Lifecycle Logging

Slide 51

Slide 51 text

Measurement over time

Slide 52

Slide 52 text

A Front-End Ops Engineer enables long-term progress

Slide 53

Slide 53 text

Performance is the foundation on which user experience is built.

Slide 54

Slide 54 text

A UX in the DOM is worth two on the wire.

Slide 55

Slide 55 text

Speed is the metric that we measure by.

Slide 56

Slide 56 text

Speed of app.

Slide 57

Slide 57 text

Speed of tools.

Slide 58

Slide 58 text

Speed of development.

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

(all of these can be measured and tracked)

Slide 61

Slide 61 text

(all of these can be measured and tracked) ((but it’s important to read the data right))

Slide 62

Slide 62 text

Speed of app.

Slide 63

Slide 63 text

Speed up your app In 5 Simple Steps How To

Slide 64

Slide 64 text

Step 1 forget everything you know because it’s wrong

Slide 65

Slide 65 text

Step 2 it’s probably the network

Slide 66

Slide 66 text

Step 3 Probably Read Ilya’s book

Slide 67

Slide 67 text

Step 4 measure

Slide 68

Slide 68 text

Step 5 measure

Slide 69

Slide 69 text

1) Forget everything 2) It’s probably the network 3) Ilya’s book 4) Measure 5) Measure Recap

Slide 70

Slide 70 text

Chrome DevTools Flame Graphs, CPU Profiles, and Repaints/Reflows info are invaluable.

Slide 71

Slide 71 text

The limiting factor of your system should be the speed of light. Assuming you have Fiber

Slide 72

Slide 72 text

0 50 100 150 200 THEORETICAL GRAPHS

Slide 73

Slide 73 text

OS X Android iOS Blackberry 1200ms 0ms

Slide 74

Slide 74 text

1200ms 0ms

Slide 75

Slide 75 text

1200ms 0ms

Slide 76

Slide 76 text

Distribution of Load Time

Slide 77

Slide 77 text

Desktop Mobile

Slide 78

Slide 78 text

Two distinct loading curves

Slide 79

Slide 79 text

What you see when you add them together.

Slide 80

Slide 80 text

ಠ_ಠ

Slide 81

Slide 81 text

Measurement

Slide 82

Slide 82 text

Measurement

Slide 83

Slide 83 text

If I had to pick one part that was most important to FEOps, it’d be all of it

Slide 84

Slide 84 text

but #2 would be MEASUREMENT

Slide 85

Slide 85 text

Measure twice. Optimize once.

Slide 86

Slide 86 text

Make a dashboard.

Slide 87

Slide 87 text

Things you can put in a dashboard

Slide 88

Slide 88 text

Speed Index Over Time

Slide 89

Slide 89 text

Speed Index Over Time And then draw lines where commits happen.

Slide 90

Slide 90 text

Speed Index Over Time And then draw lines where commits happen. And then link to the diff between tests

Slide 91

Slide 91 text

image is of speedcurve.com

Slide 92

Slide 92 text

Things you can put in a dashboard

Slide 93

Slide 93 text

Page Weight Over Time

Slide 94

Slide 94 text

Page Weight Over Time gzipped/ungzipped

Slide 95

Slide 95 text

Page Weight Over Time gzipped/ungzipped Broken down by filetype

Slide 96

Slide 96 text

Requests Over Time 0E+00 2.5E+01 5E+01 7.5E+01 1E+02

Slide 97

Slide 97 text

Errors There are lots of great companies that will help you do this these days.

Slide 98

Slide 98 text

Build Time Over Time

Slide 99

Slide 99 text

Speed of tools. usually build

Slide 100

Slide 100 text

Rule #1

Slide 101

Slide 101 text

The time between making a change, and seeing it in your app must approach 0.

Slide 102

Slide 102 text

Rule #2

Slide 103

Slide 103 text

Never do anything twice.

Slide 104

Slide 104 text

AKA “Cache Everything”

Slide 105

Slide 105 text

(feel free to do two things at the same time though)

Slide 106

Slide 106 text

Speed of development.

Slide 107

Slide 107 text

Speed of development. AKA Developer Happiness

Slide 108

Slide 108 text

Spare no expense.

Slide 109

Slide 109 text

Take the time to make source maps work.

Slide 110

Slide 110 text

There should be one easy command to get everything to work.

Slide 111

Slide 111 text

There should be one easy command to get everything to work. Vagrant can help with environments

Slide 112

Slide 112 text

Turn on LiveReload

Slide 113

Slide 113 text

Implement Lifecycle Logging

Slide 114

Slide 114 text

Set a calendar reminder to update your dependencies

Slide 115

Slide 115 text

Have a rigorous Style Guide that everyone follows, and that robots yell about. Lint!

Slide 116

Slide 116 text

If we take care to build robust tools around these FEOps ideals, ! developers will need to master less, and will be able to focus on users more.

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

Let’s make fast, measurement driven, easily-maintained web applications the starting point.

Slide 119

Slide 119 text

Thanks @slexaxton