Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

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

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:

Screenshot: Ein Projekt in CodeKit

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
Screenshot: Javascript Optionen
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.

Kommentare

Andy
am 16.12.2011 - 11:28

Dummerweise endet die offizielle Beta in 4 Tagen und das Programm funktioniert dann nicht mehr. Weiterhin funktioniert es NUR mit Lion, also auch nicht mit älteren OSX. Ziemlich Mies ...

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Webkraut)
am 16.12.2011 - 12:09

Hi Andy, ich finde das auch ziemlich ärgerlich. Aber diese Konzentration auf das neueste MacOSX findet man häufiger. Eine Vorgehensweise, die man in der Windowswelt eher selten findet. Mich überzeugt aber auch dieses Programm nicht zum Umstieg auf Lion. Muss ich halt mit anderen Tools arbeiten :-)

Permanenter Link
Michael Kühnel

Michael Kühnel (Autor)
am 16.12.2011 - 12:53

Das stimme ich uneingeschränkt zu. Es ist ärgerlich, dass es nur unter Lion läuft. Vor allem, da Lion von unserer IT hier im Unternehmen noch nicht »ausgerollt« wurde.

Aber die Entscheidung des Entwicklers kann ich nachvollziehen. Denn wenn ich ihn richtig verstanden haben, nutz er APIs die es nur für Lion gibt. Und er will den Quellcode nicht durch Legacy-Code aufblähen.

Und das ist doch in etwas so, wie wenn wir als Frontendentwickler einfach CSS3 nutzen würden und uns nicht darum kümmern würden, für den Internet Explorer für Fallbacks zu sorgen. Sei es, mit CSS3PIE, proprietären Microsoft Filtern oder Grafiken.

Eine schöne Vorstellung, die meisten Kunden nicht verstehen würden. Auch wenn es nicht an Argumentationsgrundlagen mangelt:
- http://dowebsitesneedtolookexactlythesameineverybrowser.com/
- http://drublic.de/blog/wo-sind-meine-abgerundeten-ecken/

Der Entwickler von CodeKit hat es einfach durchgezogen ; ]

Das mit der zeitlichen begrenzten Beta Version ist schade, aber laut dem Entwickler soll CodeKit nach Ablauf der Beta im App Store erscheinen. Und warum er es im Gegensatz zu seinem weiterhin kostenlosen Tool »LESS.app« verkauft, anstatt es zu »verschenken«, ist auch nachzuvollziehen. Siehe http://incident57.com/codekit/about.php#navRibbon

Permanenter Link

Bryan Jones
am 16.12.2011 - 22:00

Bryan here, guy behind CodeKit and Less.app.

Sorry about the English; I don't know German and had to use Google Translate to read the page above. That may have introduced some errors, so bear with me if my response here doesn't match the original text.

1) Uglify.js is actually *better* that YUI AND Closure. I looked at and considered all three for the app and chose Uglify because it is both faster and produces smaller files. Trust me; I did my homework.

2) The app requires Lion because of new APIs that make developing a LOT faster and easier. I knew people would be ticked about this initially, but let's face it: six months to a year from now, most folks in the target market for CodeKit (developers) will be on Lion. Plus, the upgrade is only $29, so there's not a huge barrier. I'm one guy who writes apps in my spare time --- I'm not a company like Panic that has lots of people who can take on the extra work of supporting older versions of OS X. I have to be as efficient as possible, and that means Lion-only.

3) The last paragraph in the comment above didn't translate very well, but I plan to continue supporting Less.app for a long time. That app is not going away and it will always be free.

4) And finally, the beta will be extended into January. I've been unable to work on CodeKit for the past 3 weeks because I've been tied up with final exams in grad school. On Monday I'll be posting a new update that extends the beta period and the app store version should appear sometime in January.

Cheers.

Permanenter Link
Olaf Gleba

Olaf Gleba (Webkraut)
am 18.12.2011 - 14:44

Der Entwickler von CodeKit hat es einfach durchgezogen

Genau das ist u.a. ein Grund, warum ich das Tool ausprobiert habe. Bryan Jones wird dies nicht aus einer Freigeistlaune heraus entschieden haben, sondern es wird pragmatische Gründe haben, die mit Zukunftssicherheit, optimale Ausnutzung der BS-Ressourcen und schnellere Entwicklungszyklen (kein Nachführungen von Legacy Code) zu tu haben dürften. Finde ich persönlich genau den richtigen Weg.

Wenn CodeKit jetzt noch mit Compass gemeinsam im Sandkasten spielen würde, wäre ich restlos begeistert (ist schon angekündigt).

Permanenter Link

Die Kommentare sind geschlossen.