Timo Korinth

2 Meter, 2 Mark

Toolchain in HTML5

| 0 comments

In der modernen Webentwicklung kommt es mehr denn je darauf an, gut verzahnte Tools zu haben, die sich automatisiert und zuverlässig um alle wiederkehrenden Aufgaben kümmern. In der schnelllebigen Welt der JavaScript-Entwicklung entstehen neue Frameworks fast im Minutentakt und doch kristallisieren sich einige Tools aus diesem fast unerschöpflichen Universum heraus, die nach und nach zu einem De facto Standard in der Webentwicklung werden. Diese Kombination von verschiedenen Tools und deren Integration in den Build Prozess möchte ich hier kurz vorstellen.

Build Prozess

Manch ein Leser wird sich jetzt vielleicht fragen, wofür ein Webentwickler überhaupt Build-Tools benötigt. HTML und JavaScript müssen schließlich nicht kompiliert oder umgewandelt werden und können direkt im Browser laufen. Generell ist das auch richtig. Allerdings gehe ich nicht von typischer Website-Entwicklung aus, wenn ich von Webentwicklung spreche, sondern viel mehr von moderner Single-Page-App-Entwicklung. Mehr noch: Ich spreche von komplexen Business Anwendungen, die im Browser laufen und sich möglichst wie Desktop Applikationen anfühlen sollen.

Diese Anwendungen können schnell sehr komplex werden. Aus diesem Grund muss eine saubere Code-Struktur geschaffen werden, die skalierbar ist und auch in großen Projekten eine übersichtliche und wartbare Entwicklung erlaubt.

Ausgehend von dieser Definition können folgende Anforderungen an einen Build Prozess abgeleitet werden:

  • Integration in ein sicheres Versionskontrollsystem
  • Automatisiertes Auflösen von Abhängigkeiten
  • Automatisiertes Zusammenfassen von Source Code
  • Automatisiertes Deployment

Tools

Um den oben beschrieben Prozess sauber abbilden zu können, sind mehrere Tools notwendig, die jeweils ihre dedizierten Funktionen haben und in dem gesamten Prozess zusammenarbeiten. Diese Tools und ihre Integration haben sich in vielen Projekten bewährt:

  • Git
  • Node.js / NPM
  • Bower
  • Grunt
  • Git

In den letzten Jahren hat das Versionskontrollsystem Git mehr und mehr Einzug in Entwicklungsprojekte gehalten. Das liegt wohl auch an der kompromisslosen Ausrichtung auf dezentral arbeitende Entwickler und der Fokus auf verteiltes Arbeiten. So ist beispielsweise das Konzept von mehreren, parallelen Branches („Entwicklungszweigen“) fester Bestandteil von Git und unterstützt das parallele Entwickeln an der gleichen Code Basis.

Wir sind vor einiger Zeit für HTML5-/JS-Projekte von Microsofts Versionskontrollsystem TFS (Team Foundation Server) erfolgreich auf Git umgestiegen. Für uns hatte das u.a. folgende primären Gründe:

  • Der TFS hat Probleme mit Pfadnamen länger als 255 Zeichen. In der Webentwicklung kann es aber vorkommen, dass diese Grenze schnell erreicht ist, gerade wenn noch zusätzliche Pakete nachgeladen werden (die wiederrum abhängige Pakete nachladen usw…).
  • Der TFS bietet keine (oder nur sehr eingeschränkte) Möglichkeiten offline zu arbeiten. Mit Git hat jeder Entwickler sein eigenes lokales Repository, egal ob er offline, unterwegs arbeitet oder im Firmennetz ist.
  • Der TFS ist sehr stark an Microsofts IDE Visual Studio gebunden und lebt von der Integration in den Editor. Wir wollten uns allerdings die Unabhängigkeit bei der Auswahl der IDE bewahren.
  • Andere Build Tools, wie beispielsweise der Build Server „Jenkins“, arbeiten problemlos mit Git zusammen und bieten dafür zahlreiche Plugins an. Die Integration mit dem TFS ist, wenn überhaupt, meist weitaus schwieriger zu erreichen.

Node.js und NPM

Node.js ist eine Plattform basierend auf der V8 JavaScript-Laufzeitumgebung und wurde entwickelt, um schnelle und ressourcensparende Netzwerkanwendungen wie Webserver zu entwickeln. Node.js bietet darüber hinaus diverse Module und eine API, um eigene Anwendungen (Module) zu entwickeln.

Diese Module können über den zentralen Paketmanager NPM (Node packaged modules) bereitgestellt und bezogen werden. Die meisten aktuellen Tools zur Webentwicklung basieren bereits auf Node.js und stehen daher als Module über NPM zur Verfügung.

Das bietet den entscheidenden Vorteil, dass Node.js als einziges Tool auf einem Entwicklerrechner vorinstalliert sein muss und alle anderen notwendigen Anwendungen nachträglich über NPM nachgeladen werden können. Zusätzlich können verschiedene Webprojekte gleichzeitig andere Tools (oder sogar verschiedene Versionen der gleichen Tools) verwenden, da pro Projekt eine Liste mit abhängigen Anwendungen erstellt und zu jedem Zeitpunkt im Projekt nachgeladen werden können. Diese Anwendungen werden dann nur lokal in dem jeweiligen Projekt installiert und verwendet.

Über NPM werden typischerweise die folgenden zwei Anwendungen installiert: Bower und Grunt.

Bower

Wenn NPM ein Paketmanager für Anwendungen oder Module basierend auf Node.js ist, dann ist Bower ein Paketmanager für Webprojekte. Webprojekte können beispielsweise UI Frameworks wie Twitter Bootstrap (CSS Framework) oder Sammlungen von Schriften sein, aber in den meisten Fällen handelt es sich um JavaScript-Frameworks oder -Libraries.

Über Bower können die abhängigen Webprojekte (in spezifischen Versionen) definiert und über den Bower Paketmanager nachgeladen werden. Diese werden dann wiederrum von den registrierten GitHub Seiten in der jeweils spezifizierten Version automatisiert heruntergeladen und im eigenen Projekt entpackt.

Typischerweise werden so alle abhängigen Libraries wie beispielsweise AngularJS, Twitter Bootstrap oder auch jQuery in das eigene Projekt integriert. Ähnlich wie bei der Verwendung von NPM bietet Bower damit den Vorteil, dass nur eine Konfigurationsdatei mit den abhängigen Libraries gepflegt werden muss. Das Initiale Herunterladen oder Aktualisieren der Pakete in den richtigen Versionen wird dann automatisch durch Bower durchgeführt.

Grunt

Grunt ist ein Command-line Tool zur automatisierten Ausführung von Tasks und basiert ebenfalls auf Node.js und NPM. Grunt ist das Herzstück des Build Prozesses und kümmert sich um alle automatisierten, wiederkehrenden Aufgaben.

Über NPM sind unzählige Grunt-Tasks für die verschiedensten Anforderungen verfügbar. Zu den typischen Build Tasks zählen u.a. folgende Aufgaben, die automatisiert bei jedem Build ausgeführt werden:

  • Zusammenführen aller JavaScript-Dateien zu einer großen JavaScript-Datei
  • Komprimieren der JavaScript-Dateien (Minifying)
  • JavaScript-Dateien unleserlich machen (Uglifying)
  • Code-Qualität prüfen
  • Unit Tests ausführen
  • Less-Dateien in CSS Stylesheets kompilieren
  • Kopieren der Ergebnisse in die entsprechenden Build-Verzeichnisse
  • U.v.m…

Während Node.js, NPM und Bower nach dem Initialen Aufsetzen des Projektes nur noch selten genutzt werden müssen, ist Grunt das alltägliche (Build-)Tool für jeden Webentwickler.

Originally posted on: http://channel.maximago.de/node/19

Leave a Reply