Gehversuche in HTML5, mein Studium und der Closure Compiler

01.09.2011, 20:05

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.
 


Andere Einträge


Kommentare

#1
von JB am 18.06.2013, 12:41
Nice demo ! Wenn's kein Geheimnis ist, wäre es aber auch schön, wenn Du den lesbaren JS-Code veröffentlichen könntest.

#2
von Ikke am 02.07.2013, 22:34
Nett geschrieben, aber da schon fast 2 Jahre alt, ist die Frage ob's nicht schon überholt ist.

#3
von Markus am 04.06.2015, 22:33
Der Quellcode ist mit Sicherheit schon überholt, der Tipp dieses Eintrags ist auch eindeutig der Closure Compiler!

#4
von Frankfurt am 28.07.2015, 13:15
Hallo, da stimme ich Markus zu. Ich denke er hat Recht. Dirk

#5
von ingo am 09.11.2015, 09:07
Ich finde es immer wieder faszienierend, wie man was mit Javascript möglich ist. Mag sein, dass wie Markus schreibt, der Code inzwischen überholt ist, aber der Artikel ist ja auch schon etwas älter.

#6
von ingo am 09.11.2015, 09:11
Entschuldigung, es muss natürlich "faszinierend" heißen.

Gruß Ingo