Download as PDF, PPTX
![“[…]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/75/State-of-Micro-Frontend-19-2048.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/75/State-of-Micro-Frontend-22-2048.jpg)
More Related Content
Similar to State of Micro Frontend
State of Micro Frontend
- 1. STATE OF MICROFRONTEND a brief adventure
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. FRONTEND DEVELOPMENT Organized Modules, Components Optimised TreeShaking, Minify, Code Splitting, Dynamic Module Loader Productive Bundlers, Vendors Modules, CLI
- 14. BUT IF… 🍄 App grown up 🍄 Team grownup New ✨shiny✨ lib released
- 16.
- 17. MICRO FRONTEND Technology Radar(https://www.thoughtworks.com/radar/techniques)
- 18. MICRO FRONTEND Michael Geers(https://micro-frontends.org/)
- 19. “[…]think about awebsite or web app as a composition of features which are owned by independent teams. -Michael Geers
- 20.
- 21. MICRO FRONTEND UI asa feature composition
- 22. “Each team hasa 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
- 23.
- 24.
- 25.
- 26. Independent Deploy Reduced Scope Reusability SeparateTeams Code Isolation Scalability Optimised Bundle Difficult UX Shared libs Complex Architecture
- 27.
- 28. MICRO FRONTEND A softwarearchitect's approach towards using Angular (and SPAs in general) for microservices aka microfrontends
- 29. ARCHITECTURAL CANDIDATES Monorepo Packages Code LevelIntegration Hyperlink MFE Page IFrames Plugins Web Components Multiple SPA Dynamic MFE Loading
- 30. ARCHITECTURAL GOALS Tree Shaking Sharedlibs 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.
- 32. USE CASES who isusing?
- 33. ZALANDO PROJECT MOSAIC ZalandoProject Mosaic (https://www.mosaic9.org/)
- 34.
- 35.
- 36. MICROSOFT OFFICE ADDINS MicrosoftOffice Add-ins (https://docs.microsoft.com/en-us/office/dev/add-ins/)
- 37. “No silver bullet. -FredBrooks, 1986
- 38.
- 39. REFERENCES About Microfrontend ThoughtWorks TechnologyRadar (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/)