DevDay 2017: Bert Radke - Der Frontend Monolith

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

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

Search
Recommendation
Catalog
Order
...

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

Search
Recommendation
Catalog
Order
...
UI

AUFWAND / KOSTEN
+ Organisation
+ Koordination

Quelle: Otto - Architekturprinzipien

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'));

NAVIGATION
multiple single page apps

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/

DevDay 2017: Bert Radke - Der Frontend Monolith

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Mehr von DevDay Dresden

DevDay 2017: Bert Radke - Der Frontend Monolith