The Power of
Micro-Frontend
Developing apps into
smaller components
Seiji Villafranca
github.com/SeijiV13
Seiji Villafranca
github.com/SeijiV13
Senior Software Engineer, KPN Netherlands
Microsoft MVP
Book Author
Community Lead, AngularPH,
seijivillafranca.com
Talks
Wait What???
What the ***** is MicroFrontend
Micro
"Micro" means small
Services
FrontEnd
"micro web services" was first used by Dr. Peter Rogers in 2005
A developed architecture which is intended to solve the monolithic maintainability dilemma
early companies who adapted microservice architecture
Micro
What does it "Solve"
Services
Monolithic Architecture
the common thing we "do"
App1
A big chunk of App with a single repository or codebase
service 1
service 2
service 2
The Monolithic Issue
Well, we know it's a single codebase
A big chunk of App with a single repository or codebase
Application 1
- Debugging
- Maintainability
- Tight Coupling
- Deployment and Restart times
- Less reusability
Code Change (Has errors)
All code are affected
The Solution
The Monolithic Issue
Smaller Fine Components
Single Responsibility Principle
S1
S2
S3
S4
Client
Common Design Patterns
API
Gateway
Service
Service
Service
Service
Orchestration
Microservice
Storage
Client
Common Design Patterns
API
Gateway
Service
Service
Service
Service
Microservice
Storage
Event Bus
MicroFrontends
first came up in ThoughtWorks Technology Radar at the end of 2016
Microservice concepts going into frontend world
- Micro Frontends is to develop a web app into a composition of features which are owned by independent teams
Well idea is not new, it has a lot in common with Self Contained Systems
MicroFrontends
The Monolithic Structure
MicroFrontends
Frontend with Verticals
MicroFrontends
Client
API
Gateway
Service
Service
Service
Service
Orchestration
MF4
MF3
MF2
MF1
Orchestration
Design Pattern
MicroFrontends
What are the goals
- Technology Agnostic
- Team Code Isolation
- Establish Team Prefixes
Is microfrontend feasible on top and latest frameworks?
YES!!
MicroFrontend Implementations
- Iframes
- Web Components (Angular Elements)
- Angular Libraries
- Monorepos
- Customized Orchestrators
- Module Federation
MicroFrontend Implementations
Bit.Dev
MicroFrontend Implementations
Microfrontend Frameworks
MicroFrontend Implementations
Helps us publish Angular components as custom elements. It does this by taking the Angular component and compiling it into a web component
Angular Elements
Angular Elements
CI/CD
build/js concat
element (js file)
Angular Code
CI/CD
react/vue pipelines
MicroFrontend Implementations
framework for bringing together multiple JavaScript micro frontends in a frontend application, can be used also in different js frameworks
MicroFrontend Implementations
The container App — single-SPA-root-config
basically the whole application.
Micro frontend Applications
Single-page applications are packaged up into modules and combine with the container app. Angular Vue React etc.
Composition
MicroFrontend
Architecture
Build Pipelines
Production
MF A
MF B
MF C
MicroFrontend
Lifecycle
frontend framework that implements single-spa comprises of 3 lifecycle methods:
bootstrap(): method to instantiate the application.
mount(): method to load the UI on the parent layer.
unmount(): method to unload the UI from the parent layer.
MicroFrontend
How to enable into the root app?
singleSpa.registerApplication()...
singleSpa.start()...
MicroFrontend
The power of cli
npm install -g create-single-spa
MicroFrontend
Is it really useful?
- Code Isolation
- Less dependent
- Maintainability
- Reduce Production Issues
MicroFrontend
Yeah it also has its disadvantages
- Additional Setup
- Orchestration - the finer the structure the harder the orchestration
"With great power comes from great responsibility"
