Management.html entschlacken: JS und CSS in eigenen Dateien

Wie bereits angedeutet find ich die Bearbeitung des 2800 Zeilen Monolithen management.html ein bissl mühsam und ich glaube, dass eine Trennung der drei Typen an Inhalt (HTML, Javascript, CSS) in jeweils separate Dateien die Sache übersichtlicher gestalten würde.

Die Idee

Im management.html stehen nur die Verweise zu den (lokalen) Files und im build-Prozess wird von processHtml.py ab Zeile 95 (also, wenn noch kein .min.html existiert) der Inhalt vom HTML per Regex auf lokale Scripts und CSS abgeklopft, die entsprechenden Zeilen entfernt und der Inhalt der entfernten Quellen in <style></style> bzw. <script></script> gegossen. Für die Styles würde ich das direkt vor den </head> einfügen, die Scripts dann vor </body>.

Sprich:

Diese zwei Zeilen im HTML

<link rel="stylesheet" href="/styles/management.css">
<script src="/js/management.js"></script>

werden von diesen beiden Regexes

"<script\s.*src=\"((?!http).+?.js)\".*(?:\/script>|\/>)"gm
"<link.+href=\"((?!http).+?).css\">"gm

erfasst und können durch leere Strings ersetzt werden. Der Dateiname wird von der Regex in einer Gruppe gekapselt und is damit easy auslesbar. Den jeweiligen Dateiinhalt fügt man dann entsprechend ins HTML ein bevor die Minification drüber läuft.

Vorteile

  • Das HTML ist „nur mehr“ 850 Zeilen lang und vor allem der JS-Code wird einfacher zu verwalten.
  • Es erlaubt auch mehrere Sources einzubinden, also man könnte das Javascript noch weiter aufteilen (wenn man das in Zukunft zwecks Aufteilung des Codes möchte).

Warum nicht pug, handlebars oder sonstige Frameworks, die solche includes können?

  • Es ist von Haus aus valides HTML, also beim Entwickeln hat der Browser keine Troubles die Ressourcen zu laden.
  • Keine Dependencies! Mit so schätzomativ 20-50 Zeilen Code wäre das ganze außerdem sehr überschaubar.
  • Die Regexes brauchen jeweils so zwischen 2 und 20ms zum Durchlaufen, würden also nicht arg ins Gewicht fallen.
  • Ich hab schon ewig kein Python mehr programmiert, wird mal wieder Zeit :yum:

Was haltet ihr von der Idee? Überseh ich irgendwas oder wär das ein gangbarer Weg?

Test me baby one more time!

Die Regexen kann man hier testen für JS und für CSS.

Troubles …

Was ich leider nicht finden konnte ist ein Weg, wie ich das Script processHtml.py ohne der gesamten Build-Kette starten, geschweige denn debuggen kann :bug:

Da wollte ich zuerst aufschreien, da dann mehr Dateien ausgeliefert werden müssten. Aber Du würdest es ja wieder zusammenführen.
Allerdings wird das System dadurch auch wieder etwas komplexer, aus meiner Sicht ist es es daher nicht wert. So mühsam ist das monolitische File auch nicht, ich bin zumindest zurecht gekommen. :slight_smile:

Das ist sicher irgendwie möglich. Du könntest das Script auch native ausführen, dafür müsstest Du aber zuerst alle Abhängigkeiten lösen. Wieso nich teinfach dne Buildprozess stoppen nachdem die pre-scripts gelaufen sind?

Gewitzt, nicht wahr :wink:

TL;DR: minimal komplexerer Build-Prozess (der selten berührt wird) vs. viel übersichtlichere Struktur in der Weboberfläche (die ja aktuell ziemlich viel Bearbeitung erfährt) ist für mich eine klare Sache :wink:

Das Thema Komplexität wird auch immer sehr subjektiv ausgelegt kommt mir vor :wink: Ich komm auch „zurecht“, schön is was anderes und übersichtlich auch :person_shrugging:
Aber das mein ich nicht subjektiv: für Leute die einsteigen (ein gewolltes Szenario bei open source wenn ich das richtig verstehe) is die Trennung auch nicht schlecht. Immerhin ist das seit dem Jahre Schnee ganz klar der Standard von Webentwicklung. Das heißt, wenn man a) noch nie was mit HTML gemacht hat sind alle Tutorials drauf ausgelegt, wenn man hingegen b) Erfahrung hat, ist das in 99% aller anderen Projekte die man bis dahin gesehen hat extrem selten vorgekommen, dass alles beisammen ist.

Und abgesehen davon ist es gute Praxis auch auf Codequalität zu achten weils – wait for it – den Code besser wartbar macht :partying_face:

Wie gesagt, ich war auch erstaunt, dass alles in einer Datei ist. Aber da ich noch neu bin, habe ich es bewusst so belassen, da sich ja ev. jemand bewusst für das entschieden hatte.

Ich habe einfach einen Wunsch:
Schau doch bitte, dass es auch noch remote funktioniert, das macht das entwickeln viel einfacher. D.h., ich kann mit Chrome und dem CORS-Plugin die Datei auf dem PC im direkt öffnen, alle Anfragen laufen aber über das Gerät. Damit spart man sich das Flashing und muss nicht in den Webbrowser Dev-Tools editieren.

image

Dito.
Und drum frag ich mal in die Runde der nicht mehr ganz so neuen, ob es vielleicht einfach so passiert ist und das eigentlich niemand so wirklich entschieden hat :wink:

Auf jeden Fall, das ist ein must have! :+1:

1 „Gefällt mir“