microservice ui composition - oio-die java …...1 orientation in objects gmbh weinheimer str. 68...
Post on 22-May-2020
12 Views
Preview:
TRANSCRIPT
1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
www.oio.deinfo@oio.deVersion:
Microservice UI Composition
16.1
Microservice UI Composition© Orientation in Objects GmbH
Ihr Sprecher
2
Thorsten Maier
Trainer, Berater, Entwickler
Sollen wir
Microservices
machen?
Kunde
2
Microservice UI Composition© Orientation in Objects GmbH 3
Wer hat bereits eine
Anwendung mit Microservices
implementiert?
Microservice UI Composition© Orientation in Objects GmbH 4
Warum?
3
Microservice UI Composition© Orientation in Objects GmbH 5
„Das macht man heute so!“
Microservice UI Composition© Orientation in Objects GmbH 6
„Java Magazin
Driven Architecture“
4
Microservice UI Composition© Orientation in Objects GmbH 7
Hype oder ist das Tal
der Tränen schon
durchschritten?
2005 2016?
Microservice UI Composition© Orientation in Objects GmbH 8
Was sind
Microservices?
5
Microservice UI Composition© 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
Microservice UI Composition© Orientation in Objects GmbH 10
Jedes Architekturmuster
hat Vorteile
aber auch Nachteile
6
Microservice UI Composition© Orientation in Objects GmbH 11
Wie kommt man zum richtigen Muster?
Nicht-funktionale Anforderungen!
Microservice UI Composition© 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
Microservice UI Composition© 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.
Microservice UI Composition© 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
Microservice UI Composition© Orientation in Objects GmbH 15
Anforderungen, die auf Microservices zeigen
Microservice UI Composition© Orientation in Objects GmbH 16
1) Elastische Lastanforderungen
Last
Zeit
9
Microservice UI Composition© Orientation in Objects GmbH 17
3 Monats-
Releases
Continuous
Delivery
2) Schnelle Anpassungen im laufenden Betrieb
Microservice UI Composition© Orientation in Objects GmbH 18
Anforderungen, die auf Microservices zeigen:
1) Elastische Lastanforderungen
2) Schnelle Anpassungen im
laufenden Betrieb
10
Microservice UI Composition© Orientation in Objects GmbH 19
Doch eine kleine Definition
Microservice UI Composition© 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
11
Microservice UI Composition© Orientation in Objects GmbH
„Microservices“ nach Martin Fowler
Decentralized Data Management
Infrastructure Automation
Evolutionary Design
21
http://martinfowler.com/articles/microservices.html
Microservice UI Composition© Orientation in Objects GmbH 22
Mircoservice reines Backend-Thema?
Spring Boot
DropWizard
Wildfly Swarm
…
12
Microservice UI Composition© 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";
}
}
Microservice UI Composition© Orientation in Objects GmbH 24
@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?
13
Microservice UI Composition© Orientation in Objects GmbH 25
Zunächst der Teil für die
PowerPoint Architekten
Microservice UI Composition© Orientation in Objects GmbH 26
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
14
Microservice UI Composition© Orientation in Objects GmbH 27
Microservice UI
HTML JSON
Microservice UI Composition© Orientation in Objects GmbH
Java-Server generiert HTML
28
1. GET .html
HTML
Browser
HTTP Server
Java Servlet
HTML
15
Microservice UI Composition© Orientation in Objects GmbH
Java-Server generiert HTML
29
1. GET .html
HTML
Browser
HTTP Server
Java Servlet
HTML
Microservice UI Composition© Orientation in Objects GmbH
HTTP ServerBrowser
Java-Server als Datenschleuder
30
1. GET .html
2. GET .js
3. GET .json
HTML
JavaScriptHTML
JavaScript
Java ServletJSON
16
Microservice UI Composition© Orientation in Objects GmbH 31
Microservice UI
HTML JSON
Gemeinsame
UI
Getrennte
UI
Gemeinsame
UI
Getrennte
UI
Microservice UI Composition© Orientation in Objects GmbH
Gemeinsame UI
32
UI
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
17
Microservice UI Composition© Orientation in Objects GmbH 33
Getrenntes Team für die UI
Saubere Schnittstellen
Vorteile einer gemeinsamen UI
Microservice UI Composition© Orientation in Objects GmbH 34
Teams müssen synchronisiert werden
Frontend-Team als Flaschenhals
Nachteile einer gemeinsamen UI
18
Microservice UI Composition© Orientation in Objects GmbH 35
Frontend-Team braucht Wissen über alle Services
"UI Monolit"
Nachteile einer gemeinsamen UI
Microservice UI Composition© Orientation in Objects GmbH 36
Verhältnis von Backend zu UI?
50:50?
Dann machen Sie auch nur 50% Microservices!
Nachteile einer gemeinsamen UI
19
Microservice UI Composition© Orientation in Objects GmbH
Getrennte UI
37
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
Microservice UI Composition© Orientation in Objects GmbH
Getrennte UI
38
Herausforderungen:
Konsistentes Aussehen?!
Integration in eine UI?!
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
20
Microservice UI Composition© Orientation in Objects GmbH 39
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
Shared
UI Code
Microservice UI Composition© Orientation in Objects GmbH 40
Microservice UI
HTML JSON
Gemeinsame
UI
Getrennte
UI
Gemeinsame
UI
Getrennte
UI
Vollständige
UI
Composite
UI
Vollständige
UI
Composite
UI
21
Microservice UI Composition© Orientation in Objects GmbH 41
Composite UI
Microservice UI Composition© Orientation in Objects GmbH 42
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
22
Microservice UI Composition© Orientation in Objects GmbH
Server Integration
43
Serverside
UI
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
Browser
Microservice UI Composition© Orientation in Objects GmbH
Browser Integration
44
Browser
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
23
Microservice UI Composition© Orientation in Objects GmbH 45
Und nun der Teil für die
Keller-Programmierer
Microservice UI Composition© Orientation in Objects GmbH 46
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
24
Microservice UI Composition© Orientation in Objects GmbH
AJAX
47
<html>
<head>
<title>UI Integration - AJAX</title>
</head>
<body>
<div id="content1">-</div>
<div id="content2">-</div>
<div id="content3">-</div>
</body>
</html>
Microservice UI Composition© Orientation in Objects GmbH
AJAX HTML
48
<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>
25
Microservice UI Composition© Orientation in Objects GmbH
AJAX
49
Microservice UI Composition© Orientation in Objects GmbH
AJAX Nachteil
50
26
Microservice UI Composition© Orientation in Objects GmbH
AJAX Nachteil 2
51
SEOSuchmaschinenoptimierung
Microservice UI Composition© 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
Vollständige
UI
Composite
UI
Vollständige
UI
Composite
UI
27
Microservice UI Composition© Orientation in Objects GmbH
AJAX JSON
53
<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 Composition© Orientation in Objects GmbH 54
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
28
Microservice UI Composition© 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(""));
Microservice UI Composition© Orientation in Objects GmbH
Nachteil Backend Service Calls
56
29
Microservice UI Composition© Orientation in Objects GmbH 57
Client ServiceCircuit
Breaker
Timeout
Timeout
Circuit Breakerverhindert, dass nicht erreichbare Dienste
immer wieder angefragt werden.
Microservice UI Composition© Orientation in Objects GmbH 58
Hystrix Dashboard
30
Microservice UI Composition© 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>";
}
}
Microservice UI Composition© Orientation in Objects GmbH
Integration mit Hystrix
60
return Stream.of(url1, url2 , url3)
.parallel()
.map(RestCallWithHystrix::new)
.map(RestCallWithHystrix::execute)
.collect(Collectors.joining(""));
31
Microservice UI Composition© Orientation in Objects GmbH
Nachteil Backend Integration
61
Microservice UI Composition© Orientation in Objects GmbH
BigPipe Facebook
62
https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/
32
Microservice UI Composition© 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
Microservice UI Composition© 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
33
Microservice UI Composition© 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
Microservice UI Composition© 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
34
Microservice UI Composition© 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
Vollständige
UI
Composite
UI
Vollständige
UI
Composite
UI
Microservice UI Composition© Orientation in Objects GmbH
Server Integration
68
Serverside
UI
Backend
Microservice 3
Backend
Microservice 2
Backend
Microservice 1
Browser
35
Microservice UI Composition© 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>
Microservice UI Composition© Orientation in Objects GmbH 70
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
36
Microservice UI Composition© 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>
Microservice UI Composition© Orientation in Objects GmbH 72
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
SCS
top related