Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FrontendOps - Giamir Buoncristiani

255 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

FrontendOps - Giamir Buoncristiani

  1. 1. GIAMIR BUONCRISTIANI @giamir FRONTENDOPS
  2. 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. 3. Modern Frontend Industry Learnings FrontendOps A JOURNEY TOWARDS FRONTENDOPS
  4. 4. How did Frontend development evolve in the last 20 years?
  5. 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. 6. 1995 2018 Complexity WEB UI
  7. 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. 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. 9. What is required to build complex web interfaces without compromising user experience?
  10. 10. Modern Frontend Industry Learnings A JOURNEY TOWARDS FRONTENDOPS
  11. 11. THE RISE OF MICROSERVICES Team Autonomy Team Maturity requires
  12. 12. MICROSERVICES PREREQUISITES from martinfowler.com
  13. 13. How this relates to the Frontend Operations space?
  14. 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. 15. What is required to build complex web interfaces without compromising user experience?
  16. 16. FRONTENDOPS CULTURE
  17. 17. Modern Frontend Industry Learnings FrontendOps A JOURNEY TOWARDS FRONTENDOPS
  18. 18. TASK EXECUTION & DEPS MANAGEMENT TASK & DEPS
  19. 19. TRANSPILATION TASK & DEPS TRANSPILATION
  20. 20. BUNDLING TASK & DEPS TRANSPILATION BUNDLING
  21. 21. OPTIMIZATION TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION
  22. 22. LINTING & FORMATTING TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION LINT & FORMAT
  23. 23. TESTING & MONITORING TASK & DEPS TRANSPILATION BUNDLING OPTIMIZATION LINT & FORMAT TEST & MONITOR
  24. 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. 25. WHAT IS FRONTEDOPS?
  26. 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. 27. THANK YOU For questions or suggestions: Giamir Buoncristiani @giamir

×