Frontend microservices: architectures and solutions

Mikhail Kuznetcov, ING
2018 Amsterdam
Microservices in frontend:
architectures and solutions

About me
Mikhail Kuznetcov
Dev engineer at ING
Twitter: @legkoletat
Github: github.com/shershen08

Agenga
● Microservices
● Modern frontend apps
● Solutions
● Summary
@legkoletat

Microservices
approach
@legkoletat

Microservices approach
● Single Responsibility Principle
● Onboarding and adding features is faster
● Ease of deployment
● Freedom to choose technology
● High scalability
@legkoletat

@legkoletat
Modern frontend architecture
● Complexity
● Size of the teams
● Technological diversity
● Constant upgrades and migrations
Typical large scale
frontend app:
● 100s of files,
● 100s of KLOC,
● 10s developers

Facebook’s BigPipe (2010)
https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-w
eb-pages-for-high-performance/389414033919/
<script>
big_pipe.onPageletArrive({id:
“pagelet_composer”,
content=<HTML>, css=[..],
js=[..], …})
</script>
@legkoletat

#1 Single-spa
https://github.com/CanopyTax/single-spa
@legkoletat
● In browser
● Lazy load
● Parts of one page & separate routes
● Share utils, data, events etc.

Configure app
// vue-main.js
export function bootstrap(props) {
return Promise
.resolve()
.then(() => {
// one-time app initialization code
});
}
// TODO: add mount, unmount callbacks
@legkoletat

Start app
// single-spa-config.js
import {declareChildApplication, start} from 'single-spa';
declareChildApplication('vue', () =>
import('PATH_TO/vue.app.js'),pathPrefix('/vue'));
// …
start();
App called on events: hashchange,pushState/replaceState, special
triggerAppChange

Single-spa
https://github.com/CanopyTax/single-spa-examples
UtahJS 2018 talk by Justin McMurdie
@legkoletat

#2 Tailor
https://github.com/zalando/tailor
@legkoletat
● Backend powered
● Serves parts of one page
● Part of Mosaic toolset

Tailor server
@legkoletat
const http = require('http');
const Tailor = require('node-tailor');
const tailor = new Tailor({
templatesPath: '/built-apps'
});
const server = http.createServer((req, res) => {
// custom server logic
tailor.requestHandler(req, res)
})
server.listen(process.env.PORT);

VueJS + Tailor
https://github.com/shershen08/tailor-vue-demo
Header
app
Widget
app
Dashboard app
SPA
Tailor +
Webserver
@legkoletat

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"
},
@legkoletat
App1
app1.min
.js
assets1Build Serve to tailor
Case: single repo per app
Case: monorepo

Connecting fragments
<body>

<div id="header"><span class="fragment-error">Header failed to load</span>
</div>
<fragment src="https://abs123.company.internal.com"></fragment>

<div id="dashboard"><span class="fragment-error">Dashboard failed to
load</span></div>
<fragment src="https://dashb22.company.internal.com" primary></fragment>
@legkoletat

Combining multiple Vue instances
● Main app (Vuetify)
● Item details
● Stats app
● Console terminal app

Other approaches
@legkoletat
● App per route
● Iframes
● SSI
● Custom solutions following
micro frontens idea (1, 2)
● opencomponents
Image from Elisabeth Engel: Break Up With Your Frontend Monolith
https://micro-frontends.org/

Other approaches: Web components
● Well supported standard
● Isolated DOM, styles
● Components not apps
@legkoletat
https://github.com/karol-f/vue-custom-element

Summary
@legkoletat
● Single Responsibility Principle
● Fast onboarding and adding features
● Ease of testing, deployment
● Freedom to choose technology

Challenges
● Managing state and passing events
● Predictable and reusable styles
● Page code size (TTI, loading, debugging)
@legkoletat

Practial
@legkoletat
Migration path
1. Check applicable approach
2. Select and cut the app fragment
3. Setup e2e for selected fragment
4. Optimize
5. Repeat 2-4
Do you really need this?
1. App user profile
2. Size of codebase
3. Size and maturity of team

Links
● Micro frontends—a microservice approach to front-end web development
● https://www.mosaic9.org/
● https://github.com/CanopyTax/single-spa
● https://micro-frontends.org/
@legkoletat

Questions
@legkoletat
Follow me
Presentation PDF on Slideshare

Frontend microservices: architectures and solutions

More Related Content

What's hot

Similar to Frontend microservices: architectures and solutions

More from Mikhail Kuznetcov

Recently uploaded

Frontend microservices: architectures and solutions