![“[…]think about a website or web app
as a composition of features which
are owned by independent teams.
-Michael Geers](https://image.slidesharecdn.com/stateofmicrofrontend-180914223332/85/State-of-Micro-Frontend-19-320.jpg)
![“Each team has a distinct area of
business or mission it cares about
and specialises in. A team is cross
functional and develops its features
end-to-end[…].
-Michael Geers](https://image.slidesharecdn.com/stateofmicrofrontend-180914223332/85/State-of-Micro-Frontend-22-320.jpg)
State of Micro Frontend
- 1. STATE OF MICRO FRONTEND a brief adventure
- 3. 👶"=>#🤓 ⚽🏓'⛰🍻
- 9. JS MODULES
- 10. BUNDLERS
- 11. COMPONENTS
- 12. FRONTEND DEVELOPMENT Organized Modules, Components Optimised Tree Shaking, Minify, Code Splitting, Dynamic Module Loader Productive Bundlers, Vendors Modules, CLI
- 14. BUT IF… 🍄 App grown up 🍄 Team grown up New ✨shiny✨ lib released
- 17. MICRO FRONTEND Technology Radar (https://www.thoughtworks.com/radar/techniques)
- 18. MICRO FRONTEND Michael Geers (https://micro-frontends.org/)
- 19. “[…]think about a website or web app as a composition of features which are owned by independent teams. -Michael Geers
- 20. MICRO FRONTEND
- 21. MICRO FRONTEND UI as a feature composition
- 22. “Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end[…]. -Michael Geers
- 24. MICRO FRONTEND FrontendBackendDatabase CheckoutTeam SearchTeam ProductTeam InspireTeam End-to-end teams organisation
- 26. Independent Deploy Reduced Scope Reusability Separate Teams Code Isolation Scalability Optimised Bundle Difficult UX Shared libs Complex Architecture
- 28. MICRO FRONTEND A software architect's approach towards using Angular (and SPAs in general) for microservices aka microfrontends
- 29. ARCHITECTURAL CANDIDATES Monorepo Packages Code Level Integration Hyperlink MFE Page IFrames Plugins Web Components Multiple SPA Dynamic MFE Loading
- 30. ARCHITECTURAL GOALS Tree Shaking Shared libs Optimised bundle Optimisation Separate deployment Separate development Runtime Isolation Isolation Multiple MFE on page Single Page Shell Support Different Frameworks Prevent version conflicts Flexible
- 31. Monorepo IFrames Plugins Packages Hyperlink Web Components Multiple SPA EVALUATION Optimisation Isolation Flexible
- 32. USE CASES who is using?
- 33. ZALANDO PROJECT MOSAIC Zalando Project Mosaic (https://www.mosaic9.org/)
- 36. MICROSOFT OFFICE ADDINS Microsoft Office Add-ins (https://docs.microsoft.com/en-us/office/dev/add-ins/)
- 37. “No silver bullet. -Fred Brooks, 1986
- 38. QUESTIONS?
- 39. REFERENCES About Microfrontend ThoughtWorks Technology Radar (https://www.thoughtworks.com/radar/techniques/micro-frontends) Michael Geers (https://micro-frontends.org/) Elisabeth Engel slides (https://slides.com/elisabethengel/micro-frontends/) Collection of Microfrontend posts (https://micro-frontends.zeef.com/elisabeth.engel? ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc) Software Architects approach for Microfrontend (http://www.softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach- towards-using-angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx) Microsoft Office Add-ins (https://docs.microsoft.com/en-us/office/dev/add-ins/) Trials https://medium.com/@_rchaves_/building-microfrontends-part-i-creating-small-apps-710d709b48b7 https://hackernoon.com/front-end-microservices-with-web-components-597759313393 https://medium.com/onfido-tech/micro-frontends-at-onfido-the-component-chimera-32212214408e https://www.softwarearchitekt.at/post/2018/08/19/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web- components.aspx Frameworks Zalando Project Mosaic (https://www.mosaic9.org/) PuzzleJs (https://github.com/puzzle-js/PuzzleJs) single-spa (https://single-spa.js.org/)