Front-End OpsAlex Sexton | 2014
View Slide
A little under a yearlater…
Naming Things#hardCSproblems
Regressive Enhancement
Polyfill
Prollyfill
Parlayfill
Mollyfill
ANYWAYS
FEO
UGLY(in spanish)
FeOps
Iron Opscatchy
I pay theIron Pricefor lowerlatency
What is Front-End Ops?
“Some weird terms youinvented to describethings that don’t exist.”- John Edgar, Digital Ocean
First Of All
More Importantly…
That’s the whole point.
Serving webpagesis really hard.
that’s why we haveconferences for this stuff(jQConf, FEOpsConf)
Conferences ThatDon’t Exist
HTML &ENTITY; CONF
SundayMorningConf
Front-End Ops is the collectionof things you can do to makeserving webpages easier.opposite of harder
So you can focuson your product.
Mature FEOpsbenefits the peoplewho don’t have time tothink about this stuff.
Lots of folks agree!
So really what is it?
The AppEverythingElse
The AppEverythingElseFEOps™
Article Recap
“Front-End Ops Engineers are the bridge betweenan application’s intent and an application’s reality”
Why?
We’re collectively insane.
Why now?
Application logic is beingdeferred to the client side.
Performance Testing
Error Logging
Lifecycle Logging
Measurement over time
A Front-End Ops Engineerenables long-term progress
Performance is thefoundation on which userexperience is built.
A UX in the DOMis worth two on the wire.
Speed is the metricthat we measure by.
Speed of app.
Speed of tools.
Speed of development.
(all of these can bemeasured and tracked)
(all of these can bemeasured and tracked)((but it’s important to read the data right))
Speed up your appIn 5 Simple StepsHow To
Step 1forget everythingyou know becauseit’s wrong
Step 2it’s probablythe network
Step 3Probably Read Ilya’s book
Step 4measure
Step 5measure
1) Forget everything2) It’s probably the network3) Ilya’s book4) Measure5) MeasureRecap
Chrome DevToolsFlame Graphs, CPU Profiles, andRepaints/Reflows info are invaluable.
The limiting factor of yoursystem should be thespeed of light.Assuming you have Fiber
0 50 100 150 200THEORETICALGRAPHS
OS XAndroidiOSBlackberry1200ms0ms
1200ms0ms
Distribution of Load Time
Desktop Mobile
Two distinct loading curves
What you see when youadd them together.
ಠ_ಠ
Measurement
If I had to pick one partthat was most importantto FEOps, it’d be all of it
but #2 would beMEASUREMENT
Measure twice.Optimize once.
Make a dashboard.
Things you can putin a dashboard
Speed Index Over Time
Speed Index Over TimeAnd then draw lines where commits happen.
Speed Index Over TimeAnd then draw lines where commits happen.And then link to the diff between tests
image is of speedcurve.com
Page Weight Over Time
Page Weight Over Timegzipped/ungzipped
Page Weight Over Timegzipped/ungzippedBroken down by filetype
Requests Over Time0E+002.5E+015E+017.5E+011E+02
ErrorsThere are lots of greatcompanies that will help youdo this these days.
Build Time Over Time
Speed of tools.usually build
Rule #1
The time between makinga change, and seeing it inyour app must approach 0.
Rule #2
Never doanything twice.
AKA“Cache Everything”
(feel free to do two thingsat the same time though)
Speed of development.AKA Developer Happiness
Spare no expense.
Take the time to makesource maps work.
There should be one easycommand to geteverything to work.
There should be one easycommand to geteverything to work.Vagrant can help with environments
Turn on LiveReload
ImplementLifecycle Logging
Set a calendar reminder toupdate your dependencies
Have a rigorous Style Guidethat everyone follows, andthat robots yell about.Lint!
If we take care to build robust toolsaround these FEOps ideals,!developers will need to master less,and will be able to focus on users more.
Let’s make fast,measurement driven,easily-maintainedweb applicationsthe starting point.
Thanks@slexaxton
slexaxton
adavis
kawajiritakayuki
yayoi_dd
pauli
soracom
oracle4engineer
ikezoemakoto
saboyutaka
line_developers
gl_tsukasa
yosuke_furukawa
masakamayama
addyosmani
bkeepers
eileencodes
danielanewman
mthomps
speakerdeck
yeseniaperezcruz
jacobian
chriscoyier
destraynor
marcduiker
philnash