microservices – integration der benutzeroberfläche...1 orientation in objects gmbh weinheimer...

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

www.oio.deinfo@oio.deVersion:

Microservices –Integration der

BenutzeroberflächeOOP München

31.01.2017

17.1

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Ihr Sprecher

2

Thorsten Maier

Trainer, Berater, Entwickler

Sollen wir

Microservices

machen?

Kunde

2

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 3

Wer hat bereits eine

Anwendung mit Microservices

implementiert?

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 4

Warum?

3

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 5

„Das macht man heute so!“

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 6

„Java Magazin

Driven Architecture“

4

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 7

Hype oder ist das Tal

der Tränen schon

durchschritten?

2005 2016?

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 8

Was sind

Microservices?

5

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 9

„Microservices sind ein Architekturmuster der

Informationstechnik, bei dem komplexe Anwendungssoftware aus

kleinen, unabhängigen Prozessen komponiert wird, die untereinander

mit sprachunabhängigen Programmierschnittstellen kommunizieren.“

https://de.wikipedia.org/wiki/Microservices

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 10

Jedes Architekturmuster

hat Vorteile

aber auch Nachteile

6

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 11

Wie kommt man zum richtigen Muster?

Nicht-funktionale Anforderungen!

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 12

https://circleci.com/blog/its-the-future/

I’m just building a

simple web app […] -

a normal CRUD app

using Rails, going to

deploy to Heroku.

Is that still the

way to go?

7

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 13

https://circleci.com/blog/its-the-future/

I’m just building a simple

web app […] -

a normal CRUD app using

Rails, going to

deploy to Heroku.

Is that still the

way to go?

Oh no.

That’s old school.

Heroku is dead -

no-one uses it

anymore. You

need to use

Docker now.

It’s the future.

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 14

So I just need to split my simple CRUD app into

12 microservices,

each with their own APIs

which handle failure resiliently,

put them into Docker containers,

launch a fleet of 8 machines

which are Docker hosts running CoreOS,

“orchestrate” them using a small Kubernetes cluster running etcd,

figure out the “open questions” of networking and storage, and

then I continuously deliver

multiple redundant copies of each microservice to my fleet.

Is that it?

https://circleci.com/blog/its-the-future/

8

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 15

Anforderungen, die auf Microservices zeigen

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 16

1) Elastische Lastanforderungen

Last

Zeit

9

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 17

3 Monats-

Releases

Continuous

Delivery

2) Schnelle Anpassungen im laufenden Betrieb

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 18

Was ist mit Modularisierung?

Ja, aber…!

10

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 19

Doch eine kleine Definition

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

„Microservices“ nach Martin Fowler

Componentization via Services

Organized around Business Capabilities

Products not Projects

Decentralized Data Management

Infrastructure Automation

20

http://martinfowler.com/articles/microservices.html

11

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 21

Mircoservice reines Backend-Thema?

Spring Boot

DropWizard

Wildfly Swarm

…

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 22

@SpringBootApplication

@RestController

public class Microservice {

public static void main(String[] args) {

SpringApplication.run(Microservice.class, args);

}

@RequestMapping("/helloWorld")

public String sayHello() {

return "Hello World";

}

}

12

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 23

@SpringBootApplication

@RestController

public class Microservice {

public static void main(String[] args) {

SpringApplication.run(Microservice.class, args);

}

@RequestMapping("/helloWorld")

public String sayHello() {

return "Hello World";

}

}

Was ist mit

der UI?

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 24

Zunächst der Teil für die

PowerPoint Architekten

13

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 25

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Vollständige

UI

Composite

UI

Browser

Integration

Backend

Service Calls

AJAX

HTML

Serverseitiges

Templating

AJAX

JSON

Clientseitiges

Templating

Vollständige

UI

Composite

UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 26

Microservice UI

HTML JSON

14

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Java-Server generiert HTML

27

1. GET .html

HTML

Browser

HTTP Server

Java Servlet

HTML

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

HTTP ServerBrowser

Java-Server als Datenschleuder

28

1. GET .html

2. GET .js

3. GET .json

HTML

JavaScriptHTML

JavaScript

Java ServletJSON

15

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 29

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Gemeinsame UI

30

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

16

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 31

Getrenntes Team für die UI

Saubere Schnittstellen

Vorteile einer gemeinsamen UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 32

Teams müssen synchronisiert werden

Frontend-Team als Flaschenhals

Nachteile einer gemeinsamen UI

17

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 33

Frontend-Team braucht Wissen über alle Services

"UI Monolit"

Nachteile einer gemeinsamen UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 34

Verhältnis von Backend zu UI?

50:50?

Dann machen Sie auch nur 50% Microservices!

Nachteile einer gemeinsamen UI

18

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Getrennte UI

35

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Getrennte UI

36

Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

19

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 37

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

Shared

UI Code

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 38

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

20

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 39

Composite UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 40

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

21

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Server Integration

41

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Browser Integration

42

Browser

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

22

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 43

Und nun der Teil für die

Keller-Programmierer

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 44

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

AJAX

HTML

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

23

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX

45

<html>

<head>

<title>UI Integration - AJAX</title>

</head>

<body>

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

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

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

</body>

</html>

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX HTML

46

<html>

<head>

<title>UI Integration - AJAX</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function() {

$("#content1").load("http://localhost:8081/");

$("#content2").load("http://localhost:8082/");

$("#content3").load("http://localhost:8083/");

});

</script>

</head>

<body>

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

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

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

</body>

</html>

24

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX

47

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX Nachteil

48

25

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX Nachteil 2

49

SEOSuchmaschinenoptimierung

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 50

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

AJAX

HTML

AJAX

JSON

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

26

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

AJAX JSON

51

<html>

<head>

<title>UI Integration - AJAX</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function() {

loadJSONData("http://localhost:8081/json", "#content1");

loadJSONData("http://localhost:8082/json", "#content2");

loadJSONData("http://localhost:8083/json", "#content3");

function loadJSONData(url, domId) {

$.get(url, function(data) {

$(domId).html(data.text).css("color", "#0f0");

});

}

});

</script>

</head>

<body>

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

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

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

</body>

</html>

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 52

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

AJAX

HTML

AJAX

JSON

Backend

Service Calls

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

27

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Server Integration

53

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Backend Service Calls

54

return Stream.of(url1, url2 , url3)

.parallel()

.map(url -> restTemplate.getForObject(url, String.class))

.collect(Collectors.joining(""));

28

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Nachteil Backend Service Calls

55

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 56

Client ServiceCircuit

Breaker

Timeout

Timeout

Circuit Breakerverhindert, dass nicht erreichbare Dienste

immer wieder angefragt werden.

29

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 57

Hystrix Dashboard

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Nachteil Backend Integration

58

30

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

BigPipe Facebook

59

https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

BigPipe I

<html>

<head>

</head>

<body>

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

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

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

</body>

</html>

60

31

Microservices – Integration der Benutzeroberfläche© 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>

61

Microservices – Integration der Benutzeroberfläche© 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>

62

32

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

BigPipe Server

private Callable<Boolean> createCallable(final PrintWriter writer, int id) {

return () -> {

try {

pagelet(writer, "content1",

new RestTemplate().getForObject("http://localhost:8081", String.class));

} catch (InterruptedException e) {

return false;

}

return true;

};

}

private void pagelet(PrintWriter writer, String id, String content) {

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

writer.flush();

}

63

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 64

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

AJAX

HTML

AJAX

JSON

Backend

Service Calls

Serverseitiges

Templating

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

33

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Server Integration

65

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Compoxure Composition Middlewarehttps://github.com/tes/compoxure

66

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

34

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 67

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

AJAX

HTML

AJAX

JSON

Backend

Service Calls

Serverseitiges

Templating

Clientseitiges

Templating

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH

Angular 2 – ng-include

68

<!DOCTYPE html>

<html>

<script src="angular.min.js"></script>

<body ng-app="myApp">

<div ng-include="'http://localhost:8081/'"></div>

<div ng-include="'http://localhost:8082/'"></div>

<div ng-include="'http://localhost:8083/'"></div>

<script>

angular.module('myApp', []).config(

function($sceDelegateProvider) {

$sceDelegateProvider.resourceUrlWhitelist([

'http://localhost:8081/**',

'http://localhost:8082/**',

'http://localhost:8083/**' ]);

}

);

</script>

</body>

</html>

35

Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 69

Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Server

Integration

Browser

Integration

Browser

Integration

Backend

Service Calls

AJAX

HTML

Serverseitiges

Templating

AJAX

JSON

Clientseitiges

Templating

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

www.oio.deinfo@oio.de

??

? ?

????

Fragen ?

36

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

www.oio.deinfo@oio.de

Vielen Dank für Ihre Aufmerksamkeit!