Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH...
Transcript of Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH...
![Page 1: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/1.jpg)
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
Microservices –
Integration der
Benutzeroberfläche
OOP 2017
16.2
![Page 2: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/2.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Ihr Sprecher
2
Thorsten Maier
Trainer, Berater, Entwickler
Sollen wir Microservices
machen?
Kunde
![Page 3: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/3.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 3
Wer hat bereits eine Anwendung mit Microservices
implementiert?
![Page 4: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/4.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 4
Warum?
![Page 5: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/5.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 5
„Das macht man heute so!“
![Page 6: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/6.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 6
„Java Magazin Driven Architecture“
![Page 7: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/7.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 7
Hype oder ist das Tal der Tränen schon durchschritten?
2005 2016?
![Page 8: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/8.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 8
Was sind Microservices?
![Page 9: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/9.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 10: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/10.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 10
Jedes Architekturmuster
hat Vorteile
aber auch Nachteile
![Page 11: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/11.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 11
Wie kommt man zum richtigen Muster?
Nicht-funktionale Anforderungen!
![Page 12: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/12.jpg)
Microservices – Integration der Benutzeroberfläche© 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?
![Page 13: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/13.jpg)
Microservices – Integration der Benutzeroberfläche© 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.
![Page 14: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/14.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 14
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?
https://circleci.com/blog/its-the-future/
![Page 15: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/15.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 15
Anforderungen, die auf Microservices zeigen
![Page 16: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/16.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 16
1) Elastische Lastanforderungen
Last
Zeit
![Page 17: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/17.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 17
3 Monats-Releases
ContinuousDelivery
2) Schnelle Anpassungen im laufenden Betrieb
![Page 18: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/18.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 18
Anforderungen, die auf Microservices zeigen:
1) Elastische Lastanforderungen
2) Schnelle Anpassungen im laufenden Betrieb
![Page 19: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/19.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 19
Doch eine kleine Definition
![Page 20: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/20.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 21: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/21.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
„Microservices“ nach Martin Fowler
Decentralized Data Management
Infrastructure Automation
Evolutionary Design
21
http://martinfowler.com/articles/microservices.html
![Page 22: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/22.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 22
Mircoservice reines Backend-Thema?
Spring BootDropWizard
Wildfly Swarm
…
![Page 23: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/23.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 23
@SpringBootApplication@RestControllerpublic class Microservice {
public static void main(String[] args) {SpringApplication.run(Microservice.class, args);
}
@RequestMapping("/helloWorld")public String sayHello() {
return "Hello World";}
}
![Page 24: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/24.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 24
@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?
![Page 25: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/25.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 25
Zunächst der Teil für die
PowerPoint Architekten
![Page 26: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/26.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 26
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
VollständigeUI
CompositeUI
BrowserIntegration
BackendService Calls
AJAXHTML
ServerseitigesTemplating
AJAXJSON
ClientseitigesTemplating
VollständigeUI
CompositeUI
![Page 27: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/27.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 27
Microservice UI
HTML JSON
![Page 28: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/28.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Java-Server generiert HTML
28
1. GET .html
HTML
Browser
HTTP Server
Java Servlet
HTML
![Page 29: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/29.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
HTTP ServerBrowser
Java-Server als Datenschleuder
29
1. GET .html2. GET .js
3. GET .json
HTMLJavaScript
HTMLJavaScript
Java ServletJSON
![Page 30: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/30.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 30
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
![Page 31: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/31.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Gemeinsame UI
31
UI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
![Page 32: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/32.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 32
Getrenntes Team für die UI
Saubere Schnittstellen
Vorteile einer gemeinsamen UI
![Page 33: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/33.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 33
Teams müssen synchronisiert werden
Frontend-Team als Flaschenhals
Nachteile einer gemeinsamen UI
![Page 34: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/34.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 34
Frontend-Team braucht Wissen über alle Services
"UI Monolit"
Nachteile einer gemeinsamen UI
![Page 35: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/35.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 35
Verhältnis von Backend zu UI?
50:50?
Dann machen Sie auch nur 50% Microservices!
Nachteile einer gemeinsamen UI
![Page 36: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/36.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Getrennte UI
36
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
![Page 37: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/37.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Getrennte UI
37
Herausforderungen:
Konsistentes Aussehen?!
Integration in eine UI?!
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
![Page 38: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/38.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 38
UI 3
Backend 3
UI 2
Backend 2
UI 1
Backend 1
SharedUI Code
![Page 39: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/39.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 39
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 40: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/40.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 40
Composite UI
![Page 41: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/41.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 41
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 42: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/42.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
42
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
![Page 43: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/43.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Browser Integration
43
Browser
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
![Page 44: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/44.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 44
Und nun der Teil für die
Keller-Programmierer
![Page 45: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/45.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 45
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 46: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/46.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX
46
<html><head><title>UI Integration - AJAX</title>
</head><body><div id="content1">-</div><div id="content2">-</div><div id="content3">-</div>
</body></html>
![Page 47: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/47.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX HTML
47
<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>
![Page 48: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/48.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX
48
![Page 49: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/49.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX Nachteil
49
![Page 50: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/50.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX Nachteil 2
50
SEOSuchmaschinenoptimierung
![Page 51: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/51.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 51
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 52: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/52.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
AJAX JSON
52
<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>
![Page 53: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/53.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 53
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 54: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/54.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
54
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
![Page 55: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/55.jpg)
Microservices – Integration der Benutzeroberfläche© 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(""));
![Page 56: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/56.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Nachteil Backend Service Calls
56
![Page 57: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/57.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 57
Client ServiceCircuit
Breaker
Timeout
Timeout
Circuit Breakerverhindert, dass nicht erreichbare Dienste
immer wieder angefragt werden.
![Page 58: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/58.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 58
Hystrix Dashboard
![Page 59: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/59.jpg)
Microservices – Integration der Benutzeroberfläche© 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>";
}
}
![Page 60: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/60.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Integration mit Hystrix
60
return Stream.of(url1, url2 , url3).parallel().map(RestCallWithHystrix::new).map(RestCallWithHystrix::execute) .collect(Collectors.joining(""));
![Page 61: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/61.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Nachteil Backend Integration
61
![Page 62: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/62.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
BigPipe Facebook
62
https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/
![Page 63: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/63.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 64: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/64.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 65: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/65.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 66: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/66.jpg)
Microservices – Integration der Benutzeroberfläche© 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
![Page 67: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/67.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 67
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
ServerseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 68: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/68.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH
Server Integration
68
ServersideUI
BackendMicroservice 3
BackendMicroservice 2
BackendMicroservice 1
Browser
![Page 69: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/69.jpg)
Microservices – Integration der Benutzeroberfläche© 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>
![Page 70: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/70.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 70
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
AJAXHTML
AJAXJSON
BackendService Calls
ServerseitigesTemplating
ClientseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
![Page 71: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/71.jpg)
Microservices – Integration der Benutzeroberfläche© 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>
![Page 72: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/72.jpg)
Microservices – Integration der Benutzeroberfläche© Orientation in Objects GmbH 72
Microservice UI
HTML JSON
GemeinsameUI
GetrennteUI
GemeinsameUI
GetrennteUI
ServerIntegration
BrowserIntegration
BrowserIntegration
BackendService Calls
AJAXHTML
ServerseitigesTemplating
AJAXJSON
ClientseitigesTemplating
VollständigeUI
CompositeUI
VollständigeUI
CompositeUI
SCS
![Page 73: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/73.jpg)
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
? ?
??
?Fragen ?
![Page 74: Microservices Integration der Benutzeroberfläche · 2017-02-15 · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Microservices – Integration](https://reader035.fdocument.pub/reader035/viewer/2022070722/5ee37047ad6a402d666d4e24/html5/thumbnails/74.jpg)
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
Vielen Dank für Ihre
Aufmerksamkeit!