1.
GIAMIR BUONCRISTIANI
@giamir
FRONTENDOPS

2.
"We have reached a point where there is enough work
to be done in the [front-end] operations space [that] a
front-end operations engineer is […] a title you will be
likely come across."
ALEX SENTON
The Front-end operations engineer
Smashing Magazine, Jun 2013

3.
Modern
Frontend
Industry
Learnings
FrontendOps
A JOURNEY TOWARDS FRONTENDOPS

4.
How did Frontend development
evolve in the last 20 years?

5.
1995
2018
1995
2018
Static
w
eb
pages
D
ynam
ic
w
eb
pages
(anim
ation, …)
Async
w
eb
pages
(AJAX)
Single
page
apps
(SPA)
Progressive
w
eb
apps
(PW
A)

6.
1995
2018
Complexity
WEB UI

7.
PARTITIONING COMPLEXITY
UN IVERSAL M O N O LITH
FRO N TEN D M O N O LITH
SERVICE
A
SERVICE
A
SERVICE
C
AGGREGATIO N LAYER
SERVICE
A
SERVICE
A
SERVICE
C
PAGE CO M PO SITIO N LAYER
FRO N T
A
FRO N T
B
FRO N T
C
SSR VIEW

8.
Serving
uncom pressed
w eb assets
Generating
unm inified
production
bundles
Serving
unoptim ized
im ages
O ver
transpiling
and over
polyfilling
Serving
render-
blocking
assets
Generating
m assive god-
bundles
M issing a
cache-busting
strategy
MODERN FRONTEND PITFALLS

9.
What is required to build complex web
interfaces without compromising user
experience?

10.
Modern
Frontend
Industry
Learnings
A JOURNEY TOWARDS FRONTENDOPS

11.
THE RISE OF MICROSERVICES
Team
Autonomy
Team
Maturity
requires

12.
MICROSERVICES PREREQUISITES
from martinfowler.com

13.
How this relates to the Frontend
Operations space?

14.
A PROBLEM OF CULTURE
Frontend is often dismissed even at the most technologically progressive companies
…dividing between frontend and backend detracts
from building fast-moving, competitive teams and
companies…

15.
What is required to build complex web
interfaces without compromising user
experience?

16.
FRONTENDOPS CULTURE

17.
Modern
Frontend
Industry
Learnings
FrontendOps
A JOURNEY TOWARDS FRONTENDOPS

18.
TASK EXECUTION &
DEPS MANAGEMENT
TASK & DEPS

19.
TRANSPILATION
TASK & DEPS TRANSPILATION

20.
BUNDLING
TASK & DEPS TRANSPILATION BUNDLING

21.
OPTIMIZATION
TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION

22.
LINTING & FORMATTING
TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION LINT & FORMAT

23.
TESTING & MONITORING
TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION LINT & FORMAT TEST & MONITOR

24.
DEVELOPER EXPERIENCE
// package.json
...
"dependencies": {
"toolbox-scripts": "1.1.4"
},
”scripts": {
"build": "toolbox-scripts build"
}
...
1.1.5
TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION LINT & FORMAT TEST & MONITOR DEV EXPERIENCE

25.
WHAT IS FRONTEDOPS?

26.
"FrontendOps is a combination of practices and tools that makes delivering
optimised web assets more efficient.
A FrontendOps culture enables teams to ship new UI features at a fast pace
with the confidence of not compromising user experience."

27.
THANK YOU
For questions or suggestions:
Giamir Buoncristiani
@giamir