Zur Übersicht

Yeoman. Ein moderner Workflow für moderne WebApps.

Markus Fink
Markus Fink Aktualisiert am 17. Aug. 2020
YEOMAN. EIN MODERNER WORKFLOW FÜR MODERNE WEBAPPS.

Drei Tools gebündelt in einem Workflow - damit ist Yeoman mehr als nur ein weiteres Programmier-Werkzeug.

Heutzutage werden im Web-Development zahlreiche unterschiedliche Libraries, Frameworks und Tools verwendet. Das Suchen nach den aktuellsten Versionen sowie das Laden und Einbinden kostet sehr viel Zeit. Und genau hier greift Yeoman ein - und kann das Leben von uns Web-Entwicklern enorm vereinfachen.

Darf ich vorstellen? Yeoman.

Wie bereits angekündigt ist Yeoman ein moderner Workflow für moderne WebApps - und besteht aus exakt drei Tools.

  1. YO. Das Grundgerüst der Anwendung, bzw. des Projekts, wird mit Yo erstellt - auch "scaffolding" genannt.
  2. GRUNT. Mit Grunt können bestimmte Aufgaben automatisiert werden, wie z.B. Less Files kompilieren, Codes komprimieren oder JavaScript testen. Einen ausgezeichneten Blog zum Thema Grunt.js findet man hier.
  3. BOWER. Ein sogenanntes "Package Management Tool", das uns erlaubt Bibliotheken wie jQuery oder Twitter Bootstrap bequem zu installieren - sowie zu aktualisieren, Abhängigkeiten aufzulösen und somit alle nötigen Pakete zu installieren.

Yeoman hat keine grafische Oberfläche, sondern arbeitet komplett in der Shell im Terminal.

Yo, man! Packen wir es an.

Um richtig loszulegen, bedarf es einer Node.js Installation. Dafür können wir einfach Node Packaged Modules (npm) installieren. Also, Terminal öffnen und los geht's:

npm install -g yo

Grunt und Bower werden automatisch mitinstalliert. Yo arbeitet mit so genannten "Generators", mit denen man die verschiedensten Applikationen generieren kann.

npm search yeoman-generator

Es wird eine Liste von "Yeoman-Generators" angezeigt, unter anderem "Generator-WebApp". Mit "npm install -g generator-webapp" kann dieses Plug-in installiert werden. Über den Befehl "Yo WebApp" wird der "Generator-WebApp" ausgeführt und das Skelett einer Webapplikation erstellt. Im Terminal erscheint dann folgender Code:

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.

[?] Would you like to include Twitter Bootstrap for Sass? Yes

[?] Would you like to include RequireJS (for AMD support)? (Y/n) n

WebApp-Generators - kontinuierlich vereinfacht.

Dank des WebApp-Generators wird uns eine Menge Arbeit abgenommen. Er erstellt das "Gerüst" unserer App und lädt die benötigten Java Script Bibliotheken - und wir müssen uns keine Gedanken mehr über Versionen oder Abhängigkeiten machen.

Wenn alles geklappt hat, können wir mit dem Befehl "grunt server" unsere WebApp im Browser ansehen.

Solche Yeoman-Generatoren können natürlich auch selbst erstellt werden - sehr praktisch, um sich das Webentwickler-Leben zu vereinfachen. Vorausgesetzt natürlich, man kann sich mit dem Workflow anfreunden. Einmal erstellt können die Generatoren immer wieder verwendet werden. 

Mein Fazit.

In serverseitigen Frameworks schätzen Web-Entwickler Paketmanager, um die Arbeit zu vereinfachen. Meiner Meinung nach hat Yeoman das Zeug dazu, ein solches Werkzeug für Frontend-Entwickler zu werden.

------------------------------------------

Bild- & Textquelle: http://yeoman.io

Markus Fink
Markus Fink
Web Developer