Microservices. - Integration der Benutzeroberfläche - Version: Orientation in Objects GmbH. Weinheimer Str.

Größe: px

Ab Seite anzeigen:

Download "Microservices. - Integration der Benutzeroberfläche - Version: Orientation in Objects GmbH. Weinheimer Str."

Jasper Kaufer
vor 5 Jahren
Abrufe

1 Microservices - Integration der Benutzeroberfläche - Version: 18.1 Orientation in Objects GmbH Weinheimer Str Mannheim info@oio.de

Ihr Sprecher Thorsten Maier Trainer, Berater, Entwickler Sollen wir Microservices machen?

2 Ihr Sprecher Thorsten Maier Trainer, Berater, Entwickler Sollen wir Microservices Kunde Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 2

3 Warum Microservices? 3

4 Java Magazin Driven Architecture 4

5 Scale team Scale architecture 5

6 Anforderungen Unabhängige Teams Unabhängige Releases Unabhängige Technologie-Stacks A/B Testing 6

7 Backend-Microservices sind einfach wirklich? 7

8 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 8

@SpringBootApplication @RestController public class

9 public class Microservice { public static void main(string[] args) { SpringApplication.run(Microservice.class, args); } public String sayhello() { return "Hello World"; } 9

10 Was ist mit dem Frontend? 10

11 Frontend- Monolith Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 11

12 Vorteile Frontend-Monolith UI-Experten Saubere Backend-Schnittstellen Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 12

13 Nachteile Frontend-Monolith Frontend-Team braucht Wissen über alle Services Teams müssen synchronisiert werden Frontend-Team als Flaschenhals 13

14 Frontend- Monolith Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 14

15 Nochmal die Anforderungen Unabhängige Teams Unabhängige Releases Unabhängige Technologie-Stacks A/B Testing 15

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

17 Herausforderungen: Konsistentes Aussehen?! Integration in eine UI?! Frontend 1 Frontend 2 Frontend 3 Backend 1 Backend 2 Backend 3 17

18 18

19 Sind das noch Microservices? 19

20 Router Service Search Service Product Service Meta Info Service 20

21 Integration Browser HTML Clientside Integration JSON Serverside Integration Microservice 1 Microservice 2 Microservice 1 Microservice 2 21

22 Vorteil Browser HTML Serverside Integration SEO Microservice 1 Microservice 2 22

23 Nachteil Browser HTML Serverside Integration Microservice 1 Microservice 2 First Page Impression 23

24 Facebook verbessert First Page Impression durch Big Pipe 24

25 BigPipe I <html> <head> </head> <body> <div id="content1">-</div> <div id="content2">-</div> <div id="content3">-</div> Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 25

26 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> Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 26

27 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> Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 27

$write("<script>" + "arrived(\"" + id + "\", '" + content + "');" + "</script>\n"); writer.$

28 BigPipe Server private void pagelet(printwriter writer, String id, String content) { writer.write("<script>" + "arrived(\"" + id + "\", '" + content + "');" + "</script>\n"); writer.flush(); } Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 28

29 Zalando setzt noch einen drauf Project Mosaic 29

Serverside Integration <html> <head> <script type="fragment" src="http://assets.domain.com"></script> </head> <body> <fragment src="http://header.domain.com"></fragment> <fragment src="http://content.

30 Serverside Integration <html> <head> <script type="fragment" src=" </head> <body> <fragment src=" <fragment src=" primary></fragment> <fragment src=" async></fragment> </body> </html> Content Service Footer Service 30

service1: Path("/service1/*_") -> "https://s2.example.

31 service1: Path("/service1/*_") -> " service2: Path("/service2/*_") -> auth() -> " Router (Skipper) Template 1 Template 2 Template 3 31

32 Shaker einheitliche UI Komponenten Bibliothek 32

33 Browser Fragments Fragments Fragments Microservice 1 Microservice 2 Microservice

Compoxure Composition Middleware https://github.

34 Compoxure Composition Middleware <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> Orientation in Objects GmbH Microservices Integration der Benutzeroberfläche 34

35 Integration Browser HTML Clientside Integration JSON Serverside Integration Microservice 1 Microservice 2 Microservice 1 Microservice 2 35

36 Alle wollen 36

37 keine direkte Unterstützung für Microservices 37

38 38 META FRAMEWORK

39 Micro Frontends The DOM is the API 39

40 <router-navigation></router-navigation> <product-details></product-details> <meta-footer></meta-footer> 40

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

42 Browser Support Custom Elements v1 42

43 Browser Support Custom Elements v1 Mit Polyfill (~5 KB) 43

44 connectedcallback() { window.addeventlistener('router:navigation:changed', this.refresh); } window.dispatchevent(new CustomEvent('router:navigation:changed, {'detail': 'Support'} )); 44

45 Zuviel Handarbeit? 45

46 Single SPA 46

47 Root application Single SPA Child application Child application 47

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

49 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 } Child application Child application 49

50 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); } Child application } return el; 50

51 Scale team Scale architecture 51

52 ??? Fragen?? Orientation in Objects GmbH? Weinheimer Str Mannheim

53 Vielen Dank für Ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim

54 Universal Rendering? Serverside Rendering 54

SSI Ja Server Side Includes $ curl http://127.0.

55 SSI Ja Server Side Includes $ curl <input type="text"><button>search</button> <search-product>  </search-product> 55

Ähnliche Dokumente

Microservices Integration der Benutzeroberfläche

Microservices Integration der Benutzeroberfläche Microservices der Benutzeroberfläche OOP München 31.01.2017 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: 17.1 www.oio.de info@oio.de Ihr Sprecher Thorsten Maier Trainer, Berater,