Micro-frontends – is it a new normal?
- 1. Micro-frontends – is it a new normal?
- 2. • Maksym Bielkin • Delivery Manager & JavaScript Team Lead • 10+ years in IT • Father of 3 sons Introduction
- 3. • Web applications architecture overview • Micro-frontend approach • How to start • Communication and sharing • Monorepo vs Multirepo • Our way Agenda
- 4. “Software architecture is those decisions which are both important and hard to change” Martin Fowler Software Architecture
- 5. ~2000th – Era of Full-stack
- 6. Example
- 7. ~2010th – Era of Single Responsibility
- 10. Microservices - also known as the microservice architecture - is an architectural style that structures an application as a collection of services that are: What are Microservices? https://microservices.io/ • Highly maintainable and testable • Loosely coupled • Independently deployable • Organized around business capabilities • Owned by a small team
- 11. What are Micro-frontends then? • Techniques, strategies and recipes for building a modern web-app with multiple teams using different JavaScript frameworks • An architectural style where independently deliverable frontend applications are composed into a greater whole • Collection of features for a web-app which have being owned by different teams with different stacks of technologies.
- 12. Newest History
- 13. What is the point?
- 14. Who already uses micro-frontends? • Google • Microsoft • Facebook • IKEA • Upwork • Spotify • Starbucks • Leroy Merlin • ….
- 15. Interesting Fact
- 16. Advantages • Being technology agnostic • Loosely coupled applications • Independently deployable • Owned by a small team • Faster and more reliable release cycles
- 17. Disadvantages? • Development mind change • Compexity • No standard yet – the bunch of options • Not so popular yet • Extra-complication of the code for integration • Being technology agnostic – possible overhead
- 18. When to use Micro-frontends? • Complex business logic in the current monolith frontend • Distributed teams • When need to restructure your legacy systems • 5+ small apps to be shown on the same page
- 19. Micro-frontends General Concepts • Application shell • Micro-frontend application • Event-bus
- 20. Event-Bus • postMessages • Custom events • RxJS
- 21. How to Add Micro-frontend to the App? • Build-time integration • Iframes • Webpack Module Federation • Web Components • …
- 22. Build-time Integration • Each micro-frontend is a package • Package is integrated to the Application Shell • Application is built and deployed
- 23. Iframes • The fastest way • Absolute isolation • Sharing data between applications are more challangeable • Sharing cookies and styles have some restrictions • Performance could suffer
- 24. Webpack Module Federation • Sharing the code with different applications • Uses webpack-builds https://webpack.js.org/concepts/module-federation/
- 25. Web Components. Custom elements https://medium.com/swlh/micro-frontend-using-web-components-e9faacfc101b
- 28. How to split your Monolith?
- 29. Monorepo vs Multirepo • Monorepo • Single repository • Additional agreements • Popular practice • Multirepo • Many repositories • Normal style of work • Additional actions to deploy (import maps)
- 30. Import maps
- 31. The Way We Chose • Initials • Huge legacy project (10+ years in background) • Several indepentent apps integrated • 3 teams involved • ~500k JS lines • Decision • Micro-frontends with app shell • Multirepos • Shared components library • Webpack Module Federation
- 32. Conclusion ✅ Try to create autonomous teams. ✅ Try to arrange your Micro-Frontends around business functionality. ✅ Reusability is a nice “side effect” not the target. ❌ Don’t Force this architectural style just because it is “new”. ❌ You don’t need multiple JavaScript frameworks. ❌ You don’t need a “micro-frontend framework”. ❌ Micro-Frontends don’t have to be “micro”. Micro-frontends approach is not a silver bullet but a really powerful tool
- 33. Thank You!