Von 0 auf 100 mit Yeoman
Yeoman – „to boldly go where no man has gone before“
Schenkt man einer Umfrage von Ashley Nolan Glauben, ist die Verwendung von Yeoman noch nicht bei der breiten Masse der Webentwickler angekommen. Viele haben zwar schon einmal davon gehört, aber fast 50 Prozent haben es selbst noch nie verwendet. Das sollte sich ändern! Im folgenden Artikel werde ich also darauf eingehen, worum es sich bei diesem ominösen Yeoman handelt, welche Vorteile sich durch die Verwendung ergeben und wie man schließlich eine AngularJS-Applikation aus dem Hut zaubern kann.
Webapps to go!
Bei Yeoman handelt es sich um eine Kommandozeilen-Anwendung auf Basis von Node.js und NPM, welche Generatoren für spezielle Technologie-Stacks bereitstellt und automatisch die wichtigsten Dinge konfiguriert (Scaffolding). Sei es das Dependency-Management, Unit-Tests oder der lokale Development-Server. Nachdem Yeoman seinen Job getan hat kann in der Regel direkt mit der Entwicklung begonnen werden. Dies führt zu enormen Zeitersparnissen in der initialen Konfiguration des Projektes und Hilft bei der Einhaltung von „Best Practices“.
Yeoman the guard – let’s start!
Um nun die Hilfe der Leibwache des Königs in Anspruch nehmen zu können, wird eine Installation von NPM vorausgesetzt. NPM ist im Paket von Node.js enthalten und kann einfach über die Offizielle Webseite heruntergeladen werden. Anschließend kann sicherheitsweise ein Update der NPM-Version durchgeführt werden. Die Version, die mit npm –v abgerufen werden kann, sollte hierbei über 2.1.8 liegen.
npm install npm –g
npm –v
Hiermit sind nun bereits alle Vorkehrungen getroffen und Yeoman kann installiert werden. Außerdem sollten in diesem Zuge auch noch die Pakete für gulp (Build System), bower (Package Manager) und nodemon (Live-Reload) installiert werden, diese Tools finden in vielen Projekten Anwendung und werden deshalb häufig vorausgesetzt.
npm install -g yo
npm install –g bower gulp nodemon
Das war schon alles! Jetzt kann gezaubert werden. Wie anfangs angekündigt, widmen wir uns nun der Generierung einer AngularJS-Applikation. In der Generatorliste auf der Yeoman-Webseite finden sich verschiedene Generatoren mit dem Schlagwort Angular, empfohlen und verwendet wird in diesem Beispiel der Hottowel-Generator. Dieser Generator orientiert sich an dem AngularJS-Styleguide von John Papa und wurde vom selbigen auch entwickelt.
npm install -g generator-hottowel
Fertig installiert sollte ein neuer Ordner erstellt werden in dem dann der Generator ausgeführt werden kann.
yo hottowel [App-Name]
Fertig durchgelaufen sollte die Projektstruktur im Ordner folgender Struktur folgen:
Gestartet wird die fertige Anwendung dann über den Task-Builder Gulp.
gulp serve-dev
Die fertige Anwendung sollte, sofern alles nach Plan verlaufen ist, folgend aussehen:
Fazit
Yeoman ist eines der sinnvollsten Tools in der Welt der 1001 Webdevelopment-Tools, es macht das Projektsetup super simpel und birgt ein enormes Potenzial zur Zeiteinsparung. Des Weiteren hat Yeoman bereits eine große OpenSource-Community, die fleißig neue Generatoren für verschiedenste Technologie-Stacks bereitstellt. Auch die Tatsache, dass Google als Initiator hinter diesem Projekt steckt, verbessert die Chancen für Yeoman sich in den Entwickleralltag weiter zu etablieren.
Kommentare
Keine Kommentare