Front end microservices - October 2019

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

Mikhail Kuznetcov
Developer at ING Investments
Twitter: @legkoletat
Github: github.com/shershen08
Agenda

bit.ly/ams-sve-mee
Amsterdam SvelteJS meetup
1st event 🚀
14th November

Agenda
● Microservices
● Modern frontend
● Microservice-oriented frontend solutions
● Challenges and conclusion
@legkoletat | Microservices in frontend: architectures and solutions

Microservices
● Single responsibility principle - “granularity”
● Faster developers onboarding
● Faster adding features
● Ease of deployment*
● Freedom to choose technology*
● High scalability

Architectures
FRONTEND
BACKEND
App1 App2 App3
Infra (BFF, NGNIX, GQL,etc)
MS1
MS2
MS3
MS5
MS4
MS6
FRONTEND
+
BACKEND

Modern frontends
● Complexity
● Size (100s of ﬁles, 100s of KLOC)
● Size of the teams (10s developers)
● Technological diversity
● Constant upgrades and migrations

Trend: mv complexity to front end
2005 - Django, Ruby on Rails
2006 - jQuery
2010 - AngularJS, BigPipe by Facebook
2013 - ReactJS
2016 - Micro-frontends.org, Mosaic project
2017 - Adoption of Web components

2019
thoughtworks.com/radar/te
chniques/micro-frontends

Solutions overview
1. In-browser with single-spa
2. Server-side with tailor.js
3. iFrames / per-route apps
4. Web components as wrapper

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

Single-spa
Single-spa
+ config
Header app
Widget
app 1
Dashboard
app
Framefork-specific wrapper
Lazy load
Common info,
events etc

Single-spa: root conﬁg
// single-spa-config.js
import {declareChildApplication, start} from 'single-spa';
declareChildApplication('app-user-profile', () =>
import('PATH_TO/app.user.profile.js'),pathPrefix('/profile’));
declareChildApplication('app-transactions', () =>
import('PATH_TO/app.transactions.js'),pathPrefix('/transactions’));
// etc
start();

Single-spa: conﬁgure app
// app-user-profile.js
export function bootstrap(props) {
return Promise
.resolve()
.then(() => {
// one-time app initialization code
});
}
// mount callback
// unmount callback

2. Stitching fragments
github.com/zalando/tailor
● Provides complete toolset - Mosaic
● Backend powered (NodeJS)
● Serves parts of one page

Tailor.js
github.com/shershen08/tailor-vue-demo
Tailor +
Webserver
HTML-like
template
Header app
Widget
app 1
Dashboard
app

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

Tailor template
<body>

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

<fragment src="https://dashb22.company.internal.com" primary>
</fragment>
<div class=”nav”>
Basic html here ...
</div>

3. Single app per route
● Easy to setup
● No direct interaction
● Transfer state
● Control styles
Image from Elisabeth Engel: Break Up With Your Frontend Monolith

3. iFrames
● Security
● Content adjustment - size, scroll
● Data exchange (via postMessage)
● Control styles
// app 1
window.addEventListener("message", receiveMessage, false);
// app 2
window.postMessage("hello there!", "http://example.com");

App per route / iframe
No SPA
State: via server or request
params
Header app
Widget
app 1
Dashboard
app
Widget
app 2
Header

4. Framework + Web components
● DOM & styles can be isolated
● From single components to full apps
● Widespread and supported

Framework + Web components
github.com/vuejs/vue-web-component-wrapper
Example for Vue, same can be for Angular, React, Svelte, etc

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

We can solve any problem by introducing an extra
level of indirection Fundamental theorem of software engineering

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);
});

Pros
Single responsibility principle
Fast onboarding and adding features
Ease of testing, deployment
Freedom to choose technology*

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

Thank you! Questions?
@legkoletatPresentation PDF on Slideshare
bit.ly
/microfronts

Approach in ING
● Multitude of apps using AngularJS, Polymer, lit-html
● Migration approach: single app per route
● Use combination of custom web components library

Deployment process
● Single repo -> single pipeline ->
● Variety in one area → variety in all areas
● Integration testing becvomes complex
@legkoletat
https://www.upwork.
com/blog/2017/05/m
odernizing-upwork-
micro-frontends/

Micro frontends (2016)
https://micro-frontends.org/
@legkoletat

Comparison of the approaches
Server
based
Frontend
based
Hybrid
(app per
page.
iframe)

Front end microservices - October 2019

More Related Content

What's hot

Similar to Front end microservices - October 2019

More from Mikhail Kuznetcov

Recently uploaded

Front end microservices - October 2019