Gehversuche in HTML5, mein Studium und der Closure Compiler

Da die Prüfungen fürs Studium hinter mir liegen, kann ich mich wieder der Web-Entwicklung zuwenden. Ich habe mich erstmals vertieft mit dem Canvas beschäftigt, das HTML5 mitbringt, und finde es wirklich spannend.

Um gut damit arbeiten zu können, habe ich mir mein eigenes Framework zusammengebastelt. Ich nenne es mal "Zelectric Framework". Es ermöglicht mir "abstrakteres" Handhaben von Animationen mittels Canvas, also nützlich für simple Animationen und komplexe Games.

An dieser Stelle möchte ich erwähnen, dass mir das erste Jahr meines Informatik-Studiums bedeutend geholfen hat; dies betrifft vor allem die mathematischen Grundlagen für Vektoren, Matrizen und ähnlichem. Beim Arbeiten mit 3D-Grafiken hat mir das erheblichen Aufwand erspart. Jetzt kann ich mit meinem Framework ein Objekt mit einer Zeile JavaScript im Raum drehen.

Wie sowas dann aussehen kann, sieht man an meiner Pseudo-3D-Animation. (Sollte auch auf Smartphones funktionieren.)

Wer sich den JavaScript-Code davon angeschaut hat, wird vielleicht festgestellt haben, dass er nicht wirklich leserlich ist. Dies kommt vom Komprimieren mit dem Google Closure Compiler. Dieser nimmt den JavaScript-Code und komprimiert ihn auf eine von drei Kompressionsstufen. Dabei gehen in erster Linie Kommentare und Whitespaces verloren (Stufe Whitespaces), zusätzlich können auch Variablen- und Funktionsnamen gekürzt werden (Stufe Simple), was die Dateigrösse bedeutend reduzieren kann. Spannender aber ist der "Advanced Mode": Er kompiliert den Code und optimiert ihn dadurch. Nicht benötigter Code wird gänzlich entfernt, ganze Code-Abschnitte werden umgekrempelt, Funktionen werden "inline'd", was die Ausführung des Scripts zusätzlich beschleunigt. Mehr dazu in den Docs. Das spannende hierbei, ist zu versuchen die Warnungen wegzubringen, die gelegentlich auftauchen. Dabei lernt man auch gut, wie man optimal JavaScript programmieren sollte.

Mit dem Closure Compiler kann man auch gut mehrere JavaScript-Programmteile zu einem grossen optimierten und komprimierten Klotz verschmelzen.

Der gesamte Code der obigen Animation wurde übrigens durch den Closure Compiler von 37 KB auf 9 KB reduziert, also auf gut einen Viertel.