Microservices are at the top of the hype right now and perhaps you’ve already fallen for them and are replacing your good old monolith for new shiny microservices on the back-end.
But have you ever considered doing the same on the front-end? Even hype-r (or crazy-er, we’ll let you judge), have you tried mixing different JavaScript frameworks (let’s say AngularJS, Angular and React for example) in a Single Page Application?
That’s what Micro Frontend is and that’s what we’ve done this year at Saagie. In this talk I’d like to give you feedback on the different architectures we’ve tried, their pros and cons and help you find which one would be the best for you, just in case you’d like to opt for the dark and crazy side of front-end.
3. An History of Evolution
Front-End
Back-End
Database
Monolith
Front-End
Front & Back
Front &
Microservices
Back-End
Database
Product
service
Search
Service
Checkout
service
Front-End
4. It’s Not Only About Architecture
Front-End
Back-End
Database
Monolith
Front-End
Front & Back
Front &
Microservices
Back-End
Database
Product
service
Search
Service
Checkout
service
Front-End
The Pet Store
Team
The Front End
Team
The Back End
Team
The Front End
Team
Product
Team
Search
Team
Checkout
Team
6. Front & Microservices: The perfect match?
Front &
Microservices
Product
service
Search
Service
Checkout
service
Front-End
The Front End
Team
Product
Team
Search
Team
Checkout
Team
7. Next Step of Evolution
Product Team Search Team Checkout Team
Front-End
Back-End
Database
Front-End
Back-End
Database
Front-End
Back-End
Database
10. Customer Focused Teams
Product Team Search Team Checkout Team
Front-End
Back-End
Database
Front-End
Back-End
Database
Front-End
Back-End
Database
11. Customer Focused Teams
Product Team Search Team Checkout Team
Front-End
Back-End
Database
Front-End
Back-End
Database
Front-End
Back-End
Database
Mission:
present the
product in a clear
way
Mission:
help finding the
right product
quickly
Mission:
make the
checkout
experience easy
12. 3
4
5
2
1
Micro Frontend Benefits
Freedom in
stack’s
choices
Small
Customer
Centric
Teams
Autonomous
development Autonomous
release of
features
Application’s
evolution
made easier
Micro
Frontend
13. Real Life Study Case
July 2015
Manager
March 2017
Governance
August 2017
Operations
: Data Fabric
14. Real Life Study Case: Data Fabric
V2 is coming
Time to reorganize
the team!
OCT
2017
December 2017
Layout
March 2018
Galaxy
July 2018
Layout-as-lib
19. What’s a Web Component?
Custom Elements
Shadow Dom HTML Template
ES Modules
20. <my-component>
My-component.js Index.html
class MyComponent extends HTMLElement {
connectedCallback() {
// element has been attached to the DOM
}
disconnectedCallback() {
// element has been detached from the DOM
}
attributeChangedCallback() {
// an attribute value has changed
}
render() {
this.innerHTML = `<div> … </div>`;
}
}
customElements.define('my-component', MyComponent);
<html lang="en">
<head>
<title>My application</title>
</head>
<body>
</body>
</html>
<script type="module"
src="my-component.js">
</script>
<my-component></my-component>
<script
src="/lib/document-register-element.js">
</script>
28. Pros & Cons
ConsPros
● consistent user experience ● not a true SPA
● high dependencies on
libraries between apps
● bad performances
● routers management
● implies to run the entire
stack locally
● possibility to display several
components on the same
page
● independent deployment
30. Pros & Cons
ConsPros
● possibility to share
components between
applications
● still high dependencies on
libraries between apps
● centralized routing system
● but also between React’s
versions
41. Pros & Cons
ConsPros
● way more faster
● easier to integrate
● breaking changes implies to
update each application
● possible inconsistent user
experience
● independent deployment
AND development
● no more libraries conflict
● can be run on its own
43. Data Fabric V2
V2 is coming
Time to reorganize
the team!
OCT
2017
December 2017
Layout
March 2018
Galaxy
May 2018
Security
44. Data Fabric V2
September 2018
Project & Jobs
July 2018
App Store
December 2018
Dataset Access
June 2018
Layout-as-lib
45. Best practices, tips & tricks
Think usecase first Take care of your
design
Share ressources,
not runtime!
Aggregation of components
or aggregation of SPA?
Design system, optimistic UI,
skeletons ...
Build independent and self
contained apps
Share libraries and common
services
46. ● Micro-frontends.org
https://github.com/neuland/micro-frontends
Micro Frontends talk by Michael Geers at Web Rebels, Oslo 2018 @nataltis
● Experiences Using Micro FrontEnds at IKEA
https://www.infoq.com/news/2018/08/experiences-micro-frontends
● Project Mosaic (Zalando)
https://www.mosaic9.org/
● Single SPA
https://single-spa.js.org/
To go further