Extrahieren von Micro-Frontends aus einer monolithischen Frontend-Anwendung

Das Konzept von Microser­vice-Architek­turen in der Soft­wa­reen­twick­lung gewin­nt zunehmend an Aufmerk­samkeit. Diese Architek­turen entste­hen oft aus dem Refac­tor­ing mono­lithis­ch­er Anwen­dun­gen. Viele Microser­vice-Architek­turen küm­mern sich wenig um das Fron­tend beziehungsweise um die Benutze­r­ober­fläche. Oft führt die Zer­schla­gung zu vie­len kleinen, lose gekop­pel­ten Dien­sten, die in einem weit­er­hin mono­lithis­chen Fron­tend zusam­menge­fasst sind. Mit ein­er Micro-Fron­tend-Architek­tur kön­nen diese lose gekop­pel­ten Sys­teme systematisch/dynamisch in ein­er Benutze­r­ober­fläche zusam­menge­führt wer­den. Ich gebe in diesem Vor­trag einen Überblick über ver­schiedene Migra­tionsan­sätze zu Micro-Fron­tend-Architek­turen und zeige einen Migra­tionsansatz am Beispiel des Soft­ware-Visu­al­isierung­spro­gramms ExplorViz.

Heute vielleicht mal ohne Library

Wir soll­ten viel öfter einen kri­tis­chen Blick in den “dependencies”-Teil unser­er package.json wer­fen. Häu­fig find­en wir dort, ein­fach aus Gewohn­theit, einen Haufen an Util­i­ty-Bib­lio­theken, wie Lodash oder Moment.js.
So muten wir den Nutzer:innen unsere App teils mehrere MB JavaScript zu und das, obwohl mod­erne Brows­er viele der hier ver­wen­de­ten Funk­tio­nen bere­its bere­it­stellen, ganz ohne Library.

Getreu nach dem Mot­to “Use the Plat­form” schauen wir uns in diesem Vor­trag eine Rei­he von APIs an, für die wir noch vor ein paar Jahren direkt zu npm install gegrif­f­en hät­ten. Im Ergeb­nis kann so hof­fentlich jed­er das ein oder andere KB Bib­lio­theks-Code aus sein­er Anwen­dung werfen.

Mixed Reality: JavaScript-Frontends für das Web3 mit Buildwagon

Das Web3/Metaverse gilt als die näch­ste Entwick­lungsstufe des Inter­nets. Auch wenn sich viele Ideen noch auf Konzeptebene befind­en, gilt als sich­er, dass Mixed Real­i­ty ein wesentlich­es Ele­ment sein wird. Der Vor­trag zeigt, wie Fron­tends für Mixed Real­i­ty Devices wie die Microsoft HoloLens schon heute in JavaScript mit der Build­wag­on Plat­tform gebaut wer­den kön­nen. Cloud-Dien­ste wie […]

Was macht eigentlich ein Bundler?

In der Fron­­tend-Entwick­­lung kommt man sel­ten ohne JavaScript aus. Ges­tandene Back­­end-Profis sehen sich dann mit ein­er kom­plett neuen Tool­chain kon­fron­tiert, die vor unbekan­nten Fach­be­grif­f­en nur so strotzt. Ein Web­pack möchte mit Load­ern die Pack­ages bün­deln, aber selb­stre­dend mit aktiviertem Babel-Sup­­port, damit man auch zu ES6 tran­spilieren kann. Wie meinen?! In diesem Vor­trag wer­den wir uns […]

Advanced Typing in TypeScript

Type­Script ist eine Sprache mit einem leis­tungs­fähi­gen Typ­sys­tem, das auf gängige Pro­gram­mier­muster in der JavaScript-Welt aus­gelegt ist. Dank her­vor­ra­gen­der Typ­in­ferenz und IDE-Unter­stützung wird Webpro­gram­mierung zum Kinder­spiel. In diesem Vor­trag wer­den wir einen Blick auf einige der fort­geschrit­teneren Teile des Typ­sys­tems wer­fen und wie sie ver­wen­det wer­den kön­nen, um felsen­feste APIs zu erstellen. Als Beispiel werden […]

Redux im Jahr 2022 — alles anders?

Wenn man an Redux denkt, hat man oft erst Mal sehr viel “rit­uellen” Code vor dem inneren Auge. ACTION_TYPE Kon­stan­ten, immutable Logik in switch..case reduc­ern mit tief ver­schachtel­ten Spread-Oper­a­­toren, handgeschriebene “Action Cre­ator” Funk­tio­nen und arkanes Store-Set­up — all das am besten verteilt auf dutzende Dateien in der ganzen Code­ba­sis. Nichts kön­nte von moderen­em Redux weiter […]