Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH...

Orientation in Objects GmbH

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.deVersion:

Microservices –

Integration der

Benutzeroberfläche

OOP 2017

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

Ihr Sprecher

Thorsten Maier

Trainer, Berater, Entwickler

Sollen wir Microservices

machen?

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

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

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

„Microservices“ nach Martin Fowler

Decentralized Data Management

Infrastructure Automation

Evolutionary Design

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

1. GET .html

Browser

HTTP Server

Java Servlet

HTTP ServerBrowser

Java-Server als Datenschleuder

1. GET .html2. GET .js

3. GET .json

HTMLJavaScript

Java ServletJSON

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

Gemeinsame 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

Backend 3

Backend 2

Backend 1

Getrennte UI

Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

Backend 3

Backend 2

Backend 1

Backend 3

Backend 2

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

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

Server Integration

ServersideUI

Browser

Browser Integration

Browser

Und nun der Teil für die

Keller-Programmierer

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

AJAXHTML

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

<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

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

AJAX Nachteil 2

SEOSuchmaschinenoptimierung

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

AJAX JSON

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

</body></html>

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

Server Integration

ServersideUI

Browser

Backend Service Calls

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

Nachteil Backend Service Calls

Client ServiceCircuit

Breaker

Timeout

Circuit Breakerverhindert, dass nicht erreichbare Dienste

immer wieder angefragt werden.

Hystrix Dashboard

Hystrix Command

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

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

Nachteil Backend Integration

BigPipe Facebook

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

BigPipe I

</head><body>

</body></html>

BigPipe II

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

</body></html>

BigPipe III

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>

BigPipe Server

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

return () -> {

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

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

Server Integration

ServersideUI

Browser

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

This content will be replaced on the way through

</div>

Microservice UI

HTML JSON

GemeinsameUI

GetrennteUI

GemeinsameUI

GetrennteUI

ServerIntegration

BrowserIntegration

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

Angular 2 – ng-include

<!DOCTYPE html>

<html>

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

AJAXHTML

AJAXJSON

VollständigeUI

CompositeUI

VollständigeUI

CompositeUI

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.de

?Fragen ?

Weinheimer Str. 68

68309 Mannheim

www.oio.de

info@oio.de

Vielen Dank für Ihre

Aufmerksamkeit!

Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH...

Documents

Transcript of Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH...

Ist Ihr Unternehmen reif für Microservices?

Die dunkle Seite der Microservices - und wie du sie besiegen kannst

Microservices für .Net Entwickler - BridgingIT GmbHblog.bridging-it.de/media/blog/artikel/tobias... · Microservices für .Net Entwickler 01.06.2017 .Net Developer Group Ulm Bilder:

Design, Deployment und Betreiben von Microservices mit Docker ...

Frontend Architektur für Microservices - trion …...2019/11/06 · für Microservices Thomas Kruse trion development GmbH Training - Beratung - Entwicklung Kubernetes Spring Boot

DDD und Microservices bei Etengo im Einsatz€¦ · Microservices auf der grünen Wiese • Neuentwicklung einer bestehenden Anwendung • Anforderungen des Kunden: • Web-Anwendung

ECHO - embarc · Wie Microservices-Ansätze scheitern – fünf Antipatterns / Foliendownload zum Vortrag von Stefan Toth Microservices sind in aller Munde, und immer mehr Initiativen

Megabibliotheken und Microservices

SCRUM - oio.de · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: 1.0 info@oio.de SCRUM Erfahrungen im Kleinen und Großen Matthias Niete

microservices und domain-driven design - Digicomp · 2017-10-24 · Microservices im Zusammenspiel mit Domain-driven Design-Digicomp DevDay 2017 Microservices und Domain-driven Design

Esper - Open Source Complex Event Processing - oio.de · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: 1.3 info@oio.de Esper - Open Source Complex Event

Microservices. · Microservices. Worauf es wirklich ankommt. ... • Fail fast. • Retry once/twice ... • Mod 3 - Sharded with Repeat twice and failover to next node. Non-Mod-able

Microservices in Java

Softwarearchitektur für alle!?...Microservices-Stil Softwarearchitektur für alle!? embarc.de 16 These. “Moderne Architekturansätze wie beispielsweise Microservices und Self-contained

Von Continuous Integration zu Continuous Delivery...1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Von Continuous Integration zu Continuous Delivery

Agile Architekturen und Microservices · 2017-05-17 · Agile Architekturen und Microservices ppAgile Softwarearchitektur ppMicroservices – nur für Big Player oder auch für KMUs?

Micro, Nano, Mono? Microservices verständlich erklärt

Eberhard Wolff - dpunkt.verlag6 Grundlagen: Microservices Begründung ISA zeigt, dass Microservices eine Art der Modularisierung sind (Prinzip 1). Dadurch können Ideen wie Information

Continuous Integration und Delivery von Microservices mit ... · Continuous Integration und Delivery von Microservices mit GitLab CI Christine Koppelt, Philipp Haußleiter Frankfurter

Microservices. - bedconbed-con.org/2015/files/slides/Microservices_Leon_Rosenberg.pdf · Microservices. Worauf es wirklich ankommt. Leon Rosenberg @dvayanu Bed Con 2015. Who am I