Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: [email protected] Microservices – Integration

Orientation in Objects GmbH

Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]:

Microservices –

Integration der

Benutzeroberfläche

OOP 2017

16.2

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

Ihr Sprecher

2

Thorsten Maier

Trainer, Berater, Entwickler

Sollen wir Microservices

machen?

Kunde

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

Wer hat bereits eine Anwendung mit Microservices

implementiert?


Warum?


„Das macht man heute so!“


„Java Magazin Driven Architecture“


Hype oder ist das Tal der Tränen schon durchschritten?

2005 2016?


Was sind Microservices?


„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


Jedes Architekturmuster

hat Vorteile

aber auch Nachteile


Wie kommt man zum richtigen Muster?

Nicht-funktionale Anforderungen!


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?



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.


So I just need to split my simple CRUD app into 12 microservices,

each with their own APIswhich handle failure resiliently, put them into Docker containers,

launch a fleet of 8 machineswhich 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 delivermultiple redundant copies of each microservice to my fleet.

Is that it?



Anforderungen, die auf Microservices zeigen


1) Elastische Lastanforderungen

Last

Zeit


3 Monats-Releases

ContinuousDelivery

2) Schnelle Anpassungen im laufenden Betrieb


Anforderungen, die auf Microservices zeigen:

1) Elastische Lastanforderungen

2) Schnelle Anpassungen im laufenden Betrieb


Doch eine kleine Definition


„Microservices“ nach Martin Fowler

Componentization via Services

Organized around Business Capabilities

Products not Projects

20

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


„Microservices“ nach Martin Fowler

Decentralized Data Management

Infrastructure Automation

Evolutionary Design

21

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


Mircoservice reines Backend-Thema?

Spring BootDropWizard

Wildfly Swarm

…


@SpringBootApplication@RestControllerpublic class Microservice {

public static void main(String[] args) {SpringApplication.run(Microservice.class, args);

}

@RequestMapping("/helloWorld")public String sayHello() {

return "Hello World";}

}


@SpringBootApplication@RestControllerpublic 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?


Zunächst der Teil für die

PowerPoint Architekten


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

VollständigeUI

CompositeUI

BrowserIntegration

BackendService Calls

AJAXHTML

ServerseitigesTemplating

AJAXJSON

ClientseitigesTemplating

VollständigeUI

CompositeUI


Microservice UI

HTML JSON


Java-Server generiert HTML

28

1. GET .html

HTML

Browser

HTTP Server

Java Servlet

HTML


HTTP ServerBrowser

Java-Server als Datenschleuder

29

1. GET .html2. GET .js

3. GET .json

HTMLJavaScript

HTMLJavaScript

Java ServletJSON


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI


Gemeinsame UI

31

UI

BackendMicroservice 3




Getrenntes Team für die UI

Saubere Schnittstellen

Vorteile einer gemeinsamen UI


Teams müssen synchronisiert werden

Frontend-Team als Flaschenhals

Nachteile einer gemeinsamen UI


Frontend-Team braucht Wissen über alle Services

"UI Monolit"



Verhältnis von Backend zu UI?

50:50?

Dann machen Sie auch nur 50% Microservices!



Getrennte UI

36

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1


Getrennte UI

37

Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1


UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

SharedUI Code


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


Composite UI


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


Server Integration

42

ServersideUI




Browser


Browser Integration

43

Browser





Und nun der Teil für die

Keller-Programmierer


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

AJAXHTML

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


AJAX

46

<html><head><title>UI Integration - AJAX</title>

</head><body><div id="content1">-</div><div id="content2">-</div><div id="content3">-</div>

</body></html>


AJAX HTML

47

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


AJAX

48


AJAX Nachteil

49


AJAX Nachteil 2

50

SEOSuchmaschinenoptimierung


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


AJAX JSON

52

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


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

AJAXHTML

AJAXJSON


VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


Server Integration

54

ServersideUI




Browser


Backend Service Calls

55

return Stream.of(url1, url2 , url3).parallel().map(url -> restTemplate.getForObject(url, String.class)).collect(Collectors.joining(""));


Nachteil Backend Service Calls

56


Client ServiceCircuit

Breaker

Timeout

Timeout

Circuit Breakerverhindert, dass nicht erreichbare Dienste

immer wieder angefragt werden.


Hystrix Dashboard


Hystrix Command

59

public class RestCallWithHystrix extends HystrixCommand<String> {

private RestTemplate restTemplate = new RestTemplate();

private String url;

@Override

protected String run() {

return restTemplate.getForObject(url, String.class);

}

@Override

protected String getFallback() {

return "<div style=\"color: #F00;\">Error: " + url + "</div>";

}

}


Integration mit Hystrix

60

return Stream.of(url1, url2 , url3).parallel().map(RestCallWithHystrix::new).map(RestCallWithHystrix::execute) .collect(Collectors.joining(""));


Nachteil Backend Integration

61


BigPipe Facebook

62

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


BigPipe I

<html><head>

</head><body>


</body></html>

63


BigPipe II

<html><head>

<script type="text/javascript">function arrived(id, text) {

document.getElementById(id).innerHTML = text; }



</body></html>

64


BigPipe III

<html><head>

<script type="text/javascript">function arrived(id, text) {

document.getElementById(id).innerHTML = text; }


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

65


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

}

66


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

AJAXHTML

AJAXJSON



VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


Server Integration

68

ServersideUI




Browser


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

69

<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

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration

AJAXHTML

AJAXJSON




VollständigeUI

CompositeUI

VollständigeUI

CompositeUI


Angular 2 – ng-include

71

<!DOCTYPE html>

<html>

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

<body ng-app="myApp">

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



<script>

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

function($sceDelegateProvider) {

$sceDelegateProvider.resourceUrlWhitelist([

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

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

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

}

);

</script>

</body>

</html>


Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

BrowserIntegration


AJAXHTML


AJAXJSON


VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

SCS


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

? ?

??

?Fragen ?


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

Vielen Dank für Ihre

Aufmerksamkeit!

Documents

Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: [email protected] Microservices – Integration