© Liashko/Shutterstock.com
Entwickler Magazin
Build-Prozess für HTML5- und JavaScript-Anwendungen

Quellcode servierfertig vorbereiten und bereitstellen

Mit steigenden Anforderungen an Webanwendungen schwenken Softwareentwickler immer mehr von servergenerierten HTML-Seiten mit reinem CSS und JavaScript auf Sprachen, Technologien und Frameworks um, die die Komplexität der Anwendung reduzieren oder die Qualität und Wartbarkeit erhöhen. Insbesondere der Umstieg auf Sprachen wie TypeScript oder Less ist nicht unproblematisch, denn sie können vom Browser und den WebViews einer nativen App nicht ohne Weiteres konsumiert werden. Stattdessen bedarf es einer Übersetzung in reines CSS und JavaScript. An dieser Stelle kommt ein Build-Prozess ins Spiel.

Pawel Gerr


In Abhängigkeit von den verwendeten Technologien, Frameworks, Module Loadern, Präprozessoren, Transpilern, Template Engines und der Art des Deployments sind mal mehr, mal weniger komplexe Prozesse notwendig, um den Quellcode einer Anwendung so aufzubereiten, dass er vom Browser – oder im Falle einer App von einer WebView – konsumiert werden kann. Diese Prozesse, die aus einer Ansammlung von Aufgaben bestehen, werden entweder manuell angestoßen, falls es sich beispielsweise um einen Build für das Produktivsystem handelt, oder jedes Mal, wenn sich der Quellcode ändert. Insbesondere Letzteres ist für einen Entwickler deutlich interessanter, da es die alltägliche Arbeit nicht nur vereinfacht, sondern sie auch signifikant beschleunigt.

Die Qual der Wahl

Die Frage, die sich stellt, ist, welche der bestehenden Lösungen für den eigenen Anwendungsfall die richtige ist. Zu den zur Verfügung stehenden Tools gehören unter anderem jspm [1], webpack [2], Browserify [3], Mimosa [4], Broccoli [5], Brunch [6], Grunt [7] und gulp [8]. Dabei handelt es sich bei den ersten drei um Package Manager und Module Bundler und bei den anderen fünf um Builder und Task Runner (Kasten: „Toolarten“). Allerdings können mit Letzteren praktisch beliebige Prozesse aufgesetzt werden.

ToolartenDie Definitionen der unterschiedlichen Toolarten sind teilweise sehr schwammig und lassen sich nicht immer sauber voneinander abgrenzen.Ein Module Bundler hat die Aufgabe, den Quellcode der eigenen Anwendung und deren Abhängigkeiten in wenige statische Dateien zu verpacken, die der Browser versteht. Die primäre Aufgabe eines Package Managers ist die Installation, Konfiguration und Deinstallation von Komponenten. Zu den Package Managern zählen npm, Bower und jspm, wobei die ersten beiden reine Package Manager sind, während letzterer einen ES6-Transpiler, einen Module Loader und einen Builder mitbringt.Ein Task Runner an sich ist nur dazu da, um bestimmte Aufgaben auszuführen. Sie können sehr einfach sein, wie das Kopieren einer Datei, oder auch beliebig komplex. Es kommt vielmehr auf die einzelnen Tasks und die Plug-ins an, die diese Tasks ausführen, um beurteilen zu können, wie mächtig das jeweilige Tool ist.Ein Builder ist einem Module Bundler sehr ähnlich, denn beide können den Quellcode transpilieren, komprimieren, Source Maps generieren etc. Die Hauptaufgabe eines Builders ist es jedoch nicht, so wenige Dateien wie möglich zu generieren, die möglichst einfach auf einem System ausgerollt werden könne...

Entwickler Magazin
Build-Prozess für HTML5- und JavaScript-Anwendungen

Quellcode servierfertig vorbereiten und bereitstellen

Mit steigenden Anforderungen an Webanwendungen schwenken Softwareentwickler immer mehr von servergenerierten HTML-Seiten mit reinem CSS und JavaScript auf Sprachen, Technologien und Frameworks um, die die Komplexität der Anwendung reduzieren oder die Qualität und Wartbarkeit erhöhen. Insbesondere der Umstieg auf Sprachen wie TypeScript oder Less ist nicht unproblematisch, denn sie können vom Browser und den WebViews einer nativen App nicht ohne Weiteres konsumiert werden. Stattdessen bedarf es einer Übersetzung in reines CSS und JavaScript. An dieser Stelle kommt ein Build-Prozess ins Spiel.

Pawel Gerr


In Abhängigkeit von den verwendeten Technologien, Frameworks, Module Loadern, Präprozessoren, Transpilern, Template Engines und der Art des Deployments sind mal mehr, mal weniger komplexe Prozesse notwendig, um den Quellcode einer Anwendung so aufzubereiten, dass er vom Browser – oder im Falle einer App von einer WebView – konsumiert werden kann. Diese Prozesse, die aus einer Ansammlung von Aufgaben bestehen, werden entweder manuell angestoßen, falls es sich beispielsweise um einen Build für das Produktivsystem handelt, oder jedes Mal, wenn sich der Quellcode ändert. Insbesondere Letzteres ist für einen Entwickler deutlich interessanter, da es die alltägliche Arbeit nicht nur vereinfacht, sondern sie auch signifikant beschleunigt.

Die Qual der Wahl

Die Frage, die sich stellt, ist, welche der bestehenden Lösungen für den eigenen Anwendungsfall die richtige ist. Zu den zur Verfügung stehenden Tools gehören unter anderem jspm [1], webpack [2], Browserify [3], Mimosa [4], Broccoli [5], Brunch [6], Grunt [7] und gulp [8]. Dabei handelt es sich bei den ersten drei um Package Manager und Module Bundler und bei den anderen fünf um Builder und Task Runner (Kasten: „Toolarten“). Allerdings können mit Letzteren praktisch beliebige Prozesse aufgesetzt werden.

ToolartenDie Definitionen der unterschiedlichen Toolarten sind teilweise sehr schwammig und lassen sich nicht immer sauber voneinander abgrenzen.Ein Module Bundler hat die Aufgabe, den Quellcode der eigenen Anwendung und deren Abhängigkeiten in wenige statische Dateien zu verpacken, die der Browser versteht. Die primäre Aufgabe eines Package Managers ist die Installation, Konfiguration und Deinstallation von Komponenten. Zu den Package Managern zählen npm, Bower und jspm, wobei die ersten beiden reine Package Manager sind, während letzterer einen ES6-Transpiler, einen Module Loader und einen Builder mitbringt.Ein Task Runner an sich ist nur dazu da, um bestimmte Aufgaben auszuführen. Sie können sehr einfach sein, wie das Kopieren einer Datei, oder auch beliebig komplex. Es kommt vielmehr auf die einzelnen Tasks und die Plug-ins an, die diese Tasks ausführen, um beurteilen zu können, wie mächtig das jeweilige Tool ist.Ein Builder ist einem Module Bundler sehr ähnlich, denn beide können den Quellcode transpilieren, komprimieren, Source Maps generieren etc. Die Hauptaufgabe eines Builders ist es jedoch nicht, so wenige Dateien wie möglich zu generieren, die möglichst einfach auf einem System ausgerollt werden könne...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang