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

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

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?


Warum?

3


„Das macht man heute so!“


„Java Magazin

Driven Architecture“

4


Hype oder ist das Tal

der Tränen schon

durchschritten?

2005 2016?


Was sind

Microservices?

5


„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

6


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?

7



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


8


Anforderungen, die auf Microservices zeigen


1) Elastische Lastanforderungen

Last

Zeit

9


3 Monats-

Releases

Continuous

Delivery

2) Schnelle Anpassungen im laufenden Betrieb


Was ist mit Modularisierung?

Ja, aber…!

10


Doch eine kleine Definition


„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


Mircoservice reines Backend-Thema?

Spring Boot

DropWizard

Wildfly Swarm

…


@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


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


Zunächst der Teil für die

PowerPoint Architekten

13


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


Microservice UI

HTML JSON

14


Java-Server generiert HTML

27

1. GET .html

HTML

Browser

HTTP Server

Java Servlet

HTML


HTTP ServerBrowser

Java-Server als Datenschleuder

28

1. GET .html

2. GET .js

3. GET .json

HTML

JavaScriptHTML

JavaScript

Java ServletJSON

15


Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI


Gemeinsame UI

30

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

16


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

17


Frontend-Team braucht Wissen über alle Services

"UI Monolit"



Verhältnis von Backend zu UI?

50:50?

Dann machen Sie auch nur 50% Microservices!


18


Getrennte UI

35

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1


Getrennte UI

36

Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

19


UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

Shared

UI Code


Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI

20


Composite UI


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


Server Integration

41

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser


Browser Integration

42

Browser

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

22


Und nun der Teil für die

Keller-Programmierer


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


AJAX

45

<html>

<head>

<title>UI Integration - AJAX</title>

</head>

<body>

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



</body>

</html>


AJAX HTML

46

<html>

<head>


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

<script type="text/javascript">

$(function() {

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



});

</script>

</head>

<body>




</body>

</html>

24


AJAX

47


AJAX Nachteil

48

25


AJAX Nachteil 2

49

SEOSuchmaschinenoptimierung


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


AJAX JSON

51

<html>

<head>


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


$(function() {

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



function loadJSONData(url, domId) {

$.get(url, function(data) {

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

});

}

});

</script>

</head>

<body>




</body>

</html>


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


Server Integration

53

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser


Backend Service Calls

54

return Stream.of(url1, url2 , url3)

.parallel()

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

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

28


Nachteil Backend Service Calls

55


Client ServiceCircuit

Breaker

Timeout

Timeout

Circuit Breakerverhindert, dass nicht erreichbare Dienste

immer wieder angefragt werden.

29


Hystrix Dashboard


Nachteil Backend Integration

58

30


BigPipe Facebook

59

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


BigPipe I

<html>

<head>

</head>

<body>




</body>

</html>

60

31


BigPipe II

<html>

<head>


function arrived(id, text) {

document.getElementById(id).innerHTML = text;

}

</script>

</head>

<body>




</body>

</html>

61


BigPipe III

<html>

<head>


function arrived(id, text) {

document.getElementById(id).innerHTML = text;

}

</script>

</head>

<body>




<script>arrived("content3", "Wohooo 3");</script>



</body>

</html>

62

32


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


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


Server Integration

65

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser


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


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


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>



<script>

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

function($sceDelegateProvider) {

$sceDelegateProvider.resourceUrlWhitelist([

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

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

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

}

);

</script>

</body>

</html>

35


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



[email protected]

??

? ?

????

Fragen ?

36



[email protected]

Vielen Dank für Ihre Aufmerksamkeit!

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

Documents