Adam L Barrett PRO
Adam L Barrett is a JavaScript and Front-End consultant, a contributor to open source, and avid bike-shedder.
Micro Frontends
The Age of
Micro Frontends
Web Developers
Tech
Companies
What are Micro Frontends?
- What are Micro frontends?
- What problem do they solve?
- Pitfalls / Tradeoffs
- Tools you can use
Micro Frontends
Micro Frontends
The natural continuation of
Micro Services to create vertical slices of functionality
Microservices
Micro Frontends
API Endpoint
Component
One Team
The Frontend Backend Split
Microservices
Clients
Micro Frontends
Strict Micro Frontends?
Micro Frontends
# Micro Frontends
What problem do they solve?
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
The secret to building large scale apps...
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
2.
Speed to adapt and innovate
Businesses need to iterate and change quickly, for a competitive advantage, but and at a certain size things start to slow down.
Experimentation
👩🏽🔬
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
2.
Speed to adapt and innovate
Businesses need to iterate and change quickly, for a competitive advantage, but and at a certain size things start to slow down.
3.
Developer Domain Expertise
Complex systems require expertise, and the more proficient the dev team is with the domain the better the product
The Expert
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
2.
Speed to adapt and innovate
Businesses need to iterate and change quickly, for a competitive advantage, but and at a certain size things start to slow down.
3.
Developer Domain Expertise
Complex systems require expertise, and the more proficient the dev team is with the domain the better the product
4.
Keeping Software up to date
There is an inertia to keeping software up to date, but it is vital from both a Security point of view but also developer hapiness
Security
Developer Hapiness
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
2.
Speed to adapt and innovate
Businesses need to iterate and change quickly, for a competitive advantage, but and at a certain size things start to slow down.
3.
Developer Domain Expertise
Complex systems require expertise, and the more proficient the dev team is with the domain the better the product
4.
Keeping Software up to date
There is an inertia to keeping software up to date, but it is vital from both a Security point of view but also developer hapiness
What pitfalls or tradeoffs should you watch out for?
Duplicate Dependencies and bloated code
# Micro Frontends
Module Federation
Environmental Differences
Differences from where the Micro Frontend is developed and where it is deployed
# Micro Frontends
Operational complexity
# Micro Frontends
Monorepos
Monorepos along with the tools to support them can overcome many of the operational complexity problems that arise with Micro Frontends
Governance complexity
# Micro Frontends
?
Fragmentation of User Experience
# Micro Frontends
Design Systems
Not defining the vertical boundaries correctly
# Micro Frontends
How do you change the teams?
# Micro Frontends
Features may not fit the team boundaries
# Micro Frontends
Conway's law
# Micro Frontends
Tools
# Micro Frontends
Single SPA
Module Federation
Monorepos
Monorepos
https://blog.cloudflare.com/better-micro-frontends/
https://blog.cloudflare.com/better-micro-frontends/
FAQ
Let's discuss some frequently asked questions...
Should we let our teams use whatever front-end framework they want? (React, Vue, Angular, etc.)
How can I share state between Micro-Frontends?
What about ...?
Micro Frontends
Let's Recap
# Micro Frontends
Microservices
Micro Frontends
API Endpoint
Component
Micro Frontends
Business Problems
# Micro Frontends
1.
Application
Complexity
Overly complex applications are riddled with bugs, hard to add new features, and become dreadful for devs to work on
2.
Speed to adapt and innovate
Businesses need to iterate and change quickly, for a competitive advantage, but and at a certain size things start to slow down.
3.
Developer Domain Expertise
Complex systems require expertise, and the more proficient the dev team is with the domain the better the product
4.
Keeping Software up to date
There is an inertia to keeping software up to date, but it is vital from both a Security point of view but also developer hapiness
- Duplicate Dependencies
- Environmental Differences
- Operational complexity
- Governance complexity
- Fragmentation of User Experience
- Poorly defined domain/vertical boundaries
Pitfalls
Micro Frontends
The Age of Micro Frontends
The Age of Micro Frontends
By Adam L Barrett
The Age of Micro Frontends
The High-Level lowdown on Micro frontends
