Micro Frontends

Extending the Micro Services

Architecture to Web Development

Jan 2018 | Frontend Developer Love @ Usabilla

Monolith
Monolith
+ Single codebase
+ Easy quick setup
+ No version management
+ Single CI/CD pipeline

Monolith
+ Single codebase
+ Easy quick setup
+ No version management
+ Single CI/CD pipeline

- Refactoring is difficult
- Try new stack
- Experiment
- Long build times Monolith
- Long development times
- Long deployment cycles
 Frontend
Monolith

Service 1 Service 2 Service 3

 Frontend
Monolith???

Service 1 Service 2 Service 3

 Mic
ro F
ron
ten
ds??
?
Frontend
Monolith???

Service 1 Service 2 Service 3

Spyros Ioakeimidis
Software Engineer

github twitter
@spirosikmd @spyros_io
Chapter 1: What? Why?
 Technology Radar

https://www.thoughtworks.com/radar/techniques/micro-frontends
https://twitter.com/svdberg/status/625932935204610048
https://twitter.com/mircealungu/status/946878978463289344
 Frontend
Monolith

Service 1 Service 2 Service 3

Frontend 1 Frontend 2 Frontend 3

Service 1 Service 2 Service 3

> Reusable Code
> Agility
> Reduce risk
> Easier Testing

Frontend 1 Frontend 2 Frontend 3

Service 1 Service 2 Service 3

+ Verticalised teams
+ Self contained
+ Vertical decomposition
+ UI Composition

Frontend 1 Frontend 2 Frontend 3

Service 1 Service 2 Service 3

+ Verticalised teams - Proprietary solution
+ Self contained - Fit current architecture
+ Vertical decomposition - Load times
+ UI Composition - Redundancy risk

Frontend 1 Frontend 2 Frontend 3

Service 1 Service 2 Service 3

 Reporting Security

Single
Responsibility

Account
Interactions
Management
 Reporting Security

Consistent
Look & UX

Account
Interactions
Management
 Reporting Security

Common
Interface

Account
Interactions
Management
 Separate Feels Like Different Tree
Isolation
Deployment One Page Frameworks Shaking

Vendor Several No Version Separate

Bundles Frontends Conflicts Development
Chapter 2: How?
App Shell FTW!
 App Shell
- State
iframe
- Routing
 App Shell
- State
iframe
- Routing

Isolation
Separate Deployment
Feels like one page
Different Frameworks
Vendor Bundles
Tree Shaking
Several Frontends
No Version Conflicts
Separate Development
https://github.com/manfredsteyer/meta-router
https://github.com/manfredsteyer/meta-router
We need to register
routing in the micro
frontend!
Web Components

Each app a
component

Again App Shell is

the orchestrator
 Web Components

Each app a
component

Again App Shell is

the orchestrator

Separate Deployment
Feels like one page
Isolation
Different Frameworks
Vendor Bundles
Tree Shaking
No Version Conflicts
Several Frontends
Separate Development
 imports

https://github.com/CanopyTax/single-spa
https://github.com/medikoo/event-emitter
 imports

imports

https://github.com/CanopyTax/single-spa
https://github.com/medikoo/event-emitter
/reporting
/account
/editor Hybrid

Account
Reporting Security Interactions
Management
/reporting
/account
/editor Hybrid

Account
Reporting Security Interactions
Management

Isolation Tree Shaking (per app)

Separate Deployment Several Frontends
Feels like one page Separate Development Vendor Bundles
Different Frameworks No Version Conflicts
Move responsibility to micro frontends

loads
Chapter 3: Challenges?
Integration!
Is this a micro frontend?
Or are these micro frontends?
 app-2.js …
app-1.js

app.css app-2.css

app-1.css

This person suffers

 Its your time to figure out what
the previous developers had in mind!

We use docker, it should work!

And this person suffers

Adaptive, Responsive & Accessible Design
Integration
Testing is
probably your
best bet!
Chapter 4: Thoughts?
 You might not need
Yes
micro frontends yet
Can you fit your team
around a large table? Micro frontends
No might help you

http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
 You might not need
Yes
micro frontends yet
Can you fit your team
around a large table? Micro frontends
No might help you

Integration might be
Yes
complicated
Do you have monolithic
dependencies? Micro frontends may
No be easily integrated

http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
 You might not need
Yes
micro frontends yet
Can you fit your team
around a large table? Micro frontends
No might help you

Yes Integration might be

complicated
Do you have monolithic
dependencies? Micro frontends may
No be easily integrated

Micro frontends
Yes
might be valuable
Got container, orchestration,
devops experience? Consider giving
No them a try first

http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
Extend the monolith?
“Architecture in micro frontends is domain driven,
and low level components can be technical driven.
It makes sense to follow a top down approach.
Thinking of how to split your monolith in apps
according to your domain. No big design upfront
as things might go wrong.”

Stefan Tilkov @ Devoxx Belgium 2016

https://twitter.com/derberq/status/910056617881817089
Thank you!

https://jobs.usabilla.com/
https://undraw.co/
 Check these out!
> https://medium.com/@gilfink/why-im-betting-on-web-components-and-you-should-think-
about-using-them-too-8629396e27a

> https://softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using-
angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx
> https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/
> https://x-team.com/blog/micro-frontend
> https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-
development-f325ebdadc16
> https://www.packtpub.com/books/content/what-micro-frontend

> https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-
microservices
> https://www.tikalk.com/js/introduction-to-micro-frontends/
> https://micro-frontends.zeef.com/elisabeth.engel?
ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc