Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-End Ops - jQuery Conf Chicago 2014
Search
Alex Sexton
September 13, 2014
Technology
1
1k
Front-End Ops - jQuery Conf Chicago 2014
Alex Sexton
September 13, 2014
Tweet
Share
More Decks by Alex Sexton
See All by Alex Sexton
Your Very Own Component Library
slexaxton
5
740
Hacking Front-End Apps
slexaxton
3
2.4k
Practicing Safe Script
slexaxton
18
2.9k
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
140
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
roppongirb_20250911
igaiga
1
250
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
540
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
390
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
590
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Why Our Code Smells
bkeepers
PRO
339
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fireside Chat
paigeccino
39
3.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Transcript
Front-End Ops Alex Sexton | 2014
None
A little under a year later…
None
Naming Things #hardCSproblems
Regressive Enhancement
Polyfill
Prollyfill
None
None
Parlayfill
Mollyfill
ANYWAYS
Front-End Ops Alex Sexton | 2014
FEO
UGLY (in spanish)
FeOps
None
Iron Ops catchy
I pay the Iron Price for lower latency
What is Front-End Ops?
None
“Some weird terms you invented to describe things that don’t
exist.” - John Edgar, Digital Ocean
None
First Of All
More Importantly…
That’s the whole point.
Serving webpages is really hard.
that’s why we have conferences for this stuff (jQConf, FEOpsConf)
Conferences That Don’t Exist
HTML &ENTITY; CONF
SundayMorningConf
Front-End Ops is the collection of things you can do
to make serving webpages easier. opposite of harder
So you can focus on your product.
None
Mature FEOps benefits the people who don’t have time to
think about this stuff.
Lots of folks agree!
So really what is it?
The App Everything Else
The App Everything Else FEOps™
Article Recap
“Front-End Ops Engineers are the bridge between an application’s intent
and an application’s reality”
Why?
We’re collectively insane.
None
Why now?
Application logic is being deferred to the client side.
Performance Testing
Error Logging
Lifecycle Logging
Measurement over time
A Front-End Ops Engineer enables long-term progress
Performance is the foundation on which user experience is built.
A UX in the DOM is worth two on the
wire.
Speed is the metric that we measure by.
Speed of app.
Speed of tools.
Speed of development.
None
(all of these can be measured and tracked)
(all of these can be measured and tracked) ((but it’s
important to read the data right))
Speed of app.
Speed up your app In 5 Simple Steps How To
Step 1 forget everything you know because it’s wrong
Step 2 it’s probably the network
Step 3 Probably Read Ilya’s book
Step 4 measure
Step 5 measure
1) Forget everything 2) It’s probably the network 3) Ilya’s
book 4) Measure 5) Measure Recap
Chrome DevTools Flame Graphs, CPU Profiles, and Repaints/Reflows info are
invaluable.
The limiting factor of your system should be the speed
of light. Assuming you have Fiber
0 50 100 150 200 THEORETICAL GRAPHS
OS X Android iOS Blackberry 1200ms 0ms
1200ms 0ms
1200ms 0ms
Distribution of Load Time
Desktop Mobile
Two distinct loading curves
What you see when you add them together.
ಠ_ಠ
Measurement
Measurement
If I had to pick one part that was most
important to FEOps, it’d be all of it
but #2 would be MEASUREMENT
Measure twice. Optimize once.
Make a dashboard.
Things you can put in a dashboard
Speed Index Over Time
Speed Index Over Time And then draw lines where commits
happen.
Speed Index Over Time And then draw lines where commits
happen. And then link to the diff between tests
image is of speedcurve.com
Things you can put in a dashboard
Page Weight Over Time
Page Weight Over Time gzipped/ungzipped
Page Weight Over Time gzipped/ungzipped Broken down by filetype
Requests Over Time 0E+00 2.5E+01 5E+01 7.5E+01 1E+02
Errors There are lots of great companies that will help
you do this these days.
Build Time Over Time
Speed of tools. usually build
Rule #1
The time between making a change, and seeing it in
your app must approach 0.
Rule #2
Never do anything twice.
AKA “Cache Everything”
(feel free to do two things at the same time
though)
Speed of development.
Speed of development. AKA Developer Happiness
Spare no expense.
Take the time to make source maps work.
There should be one easy command to get everything to
work.
There should be one easy command to get everything to
work. Vagrant can help with environments
Turn on LiveReload
Implement Lifecycle Logging
Set a calendar reminder to update your dependencies
Have a rigorous Style Guide that everyone follows, and that
robots yell about. Lint!
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.
None
Let’s make fast, measurement driven, easily-maintained web applications the starting
point.
Thanks @slexaxton