Scribd
Upload
111 views

What IS - Frontend?: Micro

This document discusses micro-frontends, which involve splitting large user interfaces into smaller modular web components or applications. It describes various approaches to implementing micro-frontends such as routing, iframes, micro-apps, pure components, and web components. It also discusses principles of micro-frontends like stand-alone development and deployment. Finally, it introduces some JavaScript frameworks that can help with building micro-frontends like Single SPA, Luigi, and Mooa.

Uploaded by

Mihai Tiberiu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
111 views

What IS - Frontend?: Micro

This document discusses micro-frontends, which involve splitting large user interfaces into smaller modular web components or applications. It describes various approaches to implementing micro-frontends such as routing, iframes, micro-apps, pure components, and web components. It also discusses principles of micro-frontends like stand-alone development and deployment. Finally, it introduces some JavaScript frameworks that can help with building micro-frontends like Single SPA, Luigi, and Mooa.

Uploaded by

Mihai Tiberiu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

WHAT

IS
MICRO -
FRONTEND?
Hello!
I’m Miguel Teheran

Senior developer. Always


learning.

You can find me at:


@Mteheran
Why learn this
concept?

Technologies change, but the


concept doesn’t.
MICRO SERVICES
Splitting large and complex applications into
smaller components with a single function
Logo Header

Menu Section Content Section

MICRO Frontend
Splitting large UIs into smaller web modules
and web components
Principles

○ Stand-alone run

○ Independent development

○ Stand-alone deployment
Approaches

○ Routing
○ iFrame
○ Micro-apps
○ Pure components
○ Web components
Routing

○ Each route is a different project


○ Use HTTP server routing to redirect
multiple apps
○ Easy implementation
○ Independent development
Routing

Menu 1 - /myapp/menu1

Menu 2 - /myapp/menu2

Menu 3 - /myapp/menu3
iFrame

○ Embedded modules and projects


○ Easy to implement
○ Complex to maintain
○ Very useful in legacy projects
Legacy project example
Old technologies working with React.js
Micro-Apps

○ Fast distributed development


○ Challenging integration
○ Few reusable components
○ Independent development
Micro-Apps Examples:
Pure components

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

○ High complexity
○ Teams must be coordinated
○ Standard UI
○ Communication between components is
a big deal
○ Advanced JS knowledge is required
Frameworks make
life EASY

Frameworks for micro-frontend are coming.


1.
Single SPA

A Javascript framework for


frontend microservices

https://single-spa.js.org/
2.
Luigi

The enterprise-ready micro-


frontend framework

https://luigi-project.io/
3.
Mooa

A independent-deployment micro-
frontend framework for Angular from
Single SPA
https://github.com/phodal/mooa
THANKS!
You can find me at:
@Mteheran
CREDITS

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

You might also like