Extreme Frontend Modularisierung

Die Modularisierung wird fast einhellig als gute Strategie zur Realisierung komplexer Systeme anerkannt. Meiner Erfahrung nach bleibt es aber oft ein Lippenbekenntnis. Oder die Modularisierungsbemühungen werden zugunsten anderer kurzfristiger Ziele zurückgestellt.

Hier versuche ich ausgehend von Frontend-Funktionalität das Thema Modularisierung extrem aggressiv anzugehen. Diese kleine Demo-App vereint mehrere Micro-Apps. JEDE dieser Micro-Apps funktioniert alleine ohne die Mitwirkung anderer Apps. Selbst die Existenz anderer Apps ist nicht erforderlich. Auf Grund der Unabhängigkeit dieser Micro-Apps ist es völlig egal in welcher Reihenfolge, auf welchen Geräten, in wie vielen verschiedenen Browser-Instancen und mit welchen IP-Adressen diese Micro-Apps gestartet werden (gerne auch mehrfach oder gar nicht). Die Demo-App funktioniert davon völlig unbeeindruckt.

Jede Micro-App besitzt eine eigene URL.
http://spintag.de:7777/board.html startet ein Canvas mit SVG-Kreisen (eine Metapher um Objekte mit Attributen zu visualisieren). http://spintag.de:7777/bar.html startet eine Button-Leiste zum Triggern umfangreicher Änderungen an den SVG-Kreisen.
http://spintag.de:7777/jobs.html zeigt ein Job-Listing der letzten Jobs an. Zum Ausprobieren am besten diese URLS in verschiedenen Browsern (PC, smartphones, smart-TV, …) starten.

Natürlich sprichts nichts dagegen eine „Echte Applikation“ auf der Basis dieser Micro-Apps zu bauen ohne auch nur einen einzigen Vorteil der völlig losgelösten Micro-Apps zu verlieren. Siehe hier: http://spintag.de:7777/ Bitte Source-Code anschauen!. Tatsächlich werden nur die Micro-Apps in IFRAMEs geladen. Der Sourcecode der „kompletten App“ enthält keine Zeile Javascript, d.h. auch kein Framework, keine Dispatcher, keine globalen Eventhandler, keine Callbacks, einfach keinerlei Interaktionen im Frontend. Natürlich kann bei der Umsetzung der Micro-Apps das volle Arsenal an Frontend-Technologien in jeder denkbaren Ausprägung benutzt werden. Hier kommt bunt gemischt jquery, d3.js, socket.io, can.js zum Einsatz.

Ok, wo ist der Haken?

Ohne serverseitiges Objektmodell läuft nichts. Jede Micro-App kommuniziert unter Nutzung von websockets mit einer Instanz des Objekt-Modells (in dieser Demo gibt es nur eine globale unbenannte Session, ließe sich aber leicht ändern)

 

Schreib einen Kommentar