Anzeige
Anzeige
UX & Design
Artikel merken

Yeoman: So vereinfachst du deinen Frontend-Workflow

Effizienz und Qualität steigern und trotzdem entspannter arbeiten? Das kann doch nicht funktionieren! Yeoman beweist, dass es doch möglich ist und nimmt zumindest Webworkern lästige Aufgaben ab. Die Werkzeugkiste ist leicht eingerichtet, gut dokumentiert und hat das Potenzial, Workflows der Frontend-Entwicklung radikal zu vereinfachen.

5 Min. Lesezeit
Anzeige
Anzeige
Yeoman. (Foto: nullplus/iStock)

Entwickler erledigen ständig Aufgaben, die sich von Tag zu Tag gleichen und von Projekt zu Projekt wiederholen. Den meisten Webentwicklern widerstrebt genau diese Arbeit ungemein. Das spiegelt die Masse an Frameworks und Boilerplates in fast allen Skript- und Darstellungssprachen wieder. Selbst wenn man als Webentwickler keines dieser Frameworks nutzt, verfügt man zumindest über einen Fundus mit Code-Schnipseln und Best-Practices – oder bedient sich aus einem vorherigen Projekt.

Anzeige
Anzeige

Wäre es nicht schön, wenn ein neues Web-Projekt in wenigen Minuten
eingerichtet wäre, viele Aufgaben im Hintergrund automatisch erledigt
werden und außerdem Updates von Ressourcen im Handumdrehen eingespielt
sind?

Der Start jedes Web-Projekts beinhaltet meist Copy&Paste in erheblichem Ausmaß sowie die Suche nach Ressourcen, die der Entwickler in der aktuellen Version herunterladen und in die eigene Projektstruktur integrieren muss. Je nach Anforderung und Umfang kommt im Rahmen dieser Vorbereitungen einiges an Material zusammen, das mühsam auf Github, Google Code, sourceforge und anderen Plattformen gesucht werden muss. Selbst wenn der Entwickler sein eigenes Boilerplate nutzt, fehlen ihm noch immer die aktuellen Versionen der verwendeten Frameworks und Plugins. An genau dieser Stelle setzt Yeoman an und hebt den Grundgedanken der Wiederverwendbarkeit von Code auf eine neue Ebene.

Anzeige
Anzeige

Yeoman im Überblick

Yeoman besteht aus drei Werkzeugen, die folgende Teilbereiche abdecken:

Anzeige
Anzeige
  1. YO – Scaffolding: Einrichtung des Projekts und je nach eingesetztem Generator verschiedene zusätzliche Funktionen
  2. GRUNT – Build Process: Automatisierte Aufgaben und Watch-Tasks
  3. BOWER – Package Manager: Web-Pakete herunter laden, Abhängigkeiten beachten und Updates der Pakete vornehmen

Von der Einrichtung eines neuen Web-Projekts, dem Laden notwendiger Ressourcen (Frameworks, Plugins) unter Berücksichtigung von Abhängigkeiten, bis hin zu automatisierten Aufgaben während des Projekts und des Build-Prozesses unterstützt Yeoman den Entwickler von Anfang bis Ende eines Projekts.

Yeoman basiert auf den Tools Grunt und Bower und hilft Frontend-Entwicklern bei wiederkehrenden Aufgaben

Yeoman basiert auf den Tools Grunt und Bower und hilft Frontend-Entwicklern bei wiederkehrenden Aufgaben

Yo

Mit Yo wird ein Projekt gestartet, die Projektstruktur erstellt und die notwendigen Ressourcen heruntergeladen. Yo arbeitet dafür eng mit Bower zusammen und erstellt ebenso das Gruntfile (mit den Konfigurationen für Grunt) sowie eine .gitignore für den Fall, dass das neue Projekt auch ein eigenes GIT-Repository werden soll.

Anzeige
Anzeige

Grunt

Grunt ermöglicht hingegen das Erstellen von Tasks, die verschiedene Funktionen übernehmen können. Die Möglichkeiten sind nahezu grenzenlos. So lassen sich beispielsweise Less, Sass, CoffeeScript und andere Präprozessoren kompilieren, CSS und JavaScript zusammenfassen und minifizieren (Build-Prozess), Bilder optimieren und sogar UI-Testing (zum Beispiel mit DalekJS) ist möglich. Auch Unit-Tests gehören zum Funktionsumfang.

Der große Vorteil von Grunt gegenüber anderen Build-Tools: Grunt ist in JavaScript geschrieben, so dass auch eigene Grunt-Plugins in JavaScript erstellt werden können. Damit hat man als Webentwickler ein mächtiges Werkzeug, dessen Sprache man bereits versteht. Grunt lässt sich auch unabhängig von Yeoman verwenden.

Bower

Bower ist ein Paketmanager für das Web und komplettiert Yeoman. Der Paketmanager sorgt dafür, dass man auf angenehme Weise Frameworks, Plugins und andere Ressourcen in das eigene Projekt integrieren kann. Auch Updates sind möglich – dabei werden Abhängigkeiten verschiedener Komponenten zueinander beachtet. Ein jQuery-Plugin, das als Bower-Package existiert, sorgt automatisch dafür, dass auch jQuery in der benötigten Version heruntergeladen wird.

Anzeige
Anzeige

Installation

Yeoman basiert auf Node.js und kann daher inklusive Grunt und Bower als Node-Package-Module (npm) installiert werden. Node.js lässt sich als grafischer Installer auf nodejs.org für Windows, Mac OS X und Linux herunter laden. Direkt nach der Installation steht einem im Terminal der Installer für Node-Module zur Verfügung.

Yeoman lässt sich dann mit einem Terminal-Befehl global installieren:

npm install -g yo

Hat man npm bereits in einer älteren Version < 1.2.10. (mit „npm –version“ überprüfen) installiert, so müssen Grunt und Bower zusätzlich manuell global installiert werden:

Anzeige
Anzeige
npm install -g grunt-cli bower

Zusätzlich ist ein Generator nötig, der ebenfalls global installiert wird:

npm install -g generator-webapp

Weitere Generatoren für die unterschiedlichsten Anforderungen finden sich direkt auf der Website von Yeoman. Für den Anfang sollte allerdings der Webapp-Generator ausreichen.

Wie legt man los?

Ebenfalls über das Terminal lässt sich im nächsten Schritt das erste Yeoman-Übungsprojekt starten. Dazu ist zunächst ein Projekt-Ordner nötig, in den man direkt wechselt, sobald dieser angelegt ist:

Anzeige
Anzeige
mkdir meine-webapp
cd meine-webapp

Jetzt kommt der schöne Teil, die Einrichtung des Projekts in nur wenigen Augenblicken:

yo webapp

Es folgt eine Frage nach zusätzlichen Komponenten. Hier kann man sich entscheiden, ob das Projekt Komponenten wie Bootstrap, RequireJS oder Modernizr benötigt. Dabei werden nicht nur diese Komponenten durch Bower heruntergeladen, sondern auch alle notwendigen Node-Module sowie eine passende Konfigurationsdatei für Grunt erstellt (Gruntfile.js). Nach weniger als einer Minute steht die Basis eines neuen Projekts und man kann mit der Entwicklung starten. Der Default-Task für den Build-Prozess mit „grunt“ ist ebenso verfügbar wie ein auf node.js basierender Webserver.

Spannender wird es, wenn man andere Yo-Generatoren verwendet, die auch zusätzliche Funktionen bieten. So können beispielsweise die Generatoren für AngularJS und Backbone.js direkt neue Controller oder Views anlegen. Das geht oft schneller als eine Datei manuell zu erstellen und die nötigen Definitionen selbst zu schreiben. Auch das Anlegen eigener Generatoren ist möglich. So können Entwickler beispielsweise ein Starterpaket aus dem HTML5-Boilerplate, einem gewünschten Präprozessor (Sass, Sass & Compass oder Less), RequireJS, jQuery, Plugins und Tests als Generator anlegen.

Anzeige
Anzeige

Möchte man später weitere Bower-Pakete in das eigene Projekt integrieren, können sie in der bower.json-Datei (oberste Ebene des Projekts) hinzugefügt werden. Danach werden die Pakete bei einem Ausführen von bower install automatisch heruntergeladen. Über das Terminal lassen sich Bower-Pakete suchen und manuell installieren – ohne bower.json anpassen zu müssen:

bower search yaml
bower install yamlcss

Yeoman oder Grunt?

Yeoman kann Webentwicklern als Allzweckwaffe dienen und bietet gerade bei größeren Projekten oder Web-Apps ein enormes Potenzial. Besonders angenehm ist, dass Yeoman nicht in Konkurrenz zu Tools wie Grunt oder Bower steht, die sich mehr und mehr etabliert haben, sondern diese in sich vereint. Ein Projekt, das also mit Yeoman gestartet wurde, kann theoretisch sogar ohne Yeoman und ausschließlich mit Grunt und Bower weiterentwickelt werden. Diese Freiheit kombiniert mit der Möglichkeit, auch eigene Yo-Generators und damit eigene Projekt-Vorlagen zu erstellen, macht Yeoman zu einem unschätzbaren Begleiter im Alltag.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige