Micro Frontends University of São Paulo USPCodeLab 1. July 2021 Michael Geers

Breaking up the Monolith

Ne w Tren d presented by The Frontend Monolith

popular architectures nowadays Michael Geers / @naltatis

Micro Frontends

Michael Geers frontend engineer naltatis Twitter & GitHub author of the book Micro Frontends in Action and the website micro-frontends.org building tailored e-commerce systems

The Agenda 🧙 What? 🧚 Why? 👩🏭 How? 🤹 Related Stuff

🧙 What are micro frontends?

Nov. 2016 2017 2019 source: ThoughtWorks Technology Radar

A De fi nition 1/3 Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. … source: ThoughtWorks Technology Radar Michael Geers / @naltatis

A De fi nition 1/3 Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. … source: ThoughtWorks Technology Radar Michael Geers / @naltatis

cutting

pages & fragments* * aka includable Micro Frontends, Podlets, Parcels, Pilets, … Michael Geers / @naltatis

teams can own one or more pages 2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Michael Geers / @naltatis

Team Decide Team Inspire Team Checkout Fragment Fragment Page fragments are embedded mini-applications Michael Geers / @naltatis

A De fi nition 2/3 Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. … source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Team Missions Michael Geers / @naltatis

Cross Functional Teams ux/design, frontend backend, data science, ops Self-Contained Systems separate applications that don’t rely on each other End-to-End Responsibility from user interface to database Independent Teams & Systems Michael Geers / @naltatis like a chunky microserivce, but with its own UI

stream-aligned teams book recommendation about structuring your organisation’s teams & systems Michael Geers / @naltatis

each team ships user interface Michael Geers / @naltatis

A De fi nition 3/3 Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. … source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Independent Deployments Michael Geers / @naltatis

Real World Projects

Klingel Group 5 teams from 4 software companies 
 15 brands, 12 countries, ~65 shops

Team Search category page Team Checkout mini basket Team Decide wishlist Team Account login status 
 feedback 
 support Team Inspire promotion 
 inspiration Michael Geers / @naltatis

Team Search navigation Team Checkout mini basket Team Decide wishlist product page Team Account login status 
 feedback 
 support Team Inspire promotion Michael Geers @naltatis

Team Checkout new basket entry Team Decide add-to-cart layer Team Inspire recommendations

Team Checkout login page Team Inspire recommendations Team Account feedback 
 support Michael Geers / @naltatis

PayPal

PayPal Egnineering Blog PayPal Michael Geers / @naltatis

Who uses micro frontends? logos link to the sources Michael Geers / @naltatis

👩🏭 How can they be implemented?

putting it back together

What needs to be integrated? Michael Geers / @naltatis

Spotify web player (until early 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/ composition with iframes Michael Geers / @naltatis

buy for 66 € 0 items 0 items

Tractor

buy for 66 € server Team Decide reverse-proxy (nginx, …) server Team Checkout /red-tractor

Tractor

/checkout/basket /checkout/buy /red-tractor composition on the server 
 using SSI or ESI


 
 
 composition in the browser with custom elements Michael Geers / @naltatis

class InspireReco extends HTMLElement { constructor() {...} 
 connectedCallback() {...} 
 attributeChangedCallback(attr, oldVal, newVal) {...} 
 disconnectedCallback() {...} 
 } window.customElements.define(“inspire-reco“, InspireReco) is created attached to DOM removed from DOM, cleanup! someone changed an attribute create your own custom element

2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey page transitions using links Michael Geers / @naltatis

Linked Single Page Apps Uni fi ed Single Page App page transitions between SPAs Michael Geers / @naltatis

jobs of the application shell? ‣ central entry point for the user ‣ can load, start and stop all SPAs ‣ switches between SPAs if necessary Michael Geers / @naltatis

single-spa https://single-spa.js.org/ ‣ ready-to-use application shell ‣ most popular solution ‣ plugins for nearly all frameworks ‣ also supports composition Michael Geers / @naltatis

different forms of communication Michael Geers / @naltatis

API communication only inside a system Michael Geers / @naltatis

Michael Geers / @naltatis asynchronous replication between backends

🧚Why would I use micro frontends?

🥇 faster feature development …

three 8-person teams are more effective than one 24-person team Michael Geers / @naltatis

teams should be decoupled

Frontend Payment Service Content Service Operations Platform Business Attributes Service Specialist Teams Team Inspire Team Decide Team Checkout Cross Functional Teams grouped around a use case or customer need grouped around a skill or technology Michael Geers / @naltatis

Frontend Payment Service Content Service Operations Platform Business Attributes Service Specialist Teams Team Inspire Team Decide Team Checkout Cross Functional Teams grouped around a use case or customer need grouped around a skill or technology Developing a Features Meeting s waiting for others ⏳ Michael Geers / @naltatis

custome r focu s direct feedback no pure API teams

fronten d renovatio n without throwing everything away

technology change becomes a team decision Michael Geers / @naltatis

🤹 related stuff

avoid micro frontend anarchy 
 just because you can, doesn’t mean you should 🧀 🍩 🫐 🥦 🌶 🥓 🍆 🍟 🍊 🥖 Technology Radar #23 ‣ agree upon technologies ‣ make it easy to get started ‣ facilitate alignment across teams ‣ don’t over-regulate Michael Geers / @naltatis

🐌 performance

🚴 micro frontend sites can be very fast or slow - it’s mostly about good engineering all using a 
 micro frontends 
 architecture source: Textil Wirtschaft Analyses of loading performance (LCP) in German fashion e-commerce shops

🐘 🐘 🐘 reducing redundancy

smaller tools mean less redundancy larger runtime hyperapp small runtime 🐘 🦆 Michael Geers / @naltatis

reusing vendor libraries between systems with import maps with module federation A B C central library repository lib-1 lib-2 A B C lib-1 lib-2 peer-to-peer approach applications can reuse already loaded libraries from inside other applications applications can reference central libraries to reduce their bundle size ♻ https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md https://module-federation.github.io

🧫 testing & quality

testing in isolation fragments are self-contained they can work without a page context mock fragment this page works even without fragments from others majority of tests

more details on how to do it M A N N I N G Michael Geers Michael Geers / @naltatis my book

book examples the-tractor.store

need more? micro-frontends.org article by Cam Jackson article by Gustaf Nilsson Kotte 
 blogposts by Florian Rappl blogposts by Luca Mezzalira 👓 awesomelist by Rajasegar Chandran Michael Geers / @naltatis

thank you for listening! stay healthy Michael Geers / @naltatis

Low Top Turnschuhe Natã Romualdo 
 https://www.pexels.com/de-de/foto/braune-low-top- turnschuhe-2904284/ Monolith 1 Jeff Hendricks 
 https://unsplash.com/photos/yIKdc86jNBs Monolith 2 Rana Osman 
 https://unsplash.com/photos/JcSsu-NF3qo Buildings Juhasz Imre 
 https://www.pexels.com/photo/apartment-architecture- buildings-business-425047/ Metal Blade Russ Ward 
 https://unsplash.com/photos/aMlbxs8SYig Man Welding Metal Kateryna Babaieva 
 https://www.pexels.com/photo/man-welding- metal-2880871/ Action Bicycling Roman Pohorecki 
 https://www.pexels.com/photo/action-bicycling-bike- biking-287398/ Running Kids (me) The Tool Guy Tirachard Kumtanom 
 https://unsplash.com/photos/UuW4psOb388 Woodshop Igor Ovsyannykov 
 https://unsplash.com/photos/iXV0i4Wo4yc Tractors Manufactum 
 https://www.manufactum.com/tin-toys-c193667/ image credits built with micro frontends