Workbench - entwickler.de

Ein Frontend-Boilerplate für eine schnellere Entwicklung

Workbench

Boilerplates sind für viele Entwickler schon längst nicht mehr aus der Entwicklung wegzudenken. Kein Wunder – immerhin sind sie nützliche Tools, die Entwicklern den Einstieg in neue Projekte vereinfachen und diesen deutlich beschleunigen sollen. Ein Boilerplate der etwas anderen Art ist Workbench – ein Tool, das auf den ersten Blick eher wie ein Frontend-Framework anmutet.

Denn Workbench kommt nicht nur mit den typischen Task-Helpern daher, die man von Boilerplates gewohnt ist, sondern auch mit JavaScript-Plugins. Zudem setzt das Tool auf Gulp, während die meisten anderen Boilerplates eher Grunt den Vorzug geben. Doch das ist längst nicht alles, was Workbench zu einem überaus interessanten Hybrid auf dem Boilerplates-Markt macht.

Features von Workbench

Workbench soll Entwickler vor allem beim Start eines neuen Projekts unterstützen. Dabei ist es allerdings kein Frontend-Framework, auch wenn es aufgrund seiner Features auf den ersten Blick so wirken mag. Stattdessen ist Workbench ein Frontend-Boilerplate, das zu einer schnelleren Entwicklung beitragen soll. Dafür stellt das Tool eine ganze Reihe nützlicher Funktionalitäten bereit, die Paddi MacDonnell vorgestellt hat.

So nutzt Workbench zum Beispiel sanitize.css als CSS-Reset-Datei und bietet so eine leichte individuelle Anpassung des CSS. Daneben bietet das Tool auch eine Responsive Typography, die sich rems, Farben und Margin-Mixins sowie einige Basic-Styles für Buttons, Formular-Elemente und Tags zu Nutze macht. Zudem steht ein modulares System zur Verfügung, mit dem in Absätzen Titel und Text besonders leicht mit Bildern, Zitaten und Karussells vermischt werden können.

JavaScript-Plugins in Workbench

Dazu kommen das Element-Queries-Polyfill, mit dem Media Queries auf Container-Elementen angewandt werden können, das Flickety-JavaScript-Bild-Karussell-Plugin, Packery-JavaScript-Bild-Grid-Plugin, eine Page-Loading-Animation und die JavaScript-Library Tether.js. Mit ihr lassen sich zum Beispiel verschiedene Elemente aneinanderbinden, was etwa in UI-Elementen wie Dropdown-Menüs und Tooltipps nützlich ist.

Auch, dass Workbench Gulp als Task Runner nutzt, bietet einige Vorteile. So dient die Gulp-Datei zur Ausführung einiger Standard-Tasks wie dem Kompilieren und Minifying von CSS, Autoprefixing und dem Verketten und Minifying von JavaScript-Dateien. Außerdem lassen sich kleinere Bilder zu Base64 umwandeln und größere Images besser optimieren; zudem bietet die Nutzung von Gulp auch Live Reloading.

Mehr Informationen zu Workbench finden sich auf GitHub; eine Demo-Seite zeigt das Tool in Aktion.