This document discusses micro-frontends, which involve splitting large user interfaces into smaller web modules and components that can be developed independently. It outlines several approaches to implementing micro-frontends including routing, iframes, micro-apps, pure components, and web components. Frameworks like Single SPA and Luigi are also presented as tools to help make micro-frontend development easier.

1. WHAT
IS
MICRO -
FRONTEND?

2. Hello!
I’m Miguel Teheran
Senior developer. Always
learning.
You can find me at:
@Mteheran

3. Why learn this
concept?
Technologies change, but the
concept doesn’t.

4. MICRO SERVICES
Splitting large and complex applications into
smaller components with a single function

5. MICRO Frontend
Splitting large UIs into smaller web modules
and web components
Logo Header
Menu ContentSection Section

6. Principles
○ Stand-alone run
○ Independent development
○ Stand-alone deployment

7. Approaches
○ Routing
○ iFrame
○ Micro-apps
○ Pure components
○ Web components

8. Routing
○ Each route is a different project
○ Use HTTP server routing to redirect
multiple apps
○ Easy implementation
○ Independent development

9. Routing
Menu 1 - /myapp/menu1
Menu 2 - /myapp/menu2
Menu 3 - /myapp/menu3

10. iFrame
○ Embedded modules and projects
○ Easy to implement
○ Complex to maintain
○ Very useful in legacy projects

11. Legacy project example
Old technologies working with React.js

12. Micro-Apps
○ Fast distributed development
○ Challenging integration
○ Few reusable components
○ Independent development

13. Micro-Apps Examples:

14. Pure components
○ Javascript functions
○ Internal libraries
○ Npm, unpkg, etc.
○ Advanced JS knowledge is required

15. Web components
○ High complexity
○ Teams must be coordinated
○ Standard UI
○ Communication between components is
a big deal
○ Advanced JS knowledge is required

17. Frameworks make
life EASY
Frameworks for micro-frontend are coming.

18. 1.
Single SPA
A Javascript framework for
frontend microservices
https://single-spa.js.org/

19. 2.
Luigi
The enterprise-ready micro-
frontend framework
https://luigi-project.io/

20. 3.
Mooa
A independent-deployment micro-
frontend framework for Angular from
Single SPA
https://github.com/phodal/mooa

21. THANKS!
You can find me at:
@Mteheran

22. CREDITS
Special thanks to all the people who made and released these awesome
resources for free:
○ Presentation template by SlidesCarnival
○ Photographs by Unsplash