Microservice UI Composition - OIO-Die Java …...1 Orientation in Objects GmbH Weinheimer Str. 68...

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

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?


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


Anforderungen, die auf Microservices zeigen:

1) Elastische Lastanforderungen

2) Schnelle Anpassungen im

laufenden Betrieb

10


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

11


„Microservices“ nach Martin Fowler

Decentralized Data Management

Infrastructure Automation

Evolutionary Design

21

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


Mircoservice reines Backend-Thema?

Spring Boot

DropWizard

Wildfly Swarm

…

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

}

}


@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


Zunächst der Teil für die

PowerPoint Architekten


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

HTML JSON


Java-Server generiert HTML

28

1. GET .html

HTML

Browser

HTTP Server

Java Servlet

HTML

15


Java-Server generiert HTML

29

1. GET .html

HTML

Browser

HTTP Server

Java Servlet

HTML


HTTP ServerBrowser

Java-Server als Datenschleuder

30

1. GET .html

2. GET .js

3. GET .json

HTML

JavaScriptHTML

JavaScript

Java ServletJSON

16


Microservice UI

HTML JSON

Gemeinsame

UI

Getrennte

UI

Gemeinsame

UI

Getrennte

UI


Gemeinsame UI

32

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

17


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

18


Frontend-Team braucht Wissen über alle Services

"UI Monolit"



Verhältnis von Backend zu UI?

50:50?

Dann machen Sie auch nur 50% Microservices!


19


Getrennte UI

37

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1


Getrennte UI

38

Herausforderungen:

Konsistentes Aussehen?!

Integration in eine UI?!

UI 3

Backend 3

UI 2

Backend 2

UI 1

Backend 1

20


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

21


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

22


Server Integration

43

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser


Browser Integration

44

Browser

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

23


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

24


AJAX

47

<html>

<head>

<title>UI Integration - AJAX</title>

</head>

<body>

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



</body>

</html>


AJAX HTML

48

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

25


AJAX

49


AJAX Nachteil

50

26


AJAX Nachteil 2

51

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

27


AJAX JSON

53

<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

28


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

29


Client ServiceCircuit

Breaker

Timeout

Timeout

Circuit Breakerverhindert, dass nicht erreichbare Dienste

immer wieder angefragt werden.


Hystrix Dashboard

30


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

31


Nachteil Backend Integration

61


BigPipe Facebook

62

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

32


BigPipe I

<html>

<head>

</head>

<body>




</body>

</html>

63


BigPipe II

<html>

<head>


function arrived(id, text) {

document.getElementById(id).innerHTML = text;

}

</script>

</head>

<body>




</body>

</html>

64

33


BigPipe III

<html>

<head>


function arrived(id, text) {

document.getElementById(id).innerHTML = text;

}

</script>

</head>

<body>




<script>arrived("content3", "Wohooo 3");</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

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

Vollständige

UI

Composite

UI

Vollständige

UI

Composite

UI


Server Integration

68

Serverside

UI

Backend

Microservice 3

Backend

Microservice 2

Backend

Microservice 1

Browser

35


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

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


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

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

37



[email protected]

??

? ?

????

Fragen ?



[email protected]

Vielen Dank für Ihre Aufmerksamkeit!

Microservice UI Composition - OIO-Die Java …...1 Orientation in Objects GmbH Weinheimer Str. 68...

Documents

Transcript of Microservice UI Composition - OIO-Die Java …...1 Orientation in Objects GmbH Weinheimer Str. 68...