Micro frontends is an architectural approach that breaks large web applications into smaller independent applications. This allows individual modules to be developed, tested, and deployed independently while still being combined into a single app. The benefits include incremental upgrades, reduced communication overhead, and allowing autonomous teams. However, challenges include increased payload size and operational complexity. Frameworks like Single-spa and Frint help implement micro frontends by routing between modules.

1. ‘Micro Frontends’
Micro App
Micro App Micro App
By Om Singh Build-Test-Deploy in Isolation
Modern Front-end Engineering

2. Domain driven design approach.
Extending the microservices architecture
pattern to
Frontend-development.
What is Micro Frontends ?

3. History of web frameworks timeline

4. The Traditional Approach

6. The Micro Frontends approach

7. Vanilla Architecture

8. Why micro frontends?
Because traditional
approach doesn’t
work for larger
web apps
Tip
Micro-frontend is an
architecture pattern.
"An architectural style
where independently
deliverable frontend
applications are composed
into a greater whole"

9. Thoughtworks Technology Radar
2016-2017 2017-2018-2019-2020
Nov 2016 Mar 2017
Assess
Nov 2017 May 2018
Trail
April 2019 Nov 2019
Adopt
May 2020
Adopt
https://www.thoughtworks.com/radar/techniques/micro-frontends

10. Benefits

11. Benefits
★ Incremental upgrades
★ Simple, decoupled codebases
★ Reducing communication overhead
★ Independent deployment != Independent release
★ Autonomous Teams
★ Freedom to innovate

12. Independent deployment

13. Autonomous Teams

14. ★ Should solve specific business problem
★ Reusable smaller app/fragment/component
★ Micro app should be independent and
isolated
★ Minimum dependencies
★ Technology or framework agnostic
★ Easier to understand, develop, test and
deploy
★ Faster and reliable CI/CD
Micro Frontends Core Principles

15. Downsides

16. Downsides
★ Payload Size due to library but Module federation
★ Redundant codebase
★ Environment differences
★ Operational and governance complexity
★ No standard framework but
https://opencomponents.github.io/ is interesting

17. How To Migrate

18. How to migrate legacy App
Stitching Layer - Having Header, Navigation and Footer
Monolith App
Product
Search
Checkout
Product
App
Search
App
Checkout
App
Step-1
Step-2
Step-3 Step-4 Step-5

19. Problems to solve

21. Problems to solve
★ How to compose stitching layer
★ Cross-application communication
★ Backed communication
★ Testing
★ Common/shared content
★ Infrastructure
★ Consistent theme/style

22. Backend communication

23. Implementation

24. Frameworks to implement
Server Side Frameworks
SSI (Server Side Includes)
Varnish ESI (Edge Side Includes)
Tailor - https://github.com/zalando/tailor
Client Side Frameworks
Single-spa - https://single-spa.js.org/
Frint JS - https://frint.js.org/
<iframe>

25. Zalando’s solution
It is called the Project Mosaic9
https://www.mosaic9.org/

26. Demo

27. Single-Spa
A javascript router for front-end microservices
See a short video on Single-Spa

29. Whether micro frontends are the right approach for you and
your organization or not depends on problem you’re trying to
solve.
Don’t use this if you have a simple app. It should make your
life easier not complicated. It also doesn’t mean to use every
framework in the world. Don’t forget to use core principles.
Conclusion

30. Q&A
Thank you for joining us, see you next sunday!

31. Thank you