Microservice UI Composition · 3 © Orientation in Objects GmbH Microservice UI Composition 5 Scale team Scale architecture © Orientation in Objects GmbH Microservice UI Composition

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

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?


„Java Magazin

Driven Architecture“

3


Scale team

Scale architecture


Neue

Mitarbeiter

Zufriedene

Mitarbeiter

Innovation Vielfalt

4


Conways Law

“Organizations which design systems […] are constrained to produce designs

which are copies of the communication structures of these organizations.”


Anforderungen

Unabhängige Teams

Unabhängige Releases

Unabhängige Technologie-Stacks

A/B Testing

5


Backend-Microservices

sind einfach

wirklich?


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


@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";

}

}


Was ist mit dem

Frontend?

7


Frontend-

Monolith

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1


Vorteile Frontend-Monolith

14

„UI-Experten“

Saubere Backend-Schnittstellen

8


Frontend-Team braucht Wissen über alle Services

Teams müssen synchronisiert werden

Frontend-Team als Flaschenhals

Nachteile Frontend-Monolith


Nochmal die Anforderungen

Unabhängige Teams

Unabhängige Releases

Unabhängige Technologie-Stacks

A/B Testing

9


50% Backend / 50% Frontend?Dann machen wir auch nur 50% Microservices!


Frontend-

Monolith

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

10


Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

Frontend 3

Backend 3

Frontend 2

Backend 2

Frontend 1

Backend 1


11


Sind das noch

Microservices?


Router Service

Product Service

Meta Info Service

Search Service

12


MICRO FRONTENDS


Serverside

Integration

Microservice 2Microservice 1

Browser

Integration


Clientside

Integration

HTML JSON

13


Serverside

Integration

Browser

Vorteil

SEO


HTML


Serverside

Integration

Browser

Nachteil

First Page Impression


HTML

14


Facebook verbessert

First Page Impression durch

Big Pipe


BigPipe I

<html>

<head>

</head>

<body>

<div id="content1">-</div>



</body>

</html>

<html>

<head>

</head>

<body>




</body>

</html>

28

15


BigPipe II

<html>

<head>

<script type="text/javascript">

function arrived(id, text) {

document.getElementById(id).innerHTML = text;

}

</script>

</head>

<body>




</body>

</html>

<html>

<head>




}

</script>

</head>

<body>




</body>

</html>

29


BigPipe III

<html>

<head>




}

</script>

</head>

<body>




<script>arrived("content3", "Wohooo 3");</script>



</body>

</html>

<html>

<head>




}

</script>

</head>

<body>







</body>

</html>

30

16


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


Zalando setzt noch einen drauf

Project Mosaic

17


<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


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


Shakereinheitliche UI Komponenten Bibliothek


https://www.mosaic9.org/

Microservice 3Microservice 2Microservice 1

FragmentsFragments Fragments

Browser

19


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>


Serverside

Integration

Browser

Integration

Clientside

Integration

Microservice 2Microservice 1 Microservice 2Microservice 1

HTML JSON

20


Alle wollen


keine direkte Unterstützung für Microservices

21


ME

TA F

RA

ME

WO

RK


Micro FrontendsThe DOM is the API

https://micro-frontends.org/

22


Custom element

Shadow DOM


<router-navigation></router-navigation>

<product-details></product-details>

<meta-footer></meta-footer>

23


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


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


Browser SupportCustom Elements v1


Browser SupportCustom Elements v1

Mit Polyfill (~5 KB)

25


Universal Rendering?“Serverside Rendering”


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>



</search-product>

<search-product>



</search-product>

26


Zuviel Handarbeit?


Single SPA

https://github.com/CanopyTax/single-spa

27



Root application

Single SPA

Child application Child application



Root application

Single SPA

import * as singleSpa from 'single-spa';

singleSpa.declareChildApplication('app-1', () => import('../app1/app1.js'));


singleSpa.start();

import * as singleSpa from 'single-spa';



singleSpa.start();

28



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

}


// app1 initialisieren

}


// app1 im DOM Baum einhängen

}


// app2 aus dem DOM Baum aushängen

}



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,

});


return reactLifecycles.bootstrap(props);

}


return reactLifecycles.mount(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,

});


return reactLifecycles.bootstrap(props);

}


return reactLifecycles.mount(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


Scale team

Scale architecture



[email protected]

??

? ?

????

Fragen ?

30



[email protected]

Vielen Dank für Ihre Aufmerksamkeit!

Documents

Microservice UI Composition · 3 © Orientation in Objects GmbH Microservice UI Composition 5 Scale team Scale architecture © Orientation in Objects GmbH Microservice UI Composition