Webkrauts

CodeKit – Der Alleskönner unter den Tools für Frontendentwickler

Michael Kühnel stellt mit CodeKit eine Software vor, die euch bei moderner Frontendentwicklung unterstützt. Sie kompiliert LESS, Sass, Stylus sowie CoffeScript, überprüft Javascript nach Fehlern, komprimiert Bilder, fügt Dateien zusammen, lädt das Browserfenster automatisch neu und vieles mehr.

Ein Tool für alles. CodeKit erspart euch die Kommandozeile, diverse Webapps und einzelne Tools indem es alles, was ihr euch als Frontendentwickler wünscht, in einer Oberfläche versammelt. Und vielleicht sogar noch ein bisschen mehr.

Die Benutzung könnte einfacher nicht sein: Per Drag and Drop ein vorhandenes Webprojekt hinzufügen und schon kann es losgehen. CodeKit analysiert die Dateien und kann mit den folgenden Dateitypen umgehen und euch die Arbeit erleichtern:

• Sass (CSS Preprocessor)
• Less (CSS Preprocessor)
• Stylus (CSS Preprocessor)
• CoffeeScript (Javascript »Metasprache«)
• Javascript
• JPEG und PNG

Der einzige Wermutstropfen: CodeKit ist Mac Nutzern vorbehalten und wird es laut dem Entwickler auch bleiben.

Sass, LESS oder Stylus

Die drei unterstützten CSS Preprocessor haben eine unterschiedliche Herkunft und unterscheiden sich geringfügig in Syntax und Features (siehe auch unseren Zweiteiler über Sass und Compass). Doch sie haben die folgenden Gemeinsamkeiten, die euch »herkömmlichem« CSS gegenüber vor allem redundante Schreibarbeit abnehmen.

• Nutzung von Variablen, um CSS Eigenschaften zu speichern.
• Mixins – Erweiterte Variablen. Hierin lassen sich mehrere Deklarationen speichern.
• Möglichkeit der Verschachtelung von CSS-Regeln.
• Unterstützung einfacher Rechenoperationen.

Auch ohne sich mit dem Terminal und Ruby oder Node.js anfreunden zu müssen, könnt ihr jede dieser »dynamischen« CSS Erweiterungen einfach ausprobieren, indem ihr sie benutzt. CodeKit überwacht die Dateien und auf Wunsch wird daraus eine herkömmliche CSS-Datei generiert, sobald ihr speichert.

Der Einfluss auf die Kompilierung unterscheidet sich je nach gewähltem CSS Preprocessor. Die Option, CSS direkt bei der Erzeugung zu minifizieren (Whitespaces und Zeilenumbrüche entfernen) ist bei allen dreien gegeben.

Ebenfalls besteht unabhängig vom gewählten CSS-Dialekt die Möglichkeit, das generierte CSS direkt im Anschluss von Bless »verarbeiten« zu lassen. Damit könnt ihr automatisiert die Falle des »CSS Selector Limit« von 4095 Selektoren pro CSS Datei umgehen. Dieses Limit gilt »natürlich« nur für den Internet Explorer, dafür aber bis mindestens Version 9.

CoffeeScript

Auch CoffeeScript kann euch dabei helfen, weniger tippen zu müssen. Es handelt sich hierbei im Prinzip um eine alternative Javascript-Syntax, die zu »gewöhnlichem« Javascript kompiliert wird, welches wie gewohnt in eure Seiten eingebunden und im Browser ausgeführt wird. CoffeeScript verzichtet z.B. auf geschweifte Klammern und Semikolons und nutzt stattdessen Whitespaces und Einrückungen um Codeblöcke auseinanderzuhalten.

Genau wie bei den CSS-Erweiterungen verhält es sich mit CoffeeScript. Sobald ihr speichert, wird aus der CoffeeScript- eine Javascript-Datei erzeugt. Bei der Kompilierung gibt es nur eine Option: Ihr könnt darauf verzichten, um den eigentlichen Code eine sich selbstaufrufende anonyme Funktion zu legen. Hierbei handelt es sich um eine Javascript Best Practice, die dafür sorgt, dass der globale Scope nicht unnötig »missbraucht« wird. Denn Variablen und Funktionsdeklarationen aus dieser Funktion sind außerhalb des Gültigkeitsbereiches nicht erreichbar.

Ansonsten gleichen die Möglichkeiten zur »Weiterverarbeitung« denen von Javascript.

Javascript

Für Javascript könnt ihr wählen, was beim Speichern automatisch angestoßen werden soll.

1. Fehlerüberprüfung
2. Komprimierung
3. Zusammenführung

Fehlerüberprüfung

Zur Wahl stehen JSLint und JSHint. Beide könnt ihr in ihrer Fehlertoleranz konfigurieren. JSHint ist dabei weniger anstrengend. Es bietet zum Beispiel per Default die Option »jQuery« und validiert somit auch Aufrufe von jQuery-Methoden.

Eines dieser Tools zur Überprüfung von Syntaxfehlern zu nutzen, sollte zum Pflichtprogramm bei Benutzung von Javascript gehören. Denn es hilft z.B. auch Fehler zu vermeiden, die Chrome oder Firefox ignorieren, sich aber im Internet Explorer durchaus bemerkbar machen können.

Komprimierung

Mit UglifyJS bietet CodeKit einen modernen Javascript Kompressor, der Dateien ordentlich, schnell und sicher schrumpfen lässt. Die Kompressionsraten liegen zwischen »YUI Compressor« und dem »Google Closure Compiler«, dafür ist UglifyJS jedoch wesentlich schneller als letzterer.

Dateien zusammenführen

Um die Ladezeiten einer Webseite so gering wie möglich halten, solltet ihr neben den Dateigrößen auch die Anzahl der Anfragen an den Server so gering wie möglich halten. Dabei unterstützt euch CodeKit nicht nur bei CSS-Dateien, sondern auch bei Javascript.

Das funktioniert dadurch, dass es CodeKit ermöglicht, Javascript-Dateien ineinander zu importieren. Dadurch könnt ihr Javascript Dateien zusammenführen und dem Browser letztendlich nur eine einzige ausliefern. Beim Import könnt ihr festlegen, ob die zu importierende Datei am Anfang oder am Ende eingefügt wird. Importiert eine Datei mehrere andere, lässt sich per Drag und Drop die Reihenfolge beeinflussen. Das Importieren selber lässt sich ebenfalls per Drag und Drop, oder durch einen speziellen Kommentar innerhalb einer Javascript bzw. Coffeescript Datei initiieren.

Nun müsst ihr nur noch entscheiden, ob die Dateien beim Speichern nur zusammengeführt, oder zusätzlich noch komprimiert werden sollen.

Frameworks

Die Funktionalität der »Frameworks« geht noch einen Schritt weiter. Hierunter verbirgt sich die Möglichkeit, Dateien, die projektunabhängig genutzt werden, CodeKit einmalig als »Framework« bekannt zu machen. Ist dies geschehen, lassen sich die Dateien in jedem Projekt nutzen. Frameworks können LESS-, Sass-, Stylus-, Javascript- und Coffeescript-Dateien beinhalten.

Der Vorteil hiervon ist, dass ihr z.B für sämtliche Projekte nur noch einmal jQuery auf eurer Festplatte benötigt, welches ihr in eure Projekte importieren könnt. Frameworks lassen sich auch wunderbar dafür nutzen, wiederverwertbaren Code zu erzeugen. Beispielsweise durch Erstellung eines eigenen CSS Boilerplates auf Basis von z.B. LESS.

Bilder komprimieren

Mit einem Klick lassen sich alle JPEG und PNG Bilder eines Projektes in CodeKit verlustfrei komprimieren. Hiermit könnt ihr bei PNGs je nach Bild bis zu 30% an Dateigröße einsparen (verglichen mit Photoshops »Für Web und Geräte speichern«).

Weitere Information zum Thema Website Performance findet ihr in den Website Performance Best Practices.

Auto-Reload

Auch das automatische Neu-Laden des Browsers, sobald sich eine Datei ändert, übernimmt CodeKit. In der aktuellen Beta-Version zunächst in Google Chrome und Safari.

CodeKit herunterladen

CodeKit befindet sich zurzeit in einer offenen Beta-Phase und läuft stabil. Die Beta-Version könnt ihr direkt auf der Website des Entwicklers herunterladen und bis zum 20. Dezember 2011 nutzen. Die finale Version wird voraussichtlich für etwa 10 Dollar in Apples App Store zu kaufen sein.