microservice ui composition · 3 © orientation in objects gmbh microservice ui composition 5 scale...
TRANSCRIPT
1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Microservice UI Composition
17.1
Microservice UI Composition© Orientation in Objects GmbH
Ihr Sprecher
2
Thorsten Maier
Trainer, Berater, Entwickler
Sollen wir
Microservices
machen?
Kunde
@ThorstenMaier
2
Microservice UI Composition© Orientation in Objects GmbH 3
Warum Microservices?
Microservice UI Composition© Orientation in Objects GmbH 4
„Java Magazin
Driven Architecture“
3
Microservice UI Composition© Orientation in Objects GmbH 5
Scale team
Scale architecture
Microservice UI Composition© Orientation in Objects GmbH 6
Neue
Mitarbeiter
Zufriedene
Mitarbeiter
Innovation Vielfalt
4
Microservice UI Composition© Orientation in Objects GmbH 7
Conways Law
“Organizations which design systems […] are constrained to produce designs
which are copies of the communication structures of these organizations.”
Microservice UI Composition© Orientation in Objects GmbH 8
Anforderungen
Unabhängige Teams
Unabhängige Releases
Unabhängige Technologie-Stacks
A/B Testing
5
Microservice UI Composition© Orientation in Objects GmbH 9
Backend-Microservices
sind einfach
wirklich?
Microservice UI Composition© Orientation in Objects GmbH 10
8 Irrtümer der verteilten Datenverarbeitung
Netzwerk ist ausfallsicher
Latenzzeit = 0
Datendurchsatz ∞
Netzwerk ist sicher
Netzwerktopologie ist stabil
1 Netzwerkadministrator
Kosten des Datentransports = 0
Netzwerk ist homogen
Bill Joy, Tom Lyon, L Peter Deutsch und James Gosling
…
6
Microservice UI Composition© Orientation in Objects GmbH 11
@SpringBootApplication
@RestController
public class Microservice {
public static void main(String[] args) {
SpringApplication.run(Microservice.class, args);
}
@GetMapping("/helloWorld")
public String sayHello() {
return "Hello World";
}
}
@SpringBootApplication
@RestController
public class Microservice {
public static void main(String[] args) {
SpringApplication.run(Microservice.class, args);
}
@GetMapping("/helloWorld")
public String sayHello() {
return "Hello World";
}
}
Microservice UI Composition© Orientation in Objects GmbH 12
Was ist mit dem
Frontend?
7
Microservice UI Composition© Orientation in Objects GmbH 13
Frontend-
Monolith
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
Microservice UI Composition© Orientation in Objects GmbH
Vorteile Frontend-Monolith
14
„UI-Experten“
Saubere Backend-Schnittstellen
8
Microservice UI Composition© Orientation in Objects GmbH 15
Frontend-Team braucht Wissen über alle Services
Teams müssen synchronisiert werden
Frontend-Team als Flaschenhals
Nachteile Frontend-Monolith
Microservice UI Composition© Orientation in Objects GmbH 16
Nochmal die Anforderungen
Unabhängige Teams
Unabhängige Releases
Unabhängige Technologie-Stacks
A/B Testing
9
Microservice UI Composition© Orientation in Objects GmbH 17
50% Backend / 50% Frontend?Dann machen wir auch nur 50% Microservices!
Microservice UI Composition© Orientation in Objects GmbH 18
Frontend-
Monolith
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
10
Microservice UI Composition© Orientation in Objects GmbH 19
Herausforderungen:
Konsistentes Aussehen?!
Integration in eine UI?!
Frontend 3
Backend 3
Frontend 2
Backend 2
Frontend 1
Backend 1
Microservice UI Composition© Orientation in Objects GmbH 20
11
Microservice UI Composition© Orientation in Objects GmbH 21
Sind das noch
Microservices?
Microservice UI Composition© Orientation in Objects GmbH 22
Router Service
Product Service
Meta Info Service
Search Service
12
Microservice UI Composition© Orientation in Objects GmbH 23
MICRO FRONTENDS
Microservice UI Composition© Orientation in Objects GmbH 24
Serverside
Integration
Microservice 2Microservice 1
Browser
Integration
Microservice 2Microservice 1
Clientside
Integration
HTML JSON
13
Microservice UI Composition© Orientation in Objects GmbH 25
Serverside
Integration
Browser
Vorteil
SEO
Microservice 2Microservice 1
HTML
Microservice UI Composition© Orientation in Objects GmbH 26
Serverside
Integration
Browser
Nachteil
First Page Impression
Microservice 2Microservice 1
HTML
14
Microservice UI Composition© Orientation in Objects GmbH 27
Facebook verbessert
First Page Impression durch
Big Pipe
Microservice UI Composition© Orientation in Objects GmbH
BigPipe I
<html>
<head>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
</body>
</html>
28
15
Microservice UI Composition© Orientation in Objects GmbH
BigPipe II
<html>
<head>
<script type="text/javascript">
function arrived(id, text) {
document.getElementById(id).innerHTML = text;
}
</script>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function arrived(id, text) {
document.getElementById(id).innerHTML = text;
}
</script>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
</body>
</html>
29
Microservice UI Composition© Orientation in Objects GmbH
BigPipe III
<html>
<head>
<script type="text/javascript">
function arrived(id, text) {
document.getElementById(id).innerHTML = text;
}
</script>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
<script>arrived("content3", "Wohooo 3");</script>
<script>arrived("content1", "Wohooo 1");</script>
<script>arrived("content2", "Wohooo 2");</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function arrived(id, text) {
document.getElementById(id).innerHTML = text;
}
</script>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
<script>arrived("content3", "Wohooo 3");</script>
<script>arrived("content1", "Wohooo 1");</script>
<script>arrived("content2", "Wohooo 2");</script>
</body>
</html>
30
16
Microservice UI Composition© Orientation in Objects GmbH
BigPipe Server
private void pagelet(PrintWriter writer, String id, String content) {
writer.write("<script>"
+ "arrived(\"" + id + "\", '" + content + "');"
+ "</script>\n");
writer.flush();
}
private void pagelet(PrintWriter writer, String id, String content) {
writer.write("<script>"
+ "arrived(\"" + id + "\", '" + content + "');"
+ "</script>\n");
writer.flush();
}
31
Microservice UI Composition© Orientation in Objects GmbH 32
Zalando setzt noch einen drauf
Project Mosaic
17
Microservice UI Composition© Orientation in Objects GmbH 33
<html>
<head>
<script type="fragment" src="http://assets.domain.com"></script>
</head>
<body>
<fragment src="http://header.domain.com"></fragment>
<fragment src="http://content.domain.com" primary></fragment>
<fragment src="http://footer.domain.com" async></fragment>
</body>
</html>
<html>
<head>
<script type="fragment" src="http://assets.domain.com"></script>
</head>
<body>
<fragment src="http://header.domain.com"></fragment>
<fragment src="http://content.domain.com" primary></fragment>
<fragment src="http://footer.domain.com" async></fragment>
</body>
</html>
Serverside
Integration
Content ServiceHeader Service
Microservice UI Composition© Orientation in Objects GmbH 34
Template 3Template 2Template 1
Router
(Skipper)
service1: Path("/service1/*_") -> "https://s2.example.org";service2: Path("/service2/*_") --> auth() -> "https://s1.example.org";service1: Path("/service1/*_") -> "https://s2.example.org";service2: Path("/service2/*_") --> auth() -> "https://s1.example.org";
18
Microservice UI Composition© Orientation in Objects GmbH 35
Shakereinheitliche UI Komponenten Bibliothek
Microservice UI Composition© Orientation in Objects GmbH 36
https://www.mosaic9.org/
Microservice 3Microservice 2Microservice 1
FragmentsFragments Fragments
Browser
19
Microservice UI Composition© Orientation in Objects GmbH
Compoxure Composition Middlewarehttps://github.com/tes/compoxure
37
<div cx-url='{{server:local}}/application/widget/{{cookie:userId}}'
cx-cache-ttl='10s' cx-cache-key='widget:user:{{cookie:userId}}'
cx-timeout='1s' cx-statsd-key="widget_user">
This content will be replaced on the way through
</div>
<div cx-url='{{server:local}}/application/widget/{{cookie:userId}}'
cx-cache-ttl='10s' cx-cache-key='widget:user:{{cookie:userId}}'
cx-timeout='1s' cx-statsd-key="widget_user">
This content will be replaced on the way through
</div>
Microservice UI Composition© Orientation in Objects GmbH 38
Serverside
Integration
Browser
Integration
Clientside
Integration
Microservice 2Microservice 1 Microservice 2Microservice 1
HTML JSON
20
Microservice UI Composition© Orientation in Objects GmbH 39
Alle wollen
Microservice UI Composition© Orientation in Objects GmbH 40
keine direkte Unterstützung für Microservices
21
Microservice UI Composition© Orientation in Objects GmbH 41
ME
TA F
RA
ME
WO
RK
Microservice UI Composition© Orientation in Objects GmbH 42
Micro FrontendsThe DOM is the API
https://micro-frontends.org/
22
Microservice UI Composition© Orientation in Objects GmbH 43
Custom element
Shadow DOM
Microservice UI Composition© Orientation in Objects GmbH 44
<router-navigation></router-navigation>
<product-details></product-details>
<meta-footer></meta-footer>
23
Microservice UI Composition© Orientation in Objects GmbH 45
class SearchProduct extends HTMLElement {
constructor() {
super();
this.innerHTML = '<input type="text"><button>Search</button>';
}
}
window.customElements.define('search-product', SearchProduct);
class SearchProduct extends HTMLElement {
constructor() {
super();
this.innerHTML = '<input type="text"><button>Search</button>';
}
}
window.customElements.define('search-product', SearchProduct);
class RouterNavigation extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Navigation <search-product></search-product>';
}
}
window.customElements.define('router-navigation', RouterNavigation);
class RouterNavigation extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Navigation <search-product></search-product>';
}
}
window.customElements.define('router-navigation', RouterNavigation);
Microservice UI Composition© Orientation in Objects GmbH 46
connectedCallback() {
window.addEventListener('router:navigation:changed', this.refresh);
}
connectedCallback() {
window.addEventListener('router:navigation:changed', this.refresh);
}
window.dispatchEvent(new CustomEvent('router:navigation:changed’,
{'detail': 'Support'}
));
window.dispatchEvent(new CustomEvent('router:navigation:changed’,
{'detail': 'Support'}
));
24
Microservice UI Composition© Orientation in Objects GmbH 47
Browser SupportCustom Elements v1
Microservice UI Composition© Orientation in Objects GmbH 48
Browser SupportCustom Elements v1
Mit Polyfill (~5 KB)
25
Microservice UI Composition© Orientation in Objects GmbH 49
Universal Rendering?“Serverside Rendering”
Microservice UI Composition© Orientation in Objects GmbH 50
SSIJa… “Server Side Includes”
$ curl http://127.0.0.1:3000/search-product
<input type="text"><button>Search</button>
$ curl http://127.0.0.1:3000/search-product
<input type="text"><button>Search</button>
<search-product>
<!--#include virtual="/search-product" -->
</search-product>
<search-product>
<!--#include virtual="/search-product" -->
</search-product>
26
Microservice UI Composition© Orientation in Objects GmbH 51
Zuviel Handarbeit?
Microservice UI Composition© Orientation in Objects GmbH 52
Single SPA
https://github.com/CanopyTax/single-spa
27
Microservice UI Composition© Orientation in Objects GmbH 53
https://github.com/CanopyTax/single-spa
Root application
Single SPA
Child application Child application
Microservice UI Composition© Orientation in Objects GmbH 54
https://github.com/CanopyTax/single-spa
Root application
Single SPA
import * as singleSpa from 'single-spa';
singleSpa.declareChildApplication('app-1', () => import('../app1/app1.js'));
singleSpa.declareChildApplication('app-2', () => import('../app2/app2.js'));
singleSpa.start();
import * as singleSpa from 'single-spa';
singleSpa.declareChildApplication('app-1', () => import('../app1/app1.js'));
singleSpa.declareChildApplication('app-2', () => import('../app2/app2.js'));
singleSpa.start();
28
Microservice UI Composition© Orientation in Objects GmbH 55
https://github.com/CanopyTax/single-spa
Child application Child application
export function bootstrap(props) {
// app1 initialisieren
}
export function mount(props) {
// app1 im DOM Baum einhängen
}
export function unmount(props) {
// app2 aus dem DOM Baum aushängen
}
export function bootstrap(props) {
// app1 initialisieren
}
export function mount(props) {
// app1 im DOM Baum einhängen
}
export function unmount(props) {
// app2 aus dem DOM Baum aushängen
}
Microservice UI Composition© Orientation in Objects GmbH 56
https://github.com/CanopyTax/single-spa
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: Root,
domElementGetter,
});
export function bootstrap(props) {
return reactLifecycles.bootstrap(props);
}
export function mount(props) {
return reactLifecycles.mount(props);
}
export function unmount(props) {
return reactLifecycles.unmount(props);
}
function domElementGetter() {
// Make sure there is a div for us to render into
let el = document.getElementById('app1');
if (!el) {
el = document.createElement('div');
el.id = 'app1';
document.body.appendChild(el);
}
return el;
}
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: Root,
domElementGetter,
});
export function bootstrap(props) {
return reactLifecycles.bootstrap(props);
}
export function mount(props) {
return reactLifecycles.mount(props);
}
export function unmount(props) {
return reactLifecycles.unmount(props);
}
function domElementGetter() {
// Make sure there is a div for us to render into
let el = document.getElementById('app1');
if (!el) {
el = document.createElement('div');
el.id = 'app1';
document.body.appendChild(el);
}
return el;
}
Child application
29
Microservice UI Composition© Orientation in Objects GmbH 57
Scale team
Scale architecture
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
??
? ?
????
Fragen ?
30
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Vielen Dank für Ihre Aufmerksamkeit!