Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
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?
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 4
Warum?
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“
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?
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
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?
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 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?
https://circleci.com/blog/its-the-future/
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
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 17
3 Monats-Releases
ContinuousDelivery
2) Schnelle Anpassungen im laufenden Betrieb
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 18
Anforderungen, die auf Microservices zeigen:
1) Elastische Lastanforderungen
2) Schnelle Anpassungen im laufenden Betrieb
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
20
http://martinfowler.com/articles/microservices.html
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
„Microservices“ nach Martin Fowler
Decentralized Data Management
Infrastructure Automation
Evolutionary Design
21
http://martinfowler.com/articles/microservices.html
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 22
Mircoservice reines Backend-Thema?
Spring BootDropWizard
Wildfly Swarm
…
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 23
@SpringBootApplication@RestControllerpublic class Microservice {
public static void main(String[] args) {SpringApplication.run(Microservice.class, args);
}
@RequestMapping("/helloWorld")public String sayHello() {
return "Hello World";}
}
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 24
@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?
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 25
Zunächst der Teil für die
PowerPoint Architekten
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 26
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
VollständigeUI
CompositeUI
BrowserIntegration
BackendService Calls
AJAXHTML
ServerseitigesTemplating
AJAXJSON
ClientseitigesTemplating
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 27
Microservice UI
HTML JSON
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Java-Server generiert HTML
28
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
29
1. GET .html2. GET .js
3. GET .json
HTMLJavaScript
HTMLJavaScript
Java ServletJSON
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 30
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Gemeinsame UI
31
UI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 32
Getrenntes Team für die UI
Saubere Schnittstellen
Vorteile einer gemeinsamen UI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 33
Teams müssen synchronisiert werden
Frontend-Team als Flaschenhals
Nachteile einer gemeinsamen UI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 34
Frontend-Team braucht Wissen über alle Services
"UI Monolit"
Nachteile einer gemeinsamen UI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 35
Verhältnis von Backend zu UI?
50:50?
Dann machen Sie auch nur 50% Microservices!
Nachteile einer gemeinsamen UI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Getrennte UI
36
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Getrennte UI
37
Herausforderungen:
Konsistentes Aussehen?!
Integration in eine UI?!
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 38
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
SharedUI Code
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 39
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 40
Composite UI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 41
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
42
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Browser Integration
43
Browser
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 44
Und nun der Teil für die
Keller-Programmierer
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 45
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX
48
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX Nachteil
49
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX Nachteil 2
50
SEOSuchmaschinenoptimierung
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 51
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 53
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
54
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Backend Service Calls
55
return Stream.of(url1, url2 , url3).parallel().map(url -> restTemplate.getForObject(url, String.class)).collect(Collectors.joining(""));
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Nachteil Backend Service Calls
56
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 57
Client ServiceCircuit
Breaker
Timeout
Timeout
Circuit Breakerverhindert, dass nicht erreichbare Dienste
immer wieder angefragt werden.
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 58
Hystrix Dashboard
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>";
}
}
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Integration mit Hystrix
60
return Stream.of(url1, url2 , url3).parallel().map(RestCallWithHystrix::new).map(RestCallWithHystrix::execute) .collect(Collectors.joining(""));
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Nachteil Backend Integration
61
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
BigPipe Facebook
62
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>
63
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>
64
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>
65
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();
}
66
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 67
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
ServerseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
68
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 70
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
ServerseitigesTemplating
ClientseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
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>
<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>
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 72
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
BackendService Calls
AJAXHTML
ServerseitigesTemplating
AJAXJSON
ClientseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
SCS
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
? ?
??
?Fragen ?
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
Vielen Dank für Ihre
Aufmerksamkeit!