Integrationsmuster für Web-Frontends

0:17 Hallo und herzlich willkommen zum Inukew-Podcast. Heute sprechen Tamo van Lessen und Til Schulte Körne über Integrationsmuster für Webfrontends, hallo! Hallo Anja! Hallo anja! Stellt euch doch bitte einmal kurz vor... Ja ich bin Tamo, ich bin Prinz Willkonsultant bei den Inukiew. Ich bin glaube schon seit zwölf Jahren dabei und mache hauptsächlich Architekturdinge die mich interessieren.

0:43 ab verschiedenen Stationen durchlaufen solche Dinge. Schon ewig bei der NOQ länger als Tamo und beschäftige mich relativ viel mit Web-Themen, Web-Architektur, Web Software Entwicklung. Super! Wir sind heute hier versammelt weil ihr ein Paper geschrieben habt. Ihr habt im Grunde eine Taxonomie entwickelt mit sechs Integrationsmustern für Webfrontends.

1:11 Welches Problem wolltet ihr denn damit lösen? Warum braucht es jetzt diese Taxonomien auf einmal? Hatten einen Prinzip immer schon das Problem, dass wir aus verschiedenen Gründen können gleich vielleicht noch drauf kommen. Immer wieder um dieses Thema Frontend Integration gekreist sind und einfach bei diesem Thema eine belastbare Quelle fehlte irgendwo.

1:33 also Wir hatten immer das problem Dass wir was zitieren können wollten, dass man eben einfach mal Leuten sagen kann wenn du wissen willst wie man frontend integriert welche optionen Du dafür hast dann schau doch einfach mal da. Und ja da hat tamo Die Europlopp vorgeschlagen. Kannst du ja vielleicht mal ein paar Tonne dazu sagen, Tamo?

1:53 Ja klar! Ich wurde nämlich auch immer darauf angesprochen... ich hatte auch so einen akademischen Hintergrund und meine Bekanntschaften von damals haben wir gesagt man muss unbedingt mal zur Europlop. und tatsächlich das Thema Pattern zwar mir schon immer sehr wichtig, ich hatte damals so eine AHA-Erlebnisse als ich glaube ich das erste Mal dieses Buch von Hoppe gelesen habe und verstanden haben, wenn andere das auch gelesen haben.

2:16 Kann ich mich total effizient mit den ausdrücken? Wenn ich sage, kompetent Consumer wissen alle sofort was gemeint ist und der Kontext darum ist gesetzt und passt ganz gut zu diesen ganzen AI Diskussionen. im Übrigen weil da ist es genau so, wenn der Kontex allen klar ist. aber ich will nicht zu weit da abschweifen.

2:34 Genau wie kommt diese Patterns zustande? Da gibt's eine ziemlich große oder verteilte Pattern-Community, die sich darum bemüht im Grunde so eine Art Katalog oder die Pflege von solchen Patterns und Pattern Languages zu entwickeln. Ursprünglich kommt das glaube ich vom Architekten von Christopher Alexander der damals irgendwie gesagt hat wir können doch Architektur nicht immer dem Zufall überlassen sondern brauchen wiederkehrende Muster und also wir haben wiederkeherende Probleme und dafür brauchen wir wiederkeharnde.

3:10 der Lösung und bei Software ist ja im Grunde genauso. Und das wurde dann irgendwann mal adaptiert, ich glaube diese Gang of Four Leute waren da ziemlich am Anfang die sowas gemacht haben. Und daraus sind eben diese Konferenzen entstanden, die halt lustigerweise gar nicht so konferenz sind wie man sie sonst in Akademia kennt sondern einen sehr interaktiven Teil haben.

3:32 also im Grundeläuft es so dass man erstmal wenn man etwas einreicht mit einem Abstract Da aufschlägt und wenn die Programm-Komitee das für vernünftig hält, was man da einreicht an Patterns oder Pattern Language also irgendwie eine zusammenhängende Sprache von Mustern. Dann kriegt man sogenannten Shepherd zugewiesen der dann über längeren Zeitraum mit einem an diesem Paper arbeitet immer wieder kontinuierlich Feedback gibt und man dann dieses Paper im Grunde schärft und entsprechend einer diesen Anforderungen an Patterns, da komme ich vielleicht gleich nochmal kurz dran.

4:14 Sozusagen ausformuliert und dann wenn es dann gut genug ist und akzeptiert wird, dann trifft man sich zu so einem Workshop. Und das ist also tatsächlich ganz cool, dass bei der Europlop im Kloster Irrsee wirklich eine traumhafte Kulisse ist und Klosters mit angebundener Brauerei hat also keinen Grund das Gelände jemals zu verlassen.

4:34 eigentlich über den Zeitraum. Es gibt immer auch einen schönen See, wenn man zehn Minuten geht. Da waren wir ja auch nicht nur in der Braucherei. Genau es gibt sehr viele Möglichkeiten sich da sozusagen auszutauschen und zu inspirieren. Und dann gibt's neben aller möglichen kennenlernen Rituale erstmal Dann diese Workshops wo dann bestimmte Gruppen also die versuchen Gruppen zu finden Die thematisch so ein bisschen besser zueinander passen Und die zerreißen dann nach allen Regeln der Kunst diese Papers.

5:08 Also das ist alles sehr konstruktiv angelegt. Man muss auch vorher, wir hatten sechs Papers in unserem Workshop und musste sie alle vorher mal gelesen haben oder wirklich durchgearbeitet haben. Dann gibt es eben dieses Ritual dass der Autor dann die Fly on the Wall wird also sprich Die Flieger an der Wand, man darf nichts mehr sagen.

5:33 Sich nur noch Notizen machen, dreht sich auch so mit dem Rücken da zu den anderen und muss dann sozusagen das Feedback über sich ergehen lassen. Das ist weißen. Sozusagen erst mal geht es glaube ich über die positiven Dinge und den Stil und dann über die inhaltlichen Dinge. Das Auditorium bedankt sich auch immer sehr dafür, dass man dieses Paper geschrieben hat.

5:57 Es ist wirklich eine sehr wertschätzende Atmosphäre und Geschichte und man kriegt halt wahnsinnig gutes Feedback, auch dadurch das man eben nicht reingrätschen darf und sagen kann ja das habt ihr alles falsch verstanden. Das haben wir doch so gemeint. Offensichtlich hat man es dann so gelesen wie sie das da verstanden haben und nicht so wie wir es gemeint haben.

6:20 Sehr cool und diese ganzen Geschichten hatte ich halt vorher schon mal gehört, dass man da unbedingt mal hin muss. Und wir hatten ja schon in verschiedenen Blog-Posts dieses Thema angerissen und auch in meinen Projekten ist es immer so das Frontindikation immer wiederkehrendes Thema. Es ist aber schwierig das zu erklären, zu verkaufen, zu sagen wie funktioniert's denn jetzt tatsächlich?

6:42 Darauf zu verweisen und deswegen... Genau, habe ich gedacht, Thill. Das ist so eine gute Idee da mal gemeinsam uns auf diese Reise dazu zu begeben und das zu machen. Ohne oder Thill war es auch echt ganz cool weil wir dachten eigentlich, wir wissen genau was wir da aufschreiben müssen. aber dieser Weg dahin also schon beim Sheparding hat man schon ein paar Sachen nochmal irgendwie gemerkt.

7:09 Vorher eigentlich ne? Also tatsächlich war alleine der Prozess dass wir uns sehr intensiv darüber ausgetauscht haben, wie man diese Patterns die wir eigentlich schon lange kennen würde ich jetzt mal behaupten das war irgendwie nichts Neues. Das ist ja auch der Sinn von dem Pattern. also den Pattern heißt ja eigentlich dass man etwas beobachtet hat was wiederkehrt und nicht dass man ein neues Vorschläge.

7:33 also wir haben da uns keine Sachen aus den Fingern gesogen. Da ist auch nichts was wir irgendeiner Form erfunden hätten oder so. Sondern diese Patterns sind ja einfach nur eine Auf-, eine Sammlung von Dingen, die wir immer wieder gesehen haben. Die haben wir de facto ja immer gesehen und alleine die Frage wie man so etwas katalogisiert?

7:55 Wie man sowas strukturiert?! Wie man allein die Einleitung dafür schreibt hat mir unglaublich viel gebracht weil es sehr viel Klarheit aus der Diskussion mit Tamo für mich gegeben hat, die ich vor überhaupt nicht hatte Und danach halt auch noch mal mit unserem Shepard, also wir hatten wirklich einen ganz hervorragenden Shephard den Cesare.

8:13 Ich hoffe ich spreche den Nachnamen richtig aus Pautasso der uns wirklich geniales Feedback gegeben hat zu dem Paper schon Und danach dann in der Runde, ich konnte tagelang vorher nicht schlafen weil ich so einen Schiss hatte die Flieger an der Wand zu sein. Das ist wirklich unangenehm für jemanden der das nicht kennt aber die Atmosphäre auf dieser Konferenz ist wirklich unglaublich, weil sie unfassbar viel Wert darauf legen dass es eine Konferent auf Augenhöhe ist wo jeder mit jedem immer respektvoll umgeht.

8:43 Es war wirklich großartig. wie das funktioniert hat muss man sich vorstellen, da laufen nur gestandene Professoren rum und teilweise deren eigenen Studenten. Und die sollen sich auf Augenhöhe Feedback geben, konstruktives Feedback zu etwas wo Leute wirklich Arbeit rein investiert haben. Das hat wirklich funktioniert weil diese Konferenz halt insgesamt so aufgezogen ist dass sich jeder ein bisschen lächerlich macht das jeder auf Augen Höhe ist.

9:12 Das war wirklich ein ganz großartiges Erlebnis, aber jetzt bin ich schon wieder abgeschweiften. Ich wollte eigentlich über das reden was uns dabei klar geworden ist und wenn ich mich zum Beispiel noch erinnern kann... ...was in so einer Diskussion mit Hamo in irgendeinem Hotelkonferenzraum mal so klar wurde es z.B.. Was ist eigentlich Frontentintegration?

9:34 Wir haben früher immer über Frontent-Integrationen geredet. wir haben irgendwie immer gesagt, ja hier es gibt irgendwie Transfusion und keine Ahnung irgendwelche Komponenten Web Components oder Single-Page-Ernwendung monolithisch. Aber wir haben uns nie darüber Gedanken gemacht. wieso werden das eine dafür halten dass das Frontend Integration ist und das andere irgendwie nicht?

9:55 Und Tom und ich haben dann eigentlich irgendwann mal ne für mich ganz gute also für mich kam's gut Definition davon gemacht was wir eigentlich unter Frontend integration verstehen. Und das ist halt im Prinzip, dass man sagt ein Provider stellt einen Teil einer UI bereit die ich in mein System integriere.

10:21 Also wenn ich das vergleiche mit der altbekannten Backend Integration Wenn ich einen Backend Integrationsmuster habe zum Beispiel eine datenbasierte Integration oder eine funktionale Integration dann funktioniert es ja typischerweise so dass zb ein back end ein Event Feed bereitstellt oder eine HTTP API, die ich aufrufen kann.

10:41 Die Funktionalität exponiert und jemand anders integriert das indem er diesen Feed abonniert oder das Backend per HTTP aufruft also die Funktualität im Prinzip aufrufte. Und Frontentintegration ist eigentlich genau das gleiche unserer Meinung nach nur dass man eben nicht irgendeinen HTTP Request macht sondern dass man einen Teil einer UI integriert, die jemand anders zur Verfügung stellt.

11:08 Also ein anderes Team im Normalfall, ein anderes System zumindest ist dafür verantwortlich einen Teil einer UI zu bauen was ich halt ohne wirklich viel zu wissen darüber wie genau das, was es genau für Funktionalitäten abbildet, wie genau da der ClickFlow in diesem Teil dieser UIs... Ich kann's einfach integrieren und das ist etwas gewesen was mir eigentlich eine sehr große Klarheit gebracht hat weil das im Prinzip eben einfach bedeutet, Joai Integration.

11:38 Die Muster über die wir gleich reden sind einfach eine bestimmte Spielart einer API also einem Remote-API genau wie eine HTTP-APi oder irgendwelche Messaginginfrastruktur in APIs sind, die auch unglaubliche Probleme haben wenn man sie einbindet. weil irgendwo muss ich mich immer koppeln wenn ich fremde Systeme integriere aber die eben umgekehrt was die UI anbelangt, zumindest eine relativ lose Kopplung bereitstellen.

12:07 Weil der Vorteil bei einer UI-basierten Kopplung einfach der ist dass ich relativ wenig Annahmen darüber machen muss was das fremde System in diese UI einbettet und dadurch eben das Bereitstellende System, das Team was für das bereitstellender UI Fragment oder was auch immer das dann ist hat einfach nur unglaublich hohe Autonomie hat.

12:28 Ich kann einfach entscheiden dort neue Funktionalitäten, neue Buttons keine Ahnung, neue UI-Teile einbauen und muss die Leute, die meinen UI benutzen im Prinzip gar nicht großartig drüber informieren. Das heißt was für uns ein sehr wichtiger Aspekt war als wir das Paper geschrieben haben war dass wird auch definiert haben, dass UI Integration zur Laufzeit stattfinden muss.

12:52 ja also es gibt auch ganz viele Integrationsmuster die zur Compile Zeit stattfinden, die könnte man theoretisch auch mal dokumentieren. Aber das, was für uns jetzt in dem ersten Paper oder in dem Paper, was wir jetzt geschrieben haben quasi die Baseline war. War dass wir eben gesagt haben ich habe einen UI-Fragment von jemand anderem und möchte es zur Laufzeit in mein System integrieren.

13:16 Und wenn die bereitstellende Partei der Provider wie auch immer man das nennen will etwas an diesem UI- Fragment ändern möchtet dann kann sie das einfach tun ohne dass ihr die einbettenen Systeme notifizieren muss, dass sich da jetzt etwas geändert hat. Ja, das Coole war ja auch, fand ich. Also ganz viele Sachen haben wir in den SCS schon beschrieben, ne?

13:37 Da reden wir auch über Front-in-Intecationen... Magst du noch mal kurz erzählen was SCS sind für den Zusammenhang? Entschuldigung, Safe Content Systems. Das ist im Grunde einer unserer GoTo-Architektur Ansätze sozusagen bei denen wir das Gefühl haben die funktionieren in vielen Fällen sehr gut. man kann sie vielleicht auch als grobkranulare Microservices beschreiben.

13:59 Aber wir haben ganz oft Diskussionen darüber, ist das jetzt ein reiner SCS oder nicht? Wir achten da sehr darauf, dass die Definition von SCS so wie wir sie auf der Webseite beschreiben möglichst rein ist in der Praxis machen. Wir gehen mir dann doch auch Kompromisse ein und machen mal irgendwie Abstriche oder so.

14:19 Das Interessante war halt, wir haben da viele Dinge beschrieben. Es gibt auch API-Zugriffe, wir wollen aber viel Front in Integration machen. Die Dinger sind autonom Aber ganz viel ist irgendwie klar geworden. Wenn man das halt so in diese Kategorien einsortiert, wie wir es jetzt dann da gemacht haben, dann ergibt sich ganz vieles so automatisch daraus einfach alles eine API.

14:37 Es gibt aber verschiedene Ebenen auf denen man integrieren kann. Man kann in der Datenbank integriern und man kann Data Products bereitstellen sowie die wie unsere Daten Leute das mit Data Mesh machen. Das sozusagen auch eine Art zu integriere. Dann haben wir die Integration über die Business Logik Und dann haben wir eben die Integration über die UI.

14:57 und wenn man das aber alles als Schnittstelle begreift, die unterschiedlich starklose, enge Kopplung bereit stellt. Dann hat man halt plötzlich ein Händel dran für nüftige Entscheidungen zu machen und zu sagen wann lohnt sich das eine? Wann lohnt es sich das andere? Wannen sind die Aufwände dafür zu groß?

15:16 Wollen wir das eingehen etc.? Dann sind wir schon bei einem sehr wichtigen Punkt. Also anhand welcher Aspekte unterscheide ich dann, wann welches Muster am besten geeignet ist? Also es hat bestimmt auch was damit zu tun, was sich damit erreichen will Teamautonomie Performance Konsistenz der User Experience und so weiter.

15:32 Habt euch da also habt euch da bestimmte Gedanken gemacht aber erzählt mal Genau wie musst du uns dazu Gedanken machen? also wenn man ein Pattern dokumentiert, dann funktioniert das ja typischerweise so dass man sich immer die gleiche Struktur hält. und das womit man typischerweise anfängt, wenn man so ein Pattern dokumentiert.

15:54 Es sind natürlich erstmal die Rahmenbedingungen aber danach eben unterschiedliche Kräfte oder Forces auf Englisch, die auf meine Architekturentscheidung eigentlich einwirken. Und im Fall von der Frontentintegration gibt es halt eine gewisse Menge Einwirkungskräften von Rahmenbedingungen, die im unterschiedlichen Fall oder im konkreten fall unterschiedlich sein können.

16:17 natürlich jedes mal bau ich in online shop ist was komplett anderes als wenn ich ein Kundenportal für eine Versicherung baue zum Beispiel. das ist einfach nicht das gleiche und gewisse forces kern halt wieder. also gewisse Dinge sind einfach immer die gleichen bei all diesen frontend integrationsmustern.

16:35 ja du hast ja schon eins genannt. Unabhängigkeit von Teams ist das, was wir erreichen wollen. Das ist etwas, das wollen wir immer haben. aber der Grad der Unabhängigkeit kann natürlich unterschiedlich sein. Kann das Fremde-Team in seinen UI keine Ahnung beliebiges CSS einbauen und beliebige Styling machen oder muss sich das fremde Team an bestimmte Stylingvorgaben halten?

16:58 Das ist ja eine Frage der Autonomie. Tailwind benutzen und die anderen benutzen Bootstrap oder sowas. Oder müssen alle dieselbe Bootstrab Version verwenden? Also, die Unabhängigkeit ist kein Ja Nein wie immer sondern das ist halt ein Spektrum in dem man sich aufhalten muss. Das selbe gilt halt dafür dass man zum Beispiel die Anwendung weiterentwickeln kann also dass man neue Features einbringen kann ohne dass es die Anderen in irgendeiner Form destabilisiert.

17:26 da gibt es natürlich auch sehr unterschiedliche Ansätze. Die Art der Auswirkungen einer Architekturentscheidung in dem Frontend-Integrationsding Thema hat halt sehr stark eine Auswirkung darauf, wie sehr ich mich festlegen muss bei bestimmten Dingen die meine Funktionalität abbilden. UX ist ein sehr wichtiger Punkt meiner Meinung nach oder natürlich ein sehr wichtiger Punkt Wie stark ist mein UI?

17:55 Dann was ja am Ende im Optimalfall aus verschiedenen Elementen verschiedener Autonomer bereitstellen das Systeme gekapselt ist wie enges mein UI dann am Ende des Tages doch wieder gekoppelt? also wenn ihr euch jetzt zum Beispiel vorstellt wir haben dashboard, wo auf dem dashboard fünf verschiedene kacheln sind die von fünf verschiedenen systemen kommen.

18:17 Man kann es natürlich sein dass es so aspekte gibt dieses dashboard doch sehr stark wieder koppeln. Zum Beispiel könnte ich ja dann einen globalen Filter für einen Zeitraum haben, den ich in diesem Dashboard anzeigen möchte. Ich möchte irgendwo ein Filter habe oder eine Eingabemöglichkeit haben um die Zeitspanne einzugeben und dann sollen sich in allen diesen Kacheln von den fünf verschiedenen System sofort optimalerweise irgendwie alles ändern.

18:43 Da gibt es natürlich Frontentintegrationsmuster mit denen man sowas sehr leicht erreichen kann aber das geht nicht mit jedem Frontent-Integrationsmustern. Und ein ganz wichtiger Aspekt, der auch wirklich leider keinen wirklich zufriedenstellender Antwort hat. Das kann man ja hier schon mal tiesern ist das Thema Authentisierung.

19:03 also wenn ich in einem Browser wir reden über Web Integrationsmuster typischerweise Wenn ich in einen Web Browser hinter einer hinter einem Single Sign On System zum Beispiel Dinge integrieren möchte dann Wenn ich wirklich eine sehr hohe Autonomie haben will in der Entwicklung, der einzelnen Frontendbestandteile.

19:27 Kein ganz triviales Thema. Das ist etwas das kann sehr stark wehtun abhängig davon von welche für welches Pattern nicht mich im Prinzip entscheidet. Ich stimme dir da ja zu aber an anderen Stellen hat auch ein Problem. also ich würde nicht unbedingt sagen dass das jetzt was ist was dagegen spricht. wenn wir jetzt mal Ob ich das jetzt darf, ne?

19:50 Nehmen wir mal das allereinfachste Pattern einmal kurz raus. Den Link wenn ich auf eine andere Seite springe da muss mich halt zur Not neu authentisieren. aber dann ist es halt auch einfach erledigt und ich muss nicht hinten rum irgendwelche Verrenkungen machen dass das irgendwie funktioniert. also Ich finde Das gehört auch auf das Spektrum dazu dass manche Dinge damit auch sehr viel einfacher sind Wenn man an der UX vielleicht an ein paar Stellen auch kompromiss oder bereit ist, Kompromisse einzugehen.

20:18 Und das erlebe ich halt in der Praxis oft dass diese Kompromesse oft nicht mitgedacht werden. und deswegen finde ich helfen diese Patterns aber auch weil sie die... wie nennt man denn das? Die Punkte, an denen man Kompromissen möglicherweise eingehen muss klar benennen. Da musst du dran denken wenn du das gut findest.

20:38 Genau! Das kann man glaube ich jetzt einfach vorwegnehmen. Also selbst wenn man sich dieses Paper irgendwie besorgt und sich das durchliest, da ist keine Silver Bullet dabei. Ist einfach nicht so! Sondern es gibt halt diese Forces, diese unterschiedlichen Einflüsse... Es gibt einen Pattern was ich auswählen kann, was ich umsetzen kann und dieses Pattern hat Konsequenzen.

21:00 Authentisierung wird zum Beispiel schwierig, Authentisierung wird vielleicht unmöglich. Kann sein? Dann ist das falsche Pattern, wenn ich damit ein Kundenportal für eine Versicherung machen will zb. Aber umgekehrt ist eben genau das Ziel von dem Paper auch gewesen, dass irgendeiner Form klarzumachen.

21:17 Also wenn ich das mache, welche Konsequenzen hat diese Entscheidung dann? und wenn die Konseqenz nicht zu meinen Anforderungen passt, sollte ich es tunlich sein lassen? Dann stellt doch mal die sechs Pattern vor! Also eins haben wir ja schon also den Link, den Hyperlink. Wollte dazu noch etwas sagen?

21:37 Das ist tatsächlich etwas... früherer Chef Stefan immer so schön gesagt, das ist es magische Integrationskonzept des Webs. Eigentlich ist das gesamte Web ja ein gigantisches Frontend-Integrationsexperiment. Ich bin erst auf der UI von einer unabhängigen Partei und dann lande ich plötzlich in dem ich einen Link folge Auf der UI einer anderen unabhängigen Partai.

22:04 Und dass ist tatsächlich etwas wo ich sagen würde in jeder Frontend Architektur erwarten, dass das funktioniert. Also wenn ich eine... Entschuldigung! Ich muss mich präzisieren. In jeder Front-End Integration im Web würde ich erwarten ,dass das funktioniert. also der Link ist sozusagen das was meiner Meinung nach immer funktionieren sollte war es natürlich auch ganz klare Nachteile hat weil die Art von Frontend Integration, die ich gerade gepitscht habe.

22:34 Ich hab ein UI und das besteht aus verschiedenen Modulen verschiedener unabhängiger Teams. Das erreiche natürlich durch einen Link nicht. Also Link bringt Dinge in einer zeitlichen Ebene hintereinander. Ich bin erst auf Seite eins dann nach auf Seite zwei danach auf Seite drei. Da gibt es aber einen sehr interessanten Sonderfall dass ist so ein Subpattern.

22:54 Das ist quasi unser zweites Pattern was wir beschrieben haben. Und das ist die Frage Ich bin erst auf Seite eins, da bin ich auf Seite zwei. Jetzt bin ich fertig! Was mache ich denn dann? Wie komme ich wieder zurück auf Seite Eins? Das haben wir auch kurz erwähnt weil das eigentlich ein totaler... ich behaupte mal no-brainer ist so was zu machen dass man sich eben die Gedanken darüber gibt wie ein System was abspringt also wo ich einen Link in ein anderes System folge dem anderen System mitgibt wie ich wieder zurückkommen kann wenn das andere System fertig ist.

23:29 Also stellen wir uns vor, wir erfassen gerade einen neuen Vertrag, irgendeinen Verkaufsdokument in irgendeinem System und jetzt haben die ganzen Artikel hinzugeklickt und jetzt fehlt der Kunde aber! Wir können den Kunden noch nicht auswählen. Das wäre ja die Frage wie kann ich jetzt den Kunden per Link anlegen?

23:49 In einem anderen System was für die Kundverwaltung verantwortlich ist und danach wieder in die Vertragsverwaltungen zu dem neuen Vertragt zurückspringen? Und das ist natürlich eigentlich relativ simpel. Man gibt einfach beim Absprung in das andere System eine Uri mit, die das Kundensystem jetzt in meinem Beispiel aufrufen kann oder wo es hin redirecten kann wenn es mit der Kundenanlage fertig ist.

24:12 Das sind dann Return-Uris oder Rücksprungen-Uries, die man einfach per Konvention mitgeben muss und wo man aber auch, wenn man sich aus so einer Architektur festlegt ... konsequent versorgen muss, dass die Systeme untereinander dieselben Konventionen haben wie man mit diesen Return-Uris umgeht. Das kennen wir zum Beispiel so.

24:33 das bekannteste Beispiel für return-uris kommt im Prinzip aus den Single Sign On Protokollen. dies zu gibt. also wenn ich irgendwie OpenID Connect habe und ich logge mich irgendwo ein bei einem solchen OpenID connect Provider dann will ich ja nachdem ich mich eingeloggt habe wieder dahin zurückspringen wo ich abgewiesen wurde weil ich noch nicht eingelockt war.

24:53 und auch sowas passiert typischerweise über Return-Uris, das ist so ein sehr simpler Sonderfall. Die Kunst bei diesen Uris ist dass man sich halt nicht vergießt. also wenn ich eine returnuri übergebe dann den Kundenanlage, dann ist das was man dabei berücksichtigen muss, dass man Mechanismen hat, dass diese returnuri durch den Kundenanlageprozess konsequent durchgeschleppt wird damit ich da nicht im letzten Schritt dieses uri vergessen habe.

25:21 und das bedeutet dass man in seiner Anwendung bestimmte Vorkehrungen eigentlich haben muss, damit das relativ einfach funktioniert. Ich sage mal ein extrem mächtiges Muster war es aber auch wieder. Konsequenz natürlich. Aber auch eines was finde ich immer unterschätzt wird. also wir haben jetzt in der Praxis halt auch oft dass wenn man diese agilen Prozesse oder weiß gar nicht ob du den agilen Prozess zu tun hast aber wenn jemand von der Anforderung kommt dann wird irgendwo ein Ticket eingestellt.

25:47 hier wir müssen diesen Vertrag noch mit anzeigen genau Und eigentlich muss man den gar nicht anzeigen. An der Stelle hilft vielleicht die Vertikalisierung, dass man dann darüber nachdenkt weil es plötzlich teuer was anzuzeigen von dem man die Daten gar nicht im Zugriff hat. Aber das ist teilweise so einfach auf einen Link zu springen.

26:07 Der öffnet sich in einem neuen Tab und da kann sich ein Sachtarbeiter etwas angucken und schließt ihn halt wieder wenn er fertig ist. Also auch das hatte Stefan schon vor Jahren immer gesagt. Nur das Interessante ist, dass es halt nicht irgendwie so einfach als ganz offensichtlich und ganz easy in den Köpfen ist.

26:26 Du hattest gerade den Begriff Vertikalisierung genannt, magst du den kurz erklären? Ja also auch was... Ein Schub! Das ist ja etwas, was wir hier sehr gerne bei INOKU machen und was mit dem Treiber in unseren SCS-Architekturen ist, Die Dinge, die eine hohe fachliche Korrekt haben versuchen zusammenzustecken in ein System.

26:55 Und andere Systeme oder andere Dinge, welche nicht so fachlich gekoppelt sind... ...oder die wieder wieder so ne Blase sind,... ...die eine hohen fachlichen Zusammenhang haben in ein anderes System zu stecken. und das kann man sich im Grunde dann wie verschiedene Vertikalen vorstellen.... ...die halt für Ende zu ändern also von der UI bis zur Datenhaltung mit einem Team relativ autonom an dieser Sache arbeiten können.

27:19 Und gefällt das halt deshalb gut, weil die Teams eine gewisse Expertise zu was sie sich allen Vertragsthemen oder sowas aufbauen können und über High Level KPIs gesteuert werden können, dass einfach selber überlegen wie bring ich meine vertikale sozusagen zu einem besseren Resultat? im Gesamtkontext so?

27:41 Genau grundsätzlich geht es eigentlich darum Dass die Teams nicht auf den Füßen stehen, dass man irgendwie die Komplexität von so ganz großen Gesamtsystemen zerteilen kann in Systeme, die genau eine Größe haben. Da kann man wieder die berühmten zwei Pizzaschachteln irgendwie rausholen mit zwei Pizzen ernährt werden können.

28:00 Ich weiß immer gar nicht auf welche Zeit einheit eigentlich diese Pizzashachtel halten muss und Was man vielleicht noch dazu sagen sollte, weil ich das schon erwähnt. Also es geht bei diesen Integrationsmustern um die Integration von mehreren Vertikalen. Von ein bis zwei weiteren Vertikalien. Ja also jetzt in der Sprichweise würde ich das jetzt glaube ich sagen genau wir wollen uns nicht festlegen dass man das nur im verticalisierten System machen kann.

28:30 deswegen würde ich halt sagen der Übergang zwischen zwei Systemen oder die Integration zwischen den Frontends Systeme, das ist eigentlich das Interessante. Wobei jetzt ganz konkret zum Beispiel die Return-Uris und die Links natürlich auch ein hervorragendes Integrationskonzept innerhalb einer Anwendung sind.

28:50 aber natürlich normalerweise wenn wir über Frontend Integration reden dann reden wir genauso wie bei allen anderen Arpy BackEnd Arpy Strukturen über Integration Frender System. typischerweise ruft man ja auch nicht seine eigene BackEnd API Auch wenn das manchmal eine gute Idee ist. Aber, dass es nicht der Standarduskehr ist einfach.

29:12 Ein anderes Bild was ich hatte als du Till über Hyperlinks gesprochen hast war das Bild von Amazon und diesem unfassbar großen Menüband Und je nachdem wo ich da drauf klicke in einer komplett anderen UI manchmal landen gefühlt Das einzige was noch gleiche ist irgendwie der Banner und das Menü. aber ansonsten sind ja...

29:33 Amazon, Grau und Orange irgendwie. Das erkennt man wieder über der ganzen Rest des Weggen? Ja also die UI unterscheidet sich dann schon. Also das ist doch auch eine Integration über Links oder? Über das Menüband. Im Prinzip ist es die Herausforderung bei so einer hyperlink integrierten UI vor allem die Wiedererkennung bin ich überhaupt noch da weil aber jetzt zu Google abspringen und das sieht anders aus.

29:58 oder ob ich in unseren Checkout Prozess reinkomme Woher weiß ich, dass das immer noch unser Checkout-Prozess ist und nicht von irgendwem anders? Weil es so aussieht wie vorher. Also man muss im Prinzip typischerweise um diese Patterns umzusetzen, alle Patterns zu umzusetzten, muss man sich die Gedanken darüber machen, wie eigentlich eine konsistente UX aussieht oder wie eine konsistenten UI Komponentenbibliothek aussieht konkret damit halt einfach mal zwischen verschiedenen Elementen dieser UI Die gleiche Firma, die gleiche Webseite eigentlich erkennt.

30:36 Obwohl das Ziel von uns ja technisch eigentlich immer ist dass wir uns eigentlich so benehmen als wären wir nicht zusammenhängen. also wir wollen dass die Teams komplett autonom sind. Wir wollen dass sie Teams ihre UIs völlig unabhängig voneinander weiterentwickeln können. wir wollen das die einen Bootstrap benutzen können und die anderen was weiß ich war es tail bin keine Ahnung Oder alles selber schreiben, das soll ja alles möglich sein.

30:59 Deswegen ist es halt umso wichtiger dass wir auf einer UI-Ebene oder UX Ebene definieren was macht uns denn eigentlich aus? Was war's in unserer UX? muss in all diesen verschiedenen UI Fragmenten Teilen gleich sein und im Fall von Amazon ist das halt wirklich erstaunlich wenig. also wenn man den Checkout reingeht ist das Logo noch irgendwie gleich aber der ganze Rest Ist natürlich auch Absicht.

31:23 Die wollen gar nicht, dass wenn man im Checkout ist, man irgendwo draufklickt und den Kaufenvorgang abricht wahrscheinlich. Aber das ist so ein ganz klassisches Beispiel dafür, dass da offensichtlich irgendwie linkbasiert integriert wird eigentlich. Ich bin in einem anderen System wahrscheinlich. Kann ich es aber nicht wissen?

31:45 Das war ein schönes Beispiel dafür... Man braucht irgendwie eine durchgängige UX. auf der einen Ebene, aber ich glaube da geht es vor allen Dingen an, kann man vielleicht über Corporate Identity reden. Aber nicht unbedingt auf diesen ganzen Komponenten und Feature-Ebenen weil du tatsächlich vielleicht ganz andere Anforderungen hast oder es auch einfach nicht so wichtig ist.

32:05 also die was jetzt ist Account Settings Seite wo ich irgendwie die Sprache und meine Emailadresse ändern kann. dann muss man vielleicht weniger Liebe rein investieren. wenn ich mich komplett darauf binde, dass alles aus einem Baukasten irgendwie zusammengelölt geleimt werden muss. Dann überall das gleiche Menü drüber.

32:24 Das ist ja eigentlich auch quasi visueller Lärm. also wenn man sich irgendwie vorstellt, dass man in dem Kundenportal rumklickt und irgendwem ist furchtbar wichtig, dass überall die fünf Hauptversicherungsarten aufgeführt sind mit ihren dreihundert Untermenüpunkten und ich bin aber gerade dabei wie Tamo sagt keine Ahnung ein Passwort zu verändern dann ist die Wahrscheinlichkeit, dass ich gerade im Passort verändern bin und hier jetzt abspringen möchte um den Kfz-Versicherung abzuschließen ziemlich gering.

32:51 Das heißt eigentlich will ich ja auch das meine User sich auf das konzentrieren was sie gerade machen da konzentrieren können und dann will ich sie ja eigentlich gar nicht mit irgendwelchem Zeug belästigen was aus komplett anderen Systemen da die ganze Zeit rein liegt sozusagen. Ich glaube, wir müssen die Kurve kriegen.

33:12 Was machen wir denn wenn wir nicht links integrieren? Also das was wir in dem Self Contain Systems Kontext sehr häufig gemacht haben obwohl Self Contain systems damit eigentlich gar nichts zu tun hat ich weiß auch gar nicht wieso das traditionell immer darauf raus lief ist dass wir transkludiert haben.

33:33 also Transklusion ist so das zweite ne das dritte Pattern was wir beschrieben haben im Prinzip meiner Meinung nach so ein bisschen outdated ist. Was aber immer noch relativ viele machen und das funktioniert so, dass wenn ich eben überlege, dass ein Web Browser... Wenn ich den öffne, egal ob es jetzt irgendwie eine Angular App oder React App oder serverseitig gerendertes HTML ist was ich da anzeige ja aus einem großen html-Bau um dem DOM besteht.

34:04 Und die Idee bei Transklusion ist, dass sich in diesem DOM bestimmte links habe konzeptionelle links die das können irgendwelche custom elements sein oder also irgendwelchen webkomponenten seien. es kann irgendwie eine konvention sein in meinem html. Die ersetzt werden und zwar durch den rückgabewert den ich bekomme wenn ich diesen link auflöse.

34:27 ja also ich hab einen link dort der auf ein htmf fragment im prinzip zeigt, Und das, was Transkursion bedeutet ist, dass irgendeine Stück Infrastruktur den DOM, das HTML durchpasst diese Sockel-Links im Prinzip identifiziert. HttpGetRequest gegen diese Linkziele im Prinzip macht und den Rückgabewert an die Stelle einpflanzt.

34:52 Was kann man dann in verschiedenen Stellen machen? Das kann man zum Beispiel klassisch irgendwo im Backend machen. dafür gibt es dann halt Technologien und Backends, wie Edge-Site Includes in Reverse Proxy-Score. altes Zeug gibt es schon seit Ewigkeiten. Oder Server-Side Include kann jeder Engine X, jeder Apache schon seit Jahren was im Prinzip einfach nichts anderes ist als dass der Web-Server nach einem bestimmten Stringen dem Fall sogar guckt.

35:17 Der Pasta auch nicht den Dom sondern benutzt irgendeinen regulären Ausdruck, extrahiert die Uri macht eine HTTP GET Request da drauf und packt den Rückgabewert an die Stelle. Das kann man aber auch ganz wunderbar im Frontend machen. Da können wir auch so eine Referenz Komponente, die ich immer ganz cool finde, verlinken das H-Include.

35:37 Im Prinzip ist es einfach eine Webkomponent. Die kann ich in meinen Browser reinwerfen und dann kann ich ja eben bestimmte Link-Komponenten in meinem HTML verwenden, egal ob ich das jetzt kleinzeitig generiere oder serverseitig generiere. Teile davon austauschen. Also einfach genau dasselbe, was ich auf den Reverse Proxy mache.

36:01 Link identifizieren hatte die Beget-Request gegenmachen und den Link durch den Rückgabewert ersetzt. Und ja das klingt irgendwie einfach! Das ist auch technisch sehr, sehr einfach eigentlich. Das kann man halt wirklich mal so eben machen. Das hat aber unglaubliche Konsequenzen weil das Problem halt einfach aus einer fremden Quelle in einen neuen Kontext reinwerfen einfach.

36:28 Und HTML kommt halt typischerweise nicht allein, sondern das hat ja auch Annahmen dies typischer Weise über die Umgebung macht und so das klassischste oder offensichtlichste ist wahrscheinlich CSS. also ich erwarte halt einfach dass es irgendein CSS gibt was dafür sorgt dass das html Schnipsel was sich jetzt in irgendeinen Kontext reihen werfe vernünftig gestylt wird und das ist natürlich schon etwas relativ Kompliziert ist.

36:54 Ich habe tatsächlich mittlerweile auch so eine Komponente geschrieben, ich weiß nicht ob wir die verlinken müssen mal gucken... Ist noch nicht so ganz produktionsreif. wo die Idee halt eigentlich ist dass man das kombiniert mit Shadowdom also da es man im Prinzip Transklusion macht und den Teil in dem man das reinwirft wirklich komplett isoliert stylt!

37:14 Ich weiß tatsächlich nicht wieso das so wenig Leute machen. Das liegt wenn man klein seitige Transklusion macht finde ich ziemlich auf der Hand dass man das in der Regel will. Aber ja vielleicht ist das Thema auch einfach schon so durch, dass da auch keiner mehr Gehirnsschmalz reinstecken möchte. Ja, also erklären kann man es.

37:35 Aber die Leute verstehen es oftmals nicht wie jetzt. HTML-Schnipsel werden gemeinsam integriert. normalerweise denkt man da eher so einen JSON Payload und dann wird das halt im HTML neu gerinnert. aber nee, dass ist einfach schon geringer des HTML was damit kommt Genau! Das funktioniert halt auch gar nicht gut wenn man HTML komplett kleinzeitig generiert.

37:55 Also wenn ich zum Beispiel auf einer Mikroarchitekturebene entschieden habe unsere gesamte Firma benutzt ausschließlich Angular um damit Joais zu bauen, dann ist Transklusion offensichtlich nicht das richtige Muster. Also ich kann ganz wunderbar kleinzeitig in der Angular App Sachen reintranskludieren – das kann man machen habe ich glaube ich noch nie gesehen aber das würde theoretisch gehen.

38:16 Aber ich kann natürlich nicht mit einer Angular App Dinge bereitstellen die transkludiert werden Typischerweise außer ich fange jetzt an da irgendwie serverseitige Pre-Rendering Logiken und sowas aufzuziehen. Das will ich vielleicht auch nicht mehr. Obwohl Single Server Side Rendering Ich würde es immer Edge Side Rendering nennen, ist ja heutzutage wieder cool.

38:35 Insofern vielleicht erlebt das demnächst auch seinen Revival. ganz ausschließend wenigstens nicht. Genau. Das war jetzt das zweite Pattern über das ihr geredet habt? Wenn man über Patterns redet oder Muster generell stellt man sich doch mal die Frage okay welches Problem löst denn jetzt dieses Pattern?

38:52 also welches problem löst jetzt Transklusionen gegenüber anderen? Transkursion ist halt sehr leicht gewichtig. Also es ist relativ simpel, das umzusetzen in der reinen Integrationstechnik und es ist unglaublich flexibel eigentlich. Wenn wir jetzt mal diese ganzen Probleme die ich schon genannt habe, Styling usw., so ein bisschen ausklammern dann kann man sich halt in einer ganz klassisch serverseitig gerenderten Welt vielleicht vorstellen dass das unglaublich mächtig sein kann.

39:22 also wir kennen Online Shops. da funktioniert der Online Shop im Prinzip so dass ich eine Suche habe Wir haben es jetzt vertikale genannt, ne? Also eine Vertikale habe die die Suche implementiert. und diese Suche ich such nach Toaster keine Ahnung. Die Rituniert dann nicht irgendwie eine Liste von Produkten sondern die Ritunnierte im Prinzip ein HTML in dem einfach nur mehrere Links drin sind.

39:51 ja für jeden Eintrag ist ein Link drin Und dieser Link wird durch Edge Site Includes zum Beispiel oder kleinzeitig Weiß ich in dem Fall nicht aufgelöst und führt einfach dazu, dass eine Suche einfach nur auf die Artikel kacheln aus einem anderen System referenziert. Die dann eben dynamisch in diese Liste eingebaut werden?

40:12 Und wenn sich das System für Artikel Kacheln überlegt hey in meiner Artikelkachel die in der Suche eingebunden wird, das ist ja typischerweise eine andere Artikelkache als ich sonst so habe. Aber für die Artikelkarre und für die Suche möchte ich jetzt den Preis nicht mehr rechts sondern links anzeigen und der Streichpreis soll was weiß ich?

40:33 Wohin ändern die das halt einfach? Das ist etwas unglaublich flexibles im Prinzip, was gerade bei der Phase bevor man live geht unglaublich produktiv sein kann. nachdem man live ist tut es ein bisschen mehr weh, weil man dann aufpassen muss wie man diese ganzen Laufzeitintegrationen im Prinzip noch unter Kontrolle behält.

40:56 Weil halt gerade Änderungen an den Seitenaspekten also insbesondere an dem CSS oder auch am JavaScript was sonst noch so drum herum sind relativ schwer abzuschätzen sind wenn überall irgendwelche Snippets reingeworfen werden von denen man eigentlich gar nicht so genau weiß was sie eigentlich alles voraussetzen und was nicht.

41:14 deswegen ist das relativ schwieriges Thema, das sauber zu beantworten. Ich habe da auch vor Ewigkeiten glaube ich mal ein Blockpost drüber geschrieben. den können wir auch noch einmal versuchen rauszukramen und verlinken. aber im Prinzip ist das Thema glaube ich alleine durch den wahnsinnigen Hype von frontenseitigem Rendering-Techniken.

41:34 also ich möchte heutzutage... Also ich schon bin irgendwie alt.. Aber die meisten Leute wollen heutzuttage kein HTML Server seitlich machen Aus welchen Gründen auch immer und das führt dann halt ganz häufig dazu, dass Transkursionen einfach von vorne rein raus ist. Dafür war das nie gedacht. Aber damals war es ein relativ mächtiges Werkzeug und hat wenn man wirklich gewusst hat was man tut und die Probleme die das Ding induziert, diese Ansatz induzieren sauber adressiert hat, war es eine sehr mächtige Sache eigentlich.

42:12 Anja ich weiß nicht ob das deine Frage war? Im Grunde geht es ja ein bisschen von der, also auf der einen Dimension haben wir glaube ich die lose Kopplung und auf der anderen Seite vielleicht diese Nutzer-Erfahrungen oder so. Also auf den Hyperlink zu klicken und dann öffnet sich das in einem Tab ist halt was anderes als die Daten werden direkt Inline an der Stelle angezeigt wo ich's haben will.

42:34 Und da haben wir nämlich Wir haben uns in der Reihenfolge ein bisschen vertan, wenn wir von der losen Kopplung argumentieren. Da haben wir den iFrame eigentlich noch dazwischen. Die embeddableframes sind das Pattern was noch da dazzwischensitzt, was eben im Browser Isolationsmechanismen benutzt um bestimmte Dinge an bestimmten Stellen anzeigen zu können die aber dann schwieriger anzusteuern sind sozusagen von außen, von innen man andere Schnittstellen eigenschaften hat.

43:05 Aber das ist oder telekuriere mich... Ja genau, es gab auch viele Leute die irgendwie gesagt haben Transklusion, das sind ja eigentlich iFrames für abgemilderte iFrams oder sowas. iFrame sind natürlich auch ein Muster was es gibt, was wir auch beschrieben haben. Was ich nach wie vor Super relevant, auch wenn es total unbeliebt ist.

43:33 Aber iFrames sind halt tatsächlich das Muster... Also was sind iFrame? Im Prinzip einfach ein bestimmtes HTML-Element, was einfach einen komplett eigenen Browser-Kontext mit eigenem JavaScript Umgebung und allem eröffnet und im Prinzip einfach einen Bereich in einer Webseite für eine andere Seite reserviert.

43:55 Ein BrowserTap in einem Browser TAP eigentlich! Und das ist natürlich unglaublich schwerfällig. Das schleppt ja wirklich riesige, potentiell riesige Mengen an irgendwelchen Browser-Kontexten mit sich. Man will auch nicht ein Browser aufhaben in dem zwar hundert Tapps aufsehen. Einige wollen das schon?

44:12 Also ich...nicht! Aber die... Genau aber die... Das Problem dabei ist halt einfach dass irgendwann die Maschine langsamer wird weil so'n Browsertap einfach was teures ist. Ja das ist viel viel viel Teurer, ressourcenmäßig als wenn man einfach ein bisschen html Fragmente irgendwo reinwirft. Der Vorteil bei iFrames ist halt ganz klar der das iFrame wirklich eine Isolation sind.

44:39 also wenn ich Frontends habe und ich möchte Frontends integrieren von anderen Teams den nicht traue denen ich nicht trau zum Beispiel dass sie sicheres JavaScript schreiben können. Dass das HTML nicht irgendwelche Cross-Site-Scripting Angriffe mit sich rumschleppt und so was, dann bleiben eigentlich neben Links bei denen das natürlich auch möglich ist.

45:04 Eigentlich nur die Iframes über wenn ich eben genau die Anforderung habe, die Tamo meinte, dass ich eben Informationen von zwei oder mehr Systemen von zwar oder mehr Vertikalen auf einer Seite anzeigen möchte. Deswegen haben wir das auch beschrieben und ich finde es nach wie vor relevant, dass ist doch eigentlich das einzige Pattern wo wir so ein bisschen die Brücke weggeschlagen haben.

45:26 Auch vom browser weil das auch ein pattern ist was man im prinzip auch in so hybriden umgebungen häufig sieht. also ich baue irgendwie eine mobil anwendung und in dieser mobilanwendung habe ich dann eben einen möchte ich einen uai teil von jemand anderem haben der eben wirklich autonom ist. das ist das ne anforderung.

45:44 die geht in der mobilen welt typischerweise nicht so einfach, ne? Wenn ich aber in einer Mobilanwendung einfach quasi einen kleinen Web-View eine mini Browser ohne Adresszeile und alles einbinde und darin eine Seite öffne dann kann ich eben im Prinzip Inhalte von anderen anzeigen. Und die Anderen können auch ihre Inhalter ändern, ohne dass die Anwendungen neu durch den Freigabeprozess in irgendwelchen Appstores muss und sowas.

46:12 Das ist aber im Prinzip konzeptionell, exakt dasselbe wie ein Iframe in der Website. Mit genau denselben Vor- und Nachteilen ist auch schwer gewichtig. In der Mobilwelt kommt natürlich noch hinzu das dann halt aussieht wie eine Webview also wie einen nicht nativer Teil der UI. Aber das sind Dinge die kann man dann teilweise wahrscheinlich auch beantworten, aber genau.

46:36 Okay damit haben wir drei Pattern besprochen? Vier sogar Zweible sind noch. Das sind im Prinzip die etwas moderneren Formen, das erste von den beiden. also da geht es sehr stark um das kleinseitige Rendering. wie mache ich Frontend Integration wenn nicht klein seite wirklich rendern möchte? und das erste Pattern?

47:07 dafür war es verdammt schwer einen Namen zu finden, ich bin auch immer noch nicht so ganz glücklich. Wir haben uns halt bei Self-Contained Systems ein bisschen angelehnt und das Self-contained Components genannt weil die Idee bei diesem Pattern eigentlich ist dass Teams im Prinzip Web Components bereitstellen.

47:24 also die technische Implementierung davon sind in der Regel einfach Web Component. Also was sind Web Compsonents? Web Components ist so ein Sammelbegriff Für zwei APIs, die der Browser bereitstellt. Das eine ist Custom Elements und das andere ist der ShadowDom. Custom Elelements bietet die Möglichkeit dass ich JavaScript habe.

47:44 Team A baut ein Stück JavaScript was Team B einfach in seine Seite integriert. dann kann Team B eine Komponente, eine UI-Komponent von Team A also diejenigen die das JavaScript bereitstellen einfach an irgendeinem beliebigen Stelle ihrer Anwendung, ihrer UI Instanziieren, indem sie halt einfach ein HTML-Element hinschreiben was einen bestimmten Namen hat.

48:06 Also zum Beispiel wenn ich mir sowas vorstelle es gibt vielleicht eine Kanal und ich habe das Versicherungsportal geschrieben und jetzt möchte ich auf jeder Seite in diesem Versicherungsportal eine Chat Funktionalität integrieren so dass sich egal wo ich gerade bin immer mit dem Kunden Support chatten kann und trotzdem noch an der Webseite rumklicken kann.

48:27 Dann müsste ich einfach nur dafür sorgen, dass das Team was für den Chat mit dem Kundenportal verantwortlich ist einen JavaScript bereitstellt. Was eine Komponente beinhaltet, beschreibt, eine Custom Element beschreibt... ...was im Prinzip diesen Chat implementiert. also was zum Beispiel standardmäßig irgendwie unten rechts in der Seite so ne kleine Sprechblase oder sowas anzeigt und wenn ich draufklicke geht halt ein HTML-Element oben drüber auf.

48:55 das ist dann eben irgendwo in diesem Custom Element vergraben, geht oben drüber auf und da drin ist der Chat mit meinen Verläufen von den vorherigen Seiten. Und was weiß ich auch noch? Das wäre jetzt etwas, was im Prinzip ein Custom Element einfach implementieren könnte. Das Problem, was ich aber habe, ist dass wenn ich hier überlege, dass sich dieses Icon zum Beispiel habe oder eben auch dieses Element, was oben drübe aufgeht, dann sind es ja auch am Ende des Tages... Nur Elemente, die im Dom erscheinen.

49:26 Also wenn ich auf diese Sprechblase klicken würde und dann soll dieser Overlay entstehen, dann bedeutet das dass mein CustomElement HTML-Elemente in dem DOM instanziert. Das heißt eigentlich habe ich nach wie vor dieselben Probleme, die ich auch schon mit Transklusion hatte nur, dass ich das jetzt alles kleinzeitig mache indem mich JavaScript benutze um das HTML zu erzeugen und nicht einfach irgendwelches html vom Backend laden.

49:50 Und da kommt eben der Shadowdom, den hatte ich ja auch schon mal erwähnt dazu. Der ist im Prinzip einfach die Möglichkeit dass man Bereiche des Doms also dieses gesamten Seitenbaums im Prinzip zurücksetzt was das CSS Styling anbelangt. Also dass sich eben einfach ein Teilbaum nehmen kann zum Beispiel den Teilbaum der mein Overlay ausmacht und sagen kann hey!

50:14 Alles was außerhalb an CSS ist, soll hier drin jetzt bitte nicht gelten. Ich will wieder die Browser Styles ja Times New Roman Schwarz keine Ahnung und insbesondere aber auch umgekehrt alles was ich hier drinnen ein CSS verwende möchte ich nicht dass das nach außen liegt. Das sind also die beiden beiden Haupt Bestandteile von Web Components.

50:34 Also einerseits die Möglichkeit JavaScript zu definieren Was Komponenten beinhaltet Die ich in irgendeinem beliebigen Kontext verwenden kann Und auf der anderen Seite Dass sich eben Isolation von Styling habe, sodass ich diese ganzen Probleme die wir eben bei Transklusion schon durchgekaut haben. Und das Pattern um jetzt endlich mal reinzukommen was wir beschrieben hatten waren die Self-Contained Components die im Prinzip einfach die Idee haben Ich habe eine Bibliothek vom Komponenten Die von verschiedenen Teams bereitgestellt werden die ich also optimalerweise in Form eines JavaScripts zur Laufzeit lade.

51:14 Ich sage also, ich lade die Komponentenbibliothek meiner Kundenservice, meine Kundensservice-Vertikale in meinem, keine Ahnung irgendwo im Kundenportal und weil ich diese Kundenservis vertikale geladen habe kann ich jetzt im Prinzip einfach diesen Chat verwenden in meiner Seite egal was das für eine ist ja so und es bedeutet halt dass wenn jetzt diese Kundeservice Vertikale diese Chat Funktionalität verändern möchte ja weiß weiß ich jetzt soll auch noch Spracherkennung da rein oder sowas dass sich mit dem Ding quatschen kann oder Videotelefonie, was weiß ich.

51:45 Dann ändern die halt einfach ihre JavaScript Komponente und dann taucht halt überall wo diese Chat Komponenten eingebunden ist neuerdings der Video Chat auf und nicht mehr das alt. Das ist im Prinzip wirklich sehr ähnlich. zur Transklusion in dem Sinne dass es immer noch alles in einer Seite landet. Das is aber dadurch dass sich heutzutage Dinge wie Isolation habe aber eben auch kleinstätiges Rendering berücksichtige viel viel näher dran Und das ist eben auch etwas, was heutzutage durch jedes Frontend Framework im Prinzip unterstützt wird.

52:18 Also wenn ich zum Beispiel Angular verwende, dann kann ich halt Angular-Komponenten einfach als Web Components exportieren. Die sind meistens nicht sehr leicht gewichtig. also man muss ein bisschen vorsichtig damit sein. aber ich kann halt jede beliebige Angular Komponente im Prinzip als Web Komponent exportieren die in irgendein Kontext werfen und dann läuft sie da magisch!

52:37 Das ist auch alles wieder nicht so einfach natürlich, das hat auch alle wieder Konsequenzen. Das ist alles sehr unangenehm wenn es um Authentisierung geht. also wie kommen die an die Daten? Wie kommen sie dazu dass da irgendwelche Tokens vorhanden sind mit denen man back-end APIs aufrufen kann? Das is alles kein NoBrainer aber das ist auf jeden Fall etwas was man in den Griff bekommen kann und was man glaube ich auch relativ praktisch umsetzen kann gerade weil modern Frontend Frameworks das eben auch sehr gut unterstützen.

53:06 Entscheidend ist ja, glaube ich schon noch mal zu sagen das es auch hier diese Komponenten in der Hoheit eines anderen Teams liegen und von dort geladen werden. Also auch Bestandteil des Diploiobilds sind nicht zur Bildzeit als NPM-Paket oder irgendwie sowas eingeboten werden. Das ist die Idee Genau.

53:28 Und dann das letzte. Pattern haben wir an Anlehnung an die bestehenden Pattern Sprachen Pluck in Module genannt. Das hieß früher anders, weil es im Prinzip für dieses Pattern eine Vorlage gibt, die man frontendzeitig ganz häufig verwendet. Die Idee ist ganz einfach. ich habe ne Single Page App irgendein Framework irgendeiner Wahl nehmen wir mal Angular gebaut.

53:53 Dann ist ja die Frage, eine Angular-App besteht aus mehreren Modulen. Ich habe eine große App gebaut, die monolitisch mehr oder weniger mein gesamtes Kundenportal meiner Versicherung abbildet. Dann modularisiere ich diese Angular-app und dann gibt es einen Teil mit dem ich meinen Profil pflegen kann.

54:10 Dann gibt das ein Teil wo ich meine Pkw-Versicherungen anschauen kann. Und dann gibt's vielleicht noch den anderen Teil. Die Idee, die im Prinzip hinter diesen Pluginmodulen steckt dass diese Module natürlich auch zur Laufzeit von verschiedenen Quellen geladen werden können. Also, das ich halt im Prinzip einfach sagen kann – ich habe fünf Teams – die sind alle für dieses Kundenportal verantwortlich und jedes Team stellt im Prinzip eine oder mehrere Angular-Module bereit, die ich einfach zur Lufzeit im Prinzip da rein lade.

54:39 Dafür gibt es halt schon technische Implementierung. also wir haben's am Anfang Module Federation genannt weil das etwas ist was Webpack mit der OneDual Federation zum Beispiel versucht zu unterstützen. Aber das hat im Prinzip nichts mit Webpack zu tun, das kann man dann auch ohne Webpack machen. Das sind aber eben einfach Dinge die... Ja genau wir haben versucht einen neutraleren Namen zu finden.

55:01 deswegen heißt es Plug-in Mechanismus. Kann man sich ja vorstellen? Die Idee die wahrscheinlich mal irgendwann hinter Eclipse RCP stand Mit deren Plug ins Wahnsinn im Prinzip die gleiche. Ich committe mich halt auf eine Technologie. Nennen wir sie Angular nennen wir den React egal Und die Idee ist halt einfach, ich lade unterschiedliche Elemente dieser UI.

55:26 Die verschiedene Schnittstellen dann hoffentlich implementieren. Verschiedene definierte Schnittstellen dann im Optimalfall definieren nicht. Lade diese Komponenten oder Module und instanziere sie in meine Anwendung. Was genau innerhalb so eines Moduls passiert? Das entscheiden die Teams, die dieses Modul bereitstellen.

55:45 Wenn da ein Team das Modul für das Profil Passwort ändern, bereitstellt sich entscheidet. Hey wir wollen jetzt hier auch noch irgendwie eine zusätzliche Prüfung einbauen. Keine Ahnung, Capture wenn du der Passwort ändern willst oder so was? Oder wir wollen Paarskis unterstützen dann machen die das halt in ihrem Modul und alle anderen betrifft es eigentlich gar nicht.

56:08 Das ist die Idee bei diesen Plackenmodulen. Also hyperlinks, Return-Uris, Transklusion Isolated frames, self-contained components und placken Module. Ihr hattet ja schon gesagt so was wir Transkursionen seht ihr in der freien Wildbahn eher weniger jetzt. das ist eher ein damals Ding gewesen oder irgendwie ein Ding gewesen was er nur wenige Leute benutzt haben.

56:36 welche Muster sieht man dann heutzutage implementiert? Oder auch welche Kombination von Mustern? Das widerspricht dem jetzt, ne? Aber Transklusion mit Server-Seitenkluts benutzen schon einige unserer Kunden. Ich glaube die Kleinzeittransklusion ist sagen wir ein bisschen Respekt Einflössender. aber das... Genau setzen schon Kunden von uns durchaus auch sehr produktiv ein und auch so dass einfach keine Beschwerden macht.

57:10 Ja wenn man es adressiert hat funktioniert's. Hat halt die Restriktion serverseitig zu sein was ich halt schon Wovon ich viel gehört habe, dass es auch total toll sein soll. Was ich aber selber leider noch nie gesehen habe sind wirklich diese Pluckin-Module. also Ich hab darüber viel gelesen. einige unserer Kollegen haben damit auch Sachen gemacht doch teilweise zu Zeiten wo das noch relativ unklar war oder unstandardisiert war im Prinzip Persönlich ziemlich schwierig, weil ich eigentlich keine Lust hätte mich auf ein Framework zu kummitten.

57:46 Ich verstehe das immer nicht wieso Leute Integrationsmechanismen auswählen die im Prinzip proprietäre festgelegte Bausteine haben. Das spricht aus meiner Sicht sehr dagegen. Aber wenn einem das egal ist, dann passt es. Was ich halt häufiger schon gesehen habe und was ich auch selber ziemlich oft mache... Ich mach immer noch in einigen Projekten Transkursionen aber ich mach relativ viel dieses Self-Contained Components Zeug also Web Component bauen die man dann in andere Kontexte reinwirft ist etwas relativ einfaches.

58:20 Das kann man ganz gut machen und meiner Meinung nach ist es halt so. das was man typischerweise heutzutage macht. iFrames ist klar, ganz viele ganz viele proprietäre Systeme. oder sagen wir mal wenn ich irgendein ERP-System nehme und nicht möchte in dieses ERP system irgendeine Ansicht rein integrieren aus einem internen System passiert es typischer Weise nach wie vor über iFrams.

58:45 Ein Frames ist einfach eine Technologie die man sehr häufig sieht ein Hyperlinks ja eh also im Prinzip kann man sich orientieren Man kann im Prinzip auswählen, aus diesen verschiedenen Aspekten. Dafür haben wir ja genau das Paper geschrieben und im Prinzip sind sehr viele Kombinationen denkbar. Das was mir glaube ich wichtig wäre ist dass man sich darauf festlegt.

59:08 also wie Tamo schon sagt wenn ich mich vor Jahren oder vor drei Wochen keine Ahnung auf Transklusion festgelegt habe und damit umgehen kann dann ist es sicher ein Muster was auch noch die nächsten zehn Jahre vernünftig trägt, das spricht überhaupt nichts dagegen. Der Trend dass Leute plötzlich Frontend seitig rendern wollen der spricht ein bisschen dagegen.

59:29 dann ich muss irgendwelchen Leuten die noch nie irgendwie serverseitiges Rendering gemacht haben plötzlich erklären wie man sowas macht und da sind eben... Da sind Dinge die eher auf einer weniger technischen oder architektonischen einfach auf einer organisatorischen Ebene dagegen arbeiten. das was halt wichtig ist, wenn ich mich entschieden habe werde ich es nicht mal so eben ändern glaube ich.

59:52 Was finde ich dann spannender Perspektivwechsel ist? Also wenn ich ein System bauere oder einen System of a Systems baue, dann hab' ich ja eine gewisse Entscheidungsfreiheit oder kennen sozusagen die beteiligten Protagonisten oder integrieren Systeme oder Bereitstellensysteme. Wenn das aber über solche Grenzen hinausgeht, finde ich wird's nochmal spannend weil irgendwie so ne Page App die nicht darauf geachtet hat dass Deep Links funktionieren.

1:00:16 er lässt sich halt noch nicht mal über links irgendwie integrieren in deiner Anwendung. Und also Till hatte mir das ja damals erzählt, ich glaube Microsoft war das deren Dynamics Komponenten der NLP-System man ziemlich gut transkludieren kann oder über iFrames einbinden kann weil diese URL Absprünge halt gut funktionieren.

1:00:35 Das ist ja auch eine bewusste Designentscheidung die irgendjemand mal getroffen haben muss. Also würde ich schon auch sagen wenn ich Systeme design Also je nach Domäne, in der ich das baue sollte man schon vielleicht auch daran denken. Wie können andere das möglichst lose gekoppelt integrieren und einbinden?

1:00:52 Also die Frontindigration habe ich das Gefühl ist immer noch so'n nischen Ding. wenn jemand über Integration redet wird sofort über... Ja da brauchen wir eine API oder einen Datenzugriff oder was weiß ich. was aber braucht man den vielen Fällen halt einfach nicht sondern eigentlich nur eine URL Und die kann man auf verschiedene Arten und Weisen einbetten oder rufen oder wieder zurück springen.

1:01:12 Und das finde ich eigentlich, dass wäre so meine Botschaft. Dass man irgendwie auch von beiden Seiten daran denkt. Auch das was man selber bereitstellt wie kann das eigentlich integriert werden? Ihr hattet ja gerade schon gesagt wenn ich mich einmal für einen Pattern entscheide dann sollte es halt auch langfristig haltbar sein.

1:01:32 aber ist denn in der heutigen agentischen Softwareentwicklung noch nötig mich für eine bestimmte Architektur zu entscheiden? brauche hier überhaupt wirklich Architektoentscheidungen? Sind die so bindend, wenn ich doch jederzeit meine Applikation einfach neuschreiben lassen kann? Solange wir über wirkliche Integration reden, musst du halt nicht eine Applikition neu schreiben sondern mehrere.

1:01:54 Also wenn jetzt dein Online-Shop gebaut hast und der basiert auf Transklusion den eben mal in irgendein anderes Muster zu überführen das wird wahrscheinlich natürlich weh tun und man würde davon abraten. Das ist ja genau auch der Grund warum warum wir schon wirklich fest der Meinung sind, nicht dass irgendein Ansatz davon nicht gut wäre oder so sondern das es eine Liste von Ansetzen ist die alle ihre Vor- und Nachteile haben.

1:02:18 Und man sich eben bewusst dafür entscheiden soll und zwar nicht für einen sondern für zwei drei vielleicht oder so aber vielleicht auch gegen ein ganz ansatz ganz explizit entscheiden sollte. Das was glaube ich das agentische heutzutage so'n bisschen kippt weswegen ich mir vorstellen kann, dass Frontend-Integration tatsächlich also so sehr ins Blaue rein gedacht.

1:02:40 Aber das Frontend Integration tatsächlich ein bisschen aus der Mode kommen könnte ist... ...dass das Agentische natürlich erlaubt, dass man einfach monolithische UIs baut. Also was es gibt tatsächlich einen Pattern hat eine andere Gruppe geschrieben. Das haben sie Frontend integration genannt und das entspricht aber nicht unserer Definition von Frontendintegration Und das ist das Pattern.

1:03:02 Ich baue eine monolithische Single Page API und integriere einfach Backend APIs von verschiedenen Teams, die jedes Team stellt irgendeine API bereit. Und dann gibt es die magische Super Single Page App, die oben drüber liegt hochkohärent natürlich sein kann weil das alles aus einem Guss kommt als kein Problem.

1:03:20 Alles irgendwie Angular und darunter gibt's halt die APIs. Das ist glaube ich in der klassischen Welt Sehr häufig gemacht worden, man hat aber sehr stark gesehen dass das also gerade am Anfang ein Single Page Apps durch die Tür kamen. Haben das viele Leute gemacht und haben dann relativ schnell festgestellt dieses Ding beinhaltet am Ende die gesamte Logik.

1:03:43 Die gesamte Komplexität steckt einfach nur noch in diesem Monster drin und meine Backend API ist eigentlich gar nichts mehr. Die nehmen Jason entgegen und realisieren das damit es in die Datenbank geschrieben wird. Hoffentlich machen sie ganz viel Security noch und Sicherheitsverwaltung. Da drücken wir immer die Down, dass das so ist.

1:04:04 Aber wenn es so ist dann ist halt die gesamte Logik der gesamten Arbeitsflow wie genau erfasse ich meine Kunden-und Vertragsdaten ist alles in vorne in der UI drin Und Wie gesagt Ich glaube Das war schwer zu händeln. man könnte darüber spekulieren Ob so eine UI, so eine monolithische Single-Page-UI jetzt in Zukunft nicht wieder dadurch attraktiver wird dass man das Ding einfach generieren kann.

1:04:33 Gerade wenn die Backends nämlich in der Tat Security machen was ich ehrlich gesagt nicht glaube, dass es wirklich oft so ist weil... Es gibt nie jemand zu wenn man darüber redet. aber die backends die wir so in der Praxis sehen sind teilweise wirklich extrem anämisch hat hat Stefan glaube ich immer gesagt, die tun wirklich gar nichts.

1:04:55 Die machen halt irgendwie Sicherheitsprüfungen auf der Ebene. ja es sind die Pflichtfelder ausgefüllt aber wir haben ja auch fachlich übergreifende Sicherheitsanforderung. ein Konto-Betrag darf nur erhöht werden wenn der kunde diesen jenes hat und sowas muss natürlich auch in den Backends drin sein. also komplexere fachliche Validierung überhaupt.

1:05:17 die gesamte Berechnung muss ja in den Apis sein Damit man überhaupt sichere Frontend-Anwendungen, egal ob sie jetzt monolithisch oder modulitisch sind bauen kann. Aber wenn ich jetzt im Prinzip wirklich sichere Backend APIs habe die irgendwie hatte TP sprechen oder WebSockets mit dem Frontend oder so... Egal!

1:05:35 Wenn die wirklich sicher sind weil die gesamte Sicherheitsrelevante oder die gesamten relevante Funktionalität in diesen API's sind dann kann nicht das Frontend ja eh einfach wegwerf generieren. Ja es juckt ja kein mehr. Dann generiert halt da irgendwie das neue Cloud Code irgendwelche Unsinnigkeiten in die UI wurscht.

1:05:54 Ist ja nicht sicherheitsrelevant, dass Backend überprüft ist ja eh. Das heißt so wie KI im Prinzip in die Front-Entwicklung einschlägt oder überhaupt in die Entwicklung einschlagt schält sich für mich ein bisschen so raus Die Backendler relativ konservativ und dafür immer zu unrecht belächelt meiner Meinung nach mit diesen KI-Tools vorgehen, weil da zählt es halt so ein bisschen.

1:06:21 Und Frontendler sind immer sehr schnell dabei und sagen ja komm hier generier mal den Code gucken wir uns nicht an und hau raus den Kram. Das kann ich mir nur dann leisten wenn ich einfach sage ist auch wurscht was diese Anwendung baut ob das wirklich so egal ist... Also ich selber kauf das gerade nicht, was ich sage glaube.

1:06:41 Ich habe einfach so zutiefst die Befürchtung dass es genau das ist wo unsere Branche gerade hin steuert. Dass wir im Prinzip Wegwerf-Kleins bauen, die dann eben beliebig groß sein können und dann trifft genau das alles was du grade gesagt hast an der zu. Dann mach doch schmeiß rein wir brauchen schon Frontentintegration.

1:07:02 aber für mich ist das eine absolut unentschiedene Frage und ich glaub auch irgendwie Man sollte es, wenn man diesen Weg geht, den auch wirklich sehr bewusst gehen und dann auch wirklich sicherstellen. Dass die Backends wirklich auch sicher sind. Die Frage ist ja für was? Und für weh in welcher Anwendung ich brauche.

1:07:18 Ich glaube das gibt schon diesen Trend der Citizen Developers, die Vibecodes, die gar nicht so gut programmieren können, die sich dann aber auf ein Backend Service wie Superbase oder sowas stützen, was einem all das schon mal bringt. zumindest also die ganzen Fußangeln, in denen man sonst tappen kann.

1:07:38 Die versuchen die mit Roll-Level Security oder sowas schon irgendwie zu lösen und dann kannst du da drauf deine Web-Werkwerffrontenz irgendwie relativ gefahrlos darauf bauen, ne? Ich glaube es ist aber nicht unbedingt unser typischer Anwendungsfall in den Zfernen, in denen wir uns bewegen, ja. Ja wunderbar!

1:07:56 Schön, dass ich mit euch sprechen konnte. Es war wirklich sehr spannend. Ich habe einiges gelernt bis zum nächsten Mal. Ciao Die Frage erst mal ist ja noch, ob du auch auf der Europlop-Petanz präsentieren willst. Ich überlege es mir! Es hört sich auf jeden Fall methodisch interessant an. Ja, genau empfehlen.

1:08:17 Vielen Dank Anja!