For latest version please open: https://www.slideshare.net/michailkuznetsov/front-end-microservices-october-2019
--
Modern frontend has grown in complexity and technologies diversity dramatically last decade. Usual case are apps of >100KLOC with multiple teams shipping code daily. One of the ways to deal with support and further growth of such projects is to apply microservices approach to frontend stack.
There are several solutions in the ecosystem that can enable multiple frameworks run seamlessly within one main uber-SPA. This enables common benefits of microservices approach: freedom of technology choice, separate deployments, faster new developers on-boarding due to reduced complexity of each sub-module, etc. Also this might be a migration path for large frontend monoliths.
16. In-browser: Single-spa
github.com/CanopyTax/single-spa
● In browser
● Lazy load
● Parts of one page & separate routes
● Share styles, utils, data, events etc.
● Unified lifecycle
@legkoletat | Microservices in frontend: architectures and solutions
24. Tailor app setup
"scripts": {
"start": "npm run start-fragments & node tailor.js",
"install-fragment-dependencies": "lerna bootstrap",
"build-fragments": "lerna run build",
"start-fragments": "lerna run --parallel start",
"watch-fragments": "lerna run --parallel dev"
},
App1 app1.min.js assets/
Serve to tailor
Single repo per app:
Or in monorepo:
Pipeline
25. Single app per route
● Easy to setup
● No direct interaction
● Transfer state
● Control styles
Image from Elisabeth Engel: Break Up With Your Frontend Monolith
27. Widget
app 1
Schema #3: App per route & iframe
Widget app
2
Dashboard
app
Header
app
Separate repos,
pipelines, etc
Header
No SPA
State: via server or request
params
28. Framework + Web components
● WCs in 2019 are widespread and supported
● DOM & styles can be isolated
● From apps to single components
29. Framework + Web components
github.com/vuejs/vue-web-component-wrapper
Example for Vue, same can be for Angular, React, Svelte, etc
30. Glimpse of future: Portals
<portal id="myPortal" src="https://www.example.com/"></portal>
github.com/WICG/
Secure and seamless navigation
Portal can be activated
myPortal.activate({ data: [...] });
Other document (portal) listens to activation, loads data and react
window.addEventListener('portalactivate', e => {
let predecessor = e.adoptPredecessor(document);
//etc
33. Technical challenges
● More complex setup
● Managing state and passing data & events
● Predictable and reusable styles
● Page code size (TTI, loading, debugging)
var bus = new EventBus();
bus.on('someEvent', function (data) {
console.log('got ' + data);
});
bus.on('someEvent', function foo () {
bus.off('someEvent', foo);
});
35. Pros
Single Responsibility Principle
Fast onboarding and adding features
Ease of testing, deployment
Freedom to choose technology
@legkoletat | Microservices in frontend: architectures and solutions
36. Do you really need this?
1. Business profile
2. Application usage profile
3. Size of codebase
4. Infrastructure
5. Size, stablity and maturity of team