Microservice UI Composition

Transkript

1 Microservice Composition Orientation in Objects GmbH Weinheimer Str Mannheim Version: Ihr Sprecher Thorsten Maier Trainer, Berater, Entwickler Sollen wir Microservices machen? Kunde Microservice Composition 2 1

2 Wer hat bereits eine Anwendung mit Microservices implementiert? Microservice Composition 3 Warum? Microservice Composition 4 2

3 Das macht man heute so! Microservice Composition 5 Java Magazin Driven Architecture Microservice Composition 6 3

4 Hype oder ist das Tal der Tränen schon durchschritten? ? Microservice Composition 7 Was sind Microservices? Microservice Composition 8 4

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. Microservice Composition 9 Jedes Architekturmuster hat Vorteile aber auch Nachteile Microservice Composition 10 5

6 Wie kommt man zum richtigen Muster? Nicht-funktionale Anforderungen! Microservice Composition 11 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? Microservice Composition 12 6

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. Microservice Composition 13 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? Microservice Composition 14 7

8 Anforderungen, die auf Microservices zeigen Microservice Composition 15 Last 1) Elastische Lastanforderungen Zeit Microservice Composition 16 8

9 3 Monats- Releases Continuous Delivery 2) Schnelle Anpassungen im laufenden Betrieb Microservice Composition 17 Anforderungen, die auf Microservices zeigen: 1) Elastische Lastanforderungen 2) Schnelle Anpassungen im laufenden Betrieb Microservice Composition 18 9

10 Doch eine kleine Definition Microservice Composition 19 Microservices nach Martin Fowler Componentization via Services Organized around Business Capabilities Products not Projects Microservice Composition 20 10

11 Microservices nach Martin Fowler Decentralized Data Management Infrastructure Automation Evolutionary Design Microservice Composition 21 Mircoservice reines Backend-Thema? Spring Boot DropWizard Wildfly Swarm Microservice Composition 22 11

12 public class Microservice { } public static void main(string[] args) { SpringApplication.run(Microservice.class, args); public String sayhello() { return "Hello World"; } Microservice public class Microservice { Was ist mit der? public static void main(string[] args) { SpringApplication.run(Microservice.class, args); public String sayhello() { return "Hello World"; } } Microservice Composition 24 12

13 Zunächst der Teil für die PowerPoint Architekten Microservice Composition 25 Microservice JSON Server Vollständige Composite Vollständige Composite Backend Service Calls AJAX Serverseitiges Templating AJAX JSON Clientseitiges Templating Microservice Composition 26 13

14 Microservice JSON Microservice Composition 27 Java-Server generiert 1. GET.html HTTP Server Java Servlet Microservice Composition 28 14

15 Java-Server generiert 1. GET.html HTTP Server Java Servlet Microservice Composition 29 Java-Server als Datenschleuder JavaScript 1. GET.html 2. GET.js HTTP Server JavaScript JSON 3. GET.json Java Servlet Microservice Composition 30 15

16 Microservice JSON Microservice Composition 31 Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 Microservice Composition 32 16

17 Vorteile einer gemeinsamen s Team für die Saubere Schnittstellen Microservice Composition 33 Nachteile einer gemeinsamen Teams müssen synchronisiert werden Frontend-Team als Flaschenhals Microservice Composition 34 17

18 Nachteile einer gemeinsamen Frontend-Team braucht Wissen über alle Services " Monolit" Microservice Composition 35 Nachteile einer gemeinsamen Verhältnis von Backend zu? 50:50? Dann machen Sie auch nur 50% Microservices! Microservice Composition 36 18

19 1 2 3 Backend 1 Backend 2 Backend 3 Microservice Composition 37 Herausforderungen: Konsistentes Aussehen?! in eine?! Backend 1 Backend 2 Backend 3 Microservice Composition 38 19

20 Shared Code Backend 1 Backend 2 Backend 3 Microservice Composition 39 Microservice JSON Vollständige Composite Vollständige Composite Microservice Composition 40 20

21 Composite Microservice Composition 41 Microservice JSON Server Vollständige Composite Vollständige Composite Microservice Composition 42 21

22 Server Serverside Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 Microservice Composition 43 Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 Microservice Composition 44 22

23 Und nun der Teil für die Keller-Programmierer Microservice Composition 45 Microservice JSON Server Vollständige Composite Vollständige Composite AJAX Microservice Composition 46 23

24 AJAX <html> <head> <title> - AJAX</title> </head> <body> <div id="content1">-</div> <div id="content2">-</div> <div id="content3">-</div> </body> </html> Microservice Composition 47 AJAX <html> <head> <title> - AJAX</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $("#content1").load(" $("#content2").load(" $("#content3").load(" }); </script> </head> <body> <div id="content1">-</div> <div id="content2">-</div> <div id="content3">-</div> </body> </html> Microservice Composition 48 24

25 AJAX Microservice Composition 49 AJAX Nachteil Microservice Composition 50 25

26 AJAX Nachteil 2 SEO Suchmaschinenoptimierung Microservice Composition 51 Microservice JSON Server Vollständige Composite Vollständige Composite AJAX AJAX JSON Microservice Composition 52 26

27 AJAX JSON <html> <head> <title> - AJAX</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { loadjsondata(" "#content1"); loadjsondata(" "#content2"); loadjsondata(" "#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 Composition 53 Microservice JSON Server Vollständige Composite Vollständige Composite Backend Service Calls AJAX AJAX JSON Microservice Composition 54 27

28 Backend Service Calls return Stream.of(url1, url2, url3).parallel().map(url -> resttemplate.getforobject(url, String.class)).collect(Collectors.joining("")); Microservice Composition 55 Nachteil Backend Service Calls Microservice Composition 56 28

29 Client Circuit Breaker Service Timeout Circuit Breaker verhindert, dass nicht erreichbare Dienste immer wieder angefragt werden. Timeout Microservice Composition 57 Hystrix Dashboard Microservice Composition 58 29

30 Hystrix Command public class RestCallWithHystrix extends HystrixCommand<String> { } private RestTemplate resttemplate = new RestTemplate(); private String protected String run() { return resttemplate.getforobject(url, String.class); protected String getfallback() { return "<div style=\"color: #F00;\">Error: " + url + "</div>"; } Microservice Composition 59 mit Hystrix return Stream.of(url1, url2, url3).parallel().map(restcallwithhystrix::new).map(restcallwithhystrix::execute).collect(collectors.joining("")); Microservice Composition 60 30

31 Nachteil Backend Microservice Composition 61 BigPipe Facebook Microservice Composition 62 31

32 BigPipe I <html> <head> </head> <body> <div id="content1">-</div> <div id="content2">-</div> <div id="content3">-</div> </body> </html> Microservice Composition 63 BigPipe II <html> <head> <script type="text/javascript"> function arrived(id, text) { document.getelementbyid(id).inner = text; } </script> </head> <body> <div id="content1">-</div> <div id="content2">-</div> <div id="content3">-</div> </body> </html> Microservice Composition 64 32

33 BigPipe III <html> <head> <script type="text/javascript"> function arrived(id, text) { document.getelementbyid(id).inner = 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> Microservice Composition 65 BigPipe Server private Callable<Boolean> createcallable(final PrintWriter writer, int id) { return () -> { try { pagelet(writer, "content1", new RestTemplate().getForObject(" 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 Composition 66 33

34 Microservice JSON Server Vollständige Composite Vollständige Composite Backend Service Calls AJAX Serverseitiges Templating AJAX JSON Microservice Composition 67 Server Serverside Backend Microservice 1 Backend Microservice 2 Backend Microservice 3 Microservice Composition 68 34

35 Compoxure Composition Middleware <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 Composition 69 Microservice JSON Server Vollständige Composite Vollständige Composite Backend Service Calls AJAX Serverseitiges Templating AJAX JSON Clientseitiges Templating Microservice Composition 70 35

36 Angular 2 ng-include <!DOCTYPE html> <html> <script src="angular.min.js"></script> <body ng-app="myapp"> <div ng-include="' <div ng-include="' <div ng-include="' <script> angular.module('myapp', []).config( function($scedelegateprovider) { $scedelegateprovider.resourceurlwhitelist([ ' ' ' ]); } ); </script> </body> </html> Microservice Composition 71 Microservice JSON Server Vollständige Composite Vollständige Composite Backend Service Calls AJAX Serverseitiges Templating AJAX JSON SCS Clientseitiges Templating Microservice Composition 72 36

37 ?? Fragen??? Orientation Objects GmbH Weinheimer Str Mannheim Vielen Dank für Ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim 37