The document discusses the concept of micro-frontends, an architectural style for building web applications that allows multiple teams to develop independently deployable frontend applications. It covers the advantages and disadvantages of micro-frontends, such as technology agnosticism and development complexity, as well as the integration methods like build-time integration and webpack module federation. The conclusion emphasizes creating autonomous teams and organizing micro-frontends around business functionality while cautioning against unnecessary complexity.

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

9. Nowadays - Microservices

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!