In this presentation Giamir will describe what modern frontend work looks like. He will talk about why compilers seem to be the new generation of frontend frameworks. He will highlight common pitfalls in building and serving web assets, and present a set of concrete practices teams can adopt to provide the best user experience while keeping most of their autonomy. All of the above to draw one conclusion: teams require a FrontendOps culture to succeed in the era of Microfrontends.

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

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

11. Modern
Frontend
Industry
Learnings
A JOURNEY TOWARDS FRONTENDOPS

12. THE RISE OF MICROSERVICES
Team
Autonomy
Team
Maturity
requires

13. MICROSERVICES PREREQUISITES
from martinfowler.com

14. How this relates to the Frontend
Operations space?

15. 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…

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

17. FRONTENDOPS CULTURE

18. Modern
Frontend
Industry
Learnings
FrontendOps
A JOURNEY TOWARDS FRONTENDOPS

19. TASK EXECUTION &
DEPS MANAGEMENT
TASK & DEPS

20. TRANSPILATION
TASK & DEPS TRANSPILATION

21. BUNDLING
TASK & DEPS TRANSPILATION BUNDLING

22. OPTIMIZATION
TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION

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

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

25. 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

26. WHAT IS FRONTEDOPS?

27. "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."

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