{"id":68,"date":"2017-09-25T20:23:59","date_gmt":"2017-09-25T20:23:59","guid":{"rendered":"http:\/\/spintag.de\/?p=68"},"modified":"2017-09-25T20:23:59","modified_gmt":"2017-09-25T20:23:59","slug":"extreme-frontend-modularisierung","status":"publish","type":"post","link":"https:\/\/spintag.de\/?p=68","title":{"rendered":"Extreme Frontend Modularisierung"},"content":{"rendered":"<p>\t\t\t\tDie Modularisierung wird fast einhellig als gute Strategie zur Realisierung komplexer Systeme anerkannt. Meiner Erfahrung nach bleibt es aber oft ein Lippenbekenntnis. Oder die Modularisierungsbem\u00fchungen werden zugunsten anderer kurzfristiger Ziele zur\u00fcckgestellt.<\/p>\n<p>Hier versuche ich ausgehend von Frontend-Funktionalit\u00e4t 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\u00e4ngigkeit dieser Micro-Apps ist es v\u00f6llig egal in welcher Reihenfolge, auf welchen Ger\u00e4ten, 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\u00f6llig unbeeindruckt.<\/p>\n<p>Jede Micro-App besitzt eine eigene URL.<br \/>\n<a href=\"http:\/\/spintag.de:7777\/board.html\">http:\/\/spintag.de:7777\/board.html<\/a> startet ein Canvas mit SVG-Kreisen (eine Metapher um Objekte mit Attributen zu visualisieren). <a href=\"http:\/\/spintag.de:7777\/bar.html\">http:\/\/spintag.de:7777\/bar.html<\/a> startet eine Button-Leiste zum Triggern umfangreicher \u00c4nderungen an den SVG-Kreisen.<br \/>\n<a href=\"http:\/\/spintag.de:7777\/jobs.html\"> http:\/\/spintag.de:7777\/jobs.html<\/a> zeigt ein Job-Listing der letzten Jobs an. Zum Ausprobieren am besten diese URLS in verschiedenen Browsern (PC, smartphones, smart-TV, &#8230;) starten.<\/p>\n<p>Nat\u00fcrlich sprichts nichts dagegen eine &#8222;Echte Applikation&#8220; auf der Basis dieser Micro-Apps zu bauen ohne auch nur einen einzigen Vorteil der v\u00f6llig losgel\u00f6sten Micro-Apps zu verlieren. Siehe hier:<a href=\"http:\/\/spintag.de:7777\/\"> http:\/\/spintag.de:7777\/<\/a> Bitte Source-Code anschauen!. Tats\u00e4chlich werden nur die Micro-Apps in IFRAMEs geladen. Der Sourcecode der &#8222;kompletten App&#8220; enth\u00e4lt keine Zeile Javascript, d.h. auch kein Framework, keine Dispatcher, keine globalen Eventhandler, keine Callbacks, einfach keinerlei Interaktionen im Frontend. Nat\u00fcrlich kann bei der Umsetzung der Micro-Apps das volle Arsenal an Frontend-Technologien in jeder denkbaren Auspr\u00e4gung benutzt werden. Hier kommt bunt gemischt jquery, d3.js, socket.io, can.js zum Einsatz.<\/p>\n<p>Ok, wo ist der Haken?<\/p>\n<p>Ohne serverseitiges Objektmodell l\u00e4uft 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\u00dfe sich aber leicht \u00e4ndern)<\/p>\n<p>&nbsp;\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00fchungen werden zugunsten anderer kurzfristiger Ziele zur\u00fcckgestellt. Hier versuche ich ausgehend von Frontend-Funktionalit\u00e4t das Thema Modularisierung extrem aggressiv anzugehen. Diese kleine Demo-App vereint mehrere Micro-Apps. JEDE dieser Micro-Apps funktioniert alleine ohne [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-68","post","type-post","status-publish","format-standard","hentry","category-fingerubung","category-modularisierung","entry"],"_links":{"self":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=68"}],"version-history":[{"count":0,"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts\/68\/revisions"}],"wp:attachment":[{"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}