DevDay 2017: Bert Radke - Der Frontend Monolith

•

0 gefällt mir•913 views

Seit ein paar Jahren sind Microservices in aller Munde. Wir entwickeln Services in verteilten Teams, nehmen Code- und Datenduplizierung in Kauf damit die Services unabhängig entwickelt und deployed werden können. Während Spring Boot eine effektive Erstellung und Betrieb von Backend-Microservices erlaubt, scheint eine vergleichbare Technologie für das Frontend zu fehlen. Im Vortrag werde ich die daraus resultierenden Probleme sowie mögliche Auswege untersuchen.

Software

VERSPRECHEN MICROSERVICES
unabhängige Weiterentwicklung
unabhängiges Deployment
Skalierbarkeit
Entkopplung der Teams

AUFWAND / KOSTEN
Code Doppelung
Daten Doppelung
Administration
Automatisierung

SELF CONTAINED SYSTEMS
'große Microservices'?
Abhängigkeiten zwischen Services minimieren

.. und sie lebten glücklich bis an ihr Lebensende?

Search
Recommendation
Catalog
Order
...
UI

AUFWAND / KOSTEN
+ Organisation
+ Koordination

OPTIONEN DER INTEGRATION
Was integrieren wir? (Code / Daten)
Wo integrieren wir? (Frontend / Backend)

INTEGRATION PER DATEN
Team bis 'Oberkante API'
UI vom nutzendem Team gebaut

INTEGRATION PER CODE
Team erstellt auch Code für das UI
Kopplung zwischen Teams

INTEGRATION PER CONTENT
'Transclude'
Frontend: CSI
Backend: SSI / ESI

Order
Search
Catalog
<html>
...
   <esi:include
      src="http://order.1"
      alt="http://order.2"/>
...
<esi:include
      src="http://search.1"
      alt="http://search.2"/>
...
<esi:include
      src="http://catalog.1"
      alt="http://catalog.2"/>
...
</html>
         http://example.com

INTEGRATION IM FRONTEND
Link: "das magische Integrationskonzept" (Stefan Tilkov)
iFrame

INTEGRATION IM FRONTEND / CSI
Javascript

HINCLUDE
<hx:include src="/search">
    <div>
        <input>
        <button>Search</button>
    </div>
</hx:include>
http://mnot.github.io/hinclude/

H-INCLUDE
<hinclude src="/search">
    <div>
        <input>
        <button>Search</button>
    </div>
</hinclude>
https://github.com/gustafnk/h-include/

DEPENDENCIES
CSS: im eingebetteten Fragment enthalten
JavaScript: loader helper

ASSET SERVER
Bereitstellen der Assets für alle Komponenten
Trade-Off
eigenes Team

WEBCOMPONENTS / CUSTOM ELEMENTS
class SearchBar extends HTMLElement {
...
}
customElements('searchbar', SearchBar);
...
<searchbar></searchbar>

KOMMUNIKATION
document.addEventListener('cartChanged', refresh);
...
document.dispatchEvent(new Event('cartChanged'));

DA WAR DOCH WAS?
JSR-168
JSR-162
JSR-167
JSR-286
JSR-362

MOSAIC 9
Tailor
Skipper
Innkeeper
Quilt
Shaker
https://www.mosaic9.org/

THANKS TO
Gustaf Nilsson Kotte
Michael Geers
InnoQ Podcast
https://dev.otto.de/

Empfohlen

DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...DevDay Dresden

DevDay 2017: Daniel Trautmann - Mythos DevOps: Development versus Operations?DevDay Dresden

DevDay 2017: Andreas Reischuck - Benutzbare & Sichere Kommunikation für die v...DevDay Dresden

Liferay als Plattform für MicroservicesDaniel Reuther

Agilität und Microservices als Chance für Modernisierung?enpit GmbH & Co. KG

Continuous Delivery @ FriendScout24 | Webinale 2012Michael Maretzke

Microservices – die Architektur für Agile-Entwicklung?Christian Baranowski

Einführung in die Software-QualitätssicherungChristian Baranowski

Empfohlen

DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...DevDay Dresden

DevDay 2017: Daniel Trautmann - Mythos DevOps: Development versus Operations?DevDay Dresden

DevDay 2017: Andreas Reischuck - Benutzbare & Sichere Kommunikation für die v...DevDay Dresden

Liferay als Plattform für MicroservicesDaniel Reuther

Agilität und Microservices als Chance für Modernisierung?enpit GmbH & Co. KG

Continuous Delivery @ FriendScout24 | Webinale 2012Michael Maretzke

Microservices – die Architektur für Agile-Entwicklung?Christian Baranowski

Einführung in die Software-QualitätssicherungChristian Baranowski

Microservice architecture applied. 14 Praxis-Tipps für die Nutzung von Micros...Ramon Anger

Alle reden über Microservices - Wie haben wir es bei LeanIX gemacht @ EA Conn...LeanIX GmbH

CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...LeanIX GmbH

Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“OPEN KNOWLEDGE GmbH

Das ist doch alles nur Frontend - Wer braucht da schon Architektur?OPEN KNOWLEDGE GmbH

Office 365 Akademie News - September 2019Thomas Maier

SharePoint Community: Nintex Workflow CloudSharePoint Community Schweiz

ownCloud by it25 Präsentation auf dem Univention Summit 2015Univention GmbH

Continuous deployment in LeanIX @ Bonn AgileLeanIX GmbH

Serverless Survival GuideOPEN KNOWLEDGE GmbH

Azure Bootcamp Hamburg Lennart Passig

OpenStack und EC2 in Univention Virtual Machine Manager verwaltenUnivention GmbH

Mehr Sicherheit durch AutomatisierungOPEN KNOWLEDGE GmbH

DevDay 2017: Daniel Meixner - Von 0 auf DevOpsDevDay Dresden

DevDay 2017: Marc Rohlfs - Maven-Projekte mit Gitflow über Jenkins steuernDevDay Dresden

DevDay 2017: Karen Otte - Augmented Medicine - On Using Kinect and Hololens i...DevDay Dresden

DevDay 2017: Johannes Nicolai - How GitHub uses GitHub to design, develop and...DevDay Dresden

DevDay 2017: Ulrich Deiters - Empathie und Sympathie in der SoftwareentwicklungDevDay Dresden

DevDay 2017: Christof Fetzer - SCONE: Secure Linux Container Environments wit...DevDay Dresden

Sicherheit im Internet-of-Things - Wie man das größte Botnetz der Welt absichertAndré Nitze

C5 MashupAndreas Schulte

Modernisierung in Zeiten wie diesenenpit GmbH & Co. KG

Weitere ähnliche Inhalte

Was ist angesagt?

Microservice architecture applied. 14 Praxis-Tipps für die Nutzung von Micros...Ramon Anger

Alle reden über Microservices - Wie haben wir es bei LeanIX gemacht @ EA Conn...LeanIX GmbH

CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...LeanIX GmbH

Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“OPEN KNOWLEDGE GmbH

Das ist doch alles nur Frontend - Wer braucht da schon Architektur?OPEN KNOWLEDGE GmbH

Office 365 Akademie News - September 2019Thomas Maier

SharePoint Community: Nintex Workflow CloudSharePoint Community Schweiz

ownCloud by it25 Präsentation auf dem Univention Summit 2015Univention GmbH

Continuous deployment in LeanIX @ Bonn AgileLeanIX GmbH

Serverless Survival GuideOPEN KNOWLEDGE GmbH

Azure Bootcamp Hamburg Lennart Passig

OpenStack und EC2 in Univention Virtual Machine Manager verwaltenUnivention GmbH

Mehr Sicherheit durch AutomatisierungOPEN KNOWLEDGE GmbH

Was ist angesagt? (13)

Microservice architecture applied. 14 Praxis-Tipps für die Nutzung von Micros...

Alle reden über Microservices - Wie haben wir es bei LeanIX gemacht @ EA Conn...

CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...

Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“

Das ist doch alles nur Frontend - Wer braucht da schon Architektur?

Office 365 Akademie News - September 2019

SharePoint Community: Nintex Workflow Cloud

ownCloud by it25 Präsentation auf dem Univention Summit 2015

Continuous deployment in LeanIX @ Bonn Agile

Serverless Survival Guide

Azure Bootcamp Hamburg

OpenStack und EC2 in Univention Virtual Machine Manager verwalten

Mehr Sicherheit durch Automatisierung

Andere mochten auch

DevDay 2017: Daniel Meixner - Von 0 auf DevOpsDevDay Dresden

DevDay 2017: Marc Rohlfs - Maven-Projekte mit Gitflow über Jenkins steuernDevDay Dresden

DevDay 2017: Karen Otte - Augmented Medicine - On Using Kinect and Hololens i...DevDay Dresden

DevDay 2017: Johannes Nicolai - How GitHub uses GitHub to design, develop and...DevDay Dresden

DevDay 2017: Ulrich Deiters - Empathie und Sympathie in der SoftwareentwicklungDevDay Dresden

DevDay 2017: Christof Fetzer - SCONE: Secure Linux Container Environments wit...DevDay Dresden

Andere mochten auch (6)

DevDay 2017: Daniel Meixner - Von 0 auf DevOps

DevDay 2017: Marc Rohlfs - Maven-Projekte mit Gitflow über Jenkins steuern

DevDay 2017: Karen Otte - Augmented Medicine - On Using Kinect and Hololens i...

DevDay 2017: Johannes Nicolai - How GitHub uses GitHub to design, develop and...

DevDay 2017: Ulrich Deiters - Empathie und Sympathie in der Softwareentwicklung

DevDay 2017: Christof Fetzer - SCONE: Secure Linux Container Environments wit...

Ähnlich wie DevDay 2017: Bert Radke - Der Frontend Monolith

Sicherheit im Internet-of-Things - Wie man das größte Botnetz der Welt absichertAndré Nitze

C5 MashupAndreas Schulte

Modernisierung in Zeiten wie diesenenpit GmbH & Co. KG

Top 10 Internet Trends 2006Jürg Stuker

Steinzeit war gestern! Wege der cloud-nativen EvolutionQAware GmbH

16-seitige Broschüre CompanyMessenger_deutschThomas Teufel

«Schnittstellen sind kompliziert, darum kann ich die Digitalisierung nicht mi...Intelliact AG

Truzztbox datenraummobilitaet angeboth-bauer2014

Servicierung von Monolithen - Der Weg zu neuen Technologien bis hin zum Servi...Michael Hofmann

Nutzen und Anwendungspotentiale von Enterprise Wikispunkt. netServices

Azure Hybrid ConnectionsRobin Sedlaczek

Microprofile.io - Cloud Native mit Java EEMichael Hofmann

SharePoint UserGroup Session 2013FLorian Laumer

abtis ermöglicht mit Teams-Einführung reibungslose Zusammenarbeit auch im Hom...bhoeck

Steinzeit war gestern! Wege der cloud-nativen EvolutionQAware GmbH

Karl Steiner (COMPRISE GmbH)Agenda Europe 2035

Steinzeit war gestern! Wege der Cloud-nativen Evolution.QAware GmbH

Splunk corporate overview German 2012jenny_splunk

SharePoint 8 Tipps um besser zu FindenDavid Schneider

Architekturen für .NET Core-AnwendungenRobin Sedlaczek

Ähnlich wie DevDay 2017: Bert Radke - Der Frontend Monolith (20)

Sicherheit im Internet-of-Things - Wie man das größte Botnetz der Welt absichert

C5 Mashup

Modernisierung in Zeiten wie diesen

Top 10 Internet Trends 2006

Steinzeit war gestern! Wege der cloud-nativen Evolution

16-seitige Broschüre CompanyMessenger_deutsch

«Schnittstellen sind kompliziert, darum kann ich die Digitalisierung nicht mi...

Truzztbox datenraummobilitaet angebot

Servicierung von Monolithen - Der Weg zu neuen Technologien bis hin zum Servi...

Nutzen und Anwendungspotentiale von Enterprise Wikis

Azure Hybrid Connections

Microprofile.io - Cloud Native mit Java EE

SharePoint UserGroup Session 2013

abtis ermöglicht mit Teams-Einführung reibungslose Zusammenarbeit auch im Hom...

Steinzeit war gestern! Wege der cloud-nativen Evolution

Karl Steiner (COMPRISE GmbH)

Steinzeit war gestern! Wege der Cloud-nativen Evolution.

Splunk corporate overview German 2012

SharePoint 8 Tipps um besser zu Finden

Architekturen für .NET Core-Anwendungen

Mehr von DevDay Dresden

The Architecture of Uncertainty - Kevlin HenneyDevDay Dresden

Dev Day 2021 - Stephan Pirnbaum - AnwendungsmodernisierungDevDay Dresden

Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-ProjektenDevDay Dresden

Andreas Roth - GraphQL erfolgreich im Backend einsetzenDevDay Dresden

Alexander Reelsen - Seccomp for DevelopersDevDay Dresden

DevDay 19 Accessibility: Praxistipps für EntwicklerDevDay Dresden

Dev Day 2019: Phillip Krenn – Aggregierte Logging PatternsDevDay Dresden

Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...DevDay Dresden

Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...DevDay Dresden

Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...DevDay Dresden

Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...DevDay Dresden

Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...DevDay Dresden

Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...DevDay Dresden

Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101DevDay Dresden

Dev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-TeamsDevDay Dresden

Dev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den RadverkehrDevDay Dresden

Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...DevDay Dresden

Dev Day 2019: Martin Schurz - Manual Work Is A Bug!DevDay Dresden

Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“DevDay Dresden

Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"DevDay Dresden

Mehr von DevDay Dresden (20)

The Architecture of Uncertainty - Kevlin Henney

Dev Day 2021 - Stephan Pirnbaum - Anwendungsmodernisierung

Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten

Andreas Roth - GraphQL erfolgreich im Backend einsetzen

Alexander Reelsen - Seccomp for Developers

DevDay 19 Accessibility: Praxistipps für Entwickler

Dev Day 2019: Phillip Krenn – Aggregierte Logging Patterns

Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...

Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...

Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...

Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...

Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...

Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...

Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101

Dev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-Teams

Dev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den Radverkehr

Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...

Dev Day 2019: Martin Schurz - Manual Work Is A Bug!

Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“

Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"

DevDay 2017: Bert Radke - Der Frontend Monolith

1. THE FRONTEND MONOLITH

2. Bert Radke T-Systems MMS Expert Software Developer Twitter: @taseroth

5. VERSPRECHEN MICROSERVICES unabhängige Weiterentwicklung unabhängiges Deployment Skalierbarkeit Entkopplung der Teams

6. AUFWAND / KOSTEN Code Doppelung Daten Doppelung Administration Automatisierung

7. SELF CONTAINED SYSTEMS 'große Microservices'? Abhängigkeiten zwischen Services minimieren

8. CONWAY'S LAW

9. BEISPIEL RETAIL SITE

10. Search Recommendation Catalog Order ...

11. .. und sie lebten glücklich bis an ihr Lebensende?

12. Search Recommendation Catalog Order ... UI

13. AUFWAND / KOSTEN + Organisation + Koordination

14.

15. Quelle: Otto - Architekturprinzipien

16. OPTIONEN DER INTEGRATION Was integrieren wir? (Code / Daten) Wo integrieren wir? (Frontend / Backend)

17. INTEGRATION PER DATEN Team bis 'Oberkante API' UI vom nutzendem Team gebaut

18. INTEGRATION PER CODE Team erstellt auch Code für das UI Kopplung zwischen Teams

19. INTEGRATION PER CONTENT 'Transclude' Frontend: CSI Backend: SSI / ESI

20. INTEGRATION IM BACKEND

21. Order Search Catalog <html> ... <esi:include src="http://order.1" alt="http://order.2"/> ... <esi:include src="http://search.1" alt="http://search.2"/> ... <esi:include src="http://catalog.1" alt="http://catalog.2"/> ... </html> http://example.com

22. INTEGRATION IM FRONTEND Link: "das magische Integrationskonzept" (Stefan Tilkov) iFrame

23. INTEGRATION IM FRONTEND / CSI Javascript

24. HINCLUDE <hx:include src="/search"> <div> <input> <button>Search</button> </div> </hx:include> http://mnot.github.io/hinclude/

25. H-INCLUDE <hinclude src="/search"> <div> <input> <button>Search</button> </div> </hinclude> https://github.com/gustafnk/h-include/

26. DEPENDENCIES CSS: im eingebetteten Fragment enthalten JavaScript: loader helper

27. ASSET SERVER Bereitstellen der Assets für alle Komponenten Trade-Off eigenes Team

28. WEBCOMPONENTS / CUSTOM ELEMENTS class SearchBar extends HTMLElement { ... } customElements('searchbar', SearchBar); ... <searchbar></searchbar>

29. KOMMUNIKATION document.addEventListener('cartChanged', refresh); ... document.dispatchEvent(new Event('cartChanged'));

30. NAVIGATION multiple single page apps

31. DA WAR DOCH WAS? JSR-168 JSR-162 JSR-167 JSR-286 JSR-362

32. MOSAIC 9 Tailor Skipper Innkeeper Quilt Shaker https://www.mosaic9.org/

33. FAZIT

34. THANKS TO Gustaf Nilsson Kotte Michael Geers InnoQ Podcast https://dev.otto.de/