Webanwendungen auf Knopfdruck

Scaffolding von AngularJS- und ASP.NET-5-Apps mit Yeoman
Kommentare

Das JavaScript-Framework Yeoman erlaubt das Generieren von immer wieder benötigten Anwendungsteilen. Die Community bietet für eine Vielzahl an Szenarien und Plattformen diverse Yeoman-Generatoren, darunter auch für AngularJS und ASP.NET 5.

Wer heutzutage eine moderne Webanwendung erstellen möchte, kann nicht einfach so drauflos programmieren. Zunächst gilt es, die benötigten Bibliotheken zu laden. Dazu gehören nicht nur Bibliotheken für die Webanwendung, sondern auch die mit Werkzeugen für die Entwicklung. Beispiele dafür sind Frameworks für Unit Tests und Integrationstests sowie Transpiler, die ECMAScript 6 oder TypeScript in handelsübliches ECMAScript 5 übersetzen. Zudem muss auch ein Build-Tool zum Automatisieren wiederkehrender Aufgaben, wie das Bundling der Webanwendung, eingerichtet werden. Dazu kommt, dass sich der moderne Webprogrammierer auch um eine gute Projektstruktur sowie um das Backend kümmern muss.
Das Konzept des Scaffoldings, das Mitte der Nullerjahre durch das Webframework Ruby on Rails bekannt wurde, hilft hierbei. Es sieht vor, dass das Grundgerüst von Anwendungsteilen generiert wird. Ein populäres Scaffolding-Framework für JavaScript-basierte Projekte ist Yeoman. Es nutzt so genannte Generatoren zum Erzeugen von Gerüsten und erfreut sich einer breiten Unterstützung seitens der Community. So stehen mittlerweile für eine Vielzahl an Webframeworks und Werkzeugen Yeoman-Generatoren zur Verfügung. Wer nicht fündig wird, kann sich mit den Möglichkeiten von Yeoman auch einen eigenen Generator schreiben.
Dieser Artikel geht auf zwei Generatoren ein: Der Generator generator-gulp-angular generiert das Grundgerüst für ein AngularJS-Frontend, und generator-aspnet aus dem OmniSharp-Projekt erzeugt ein auf ASP.NET-5-basierendes Backend.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Ein Grundgerüst für AngularJS

Yeoman kann über den Node Package Manager npm (nodejs.org) bezogen werden. Im Zuge dessen sollte man auch sicherstellen, dass man das Build-Tool gulp sowie den Package-Manager bower installiert hat, zumal diese Werkzeuge auch von vielen Generatoren genutzt werden:

npm install -g yo gulp bower

Auch der Generator generator-gulp-angular ist mittels npm zu installieren:

npm install -g generator-gulp-angular

Danach kann das Scaffolding des AngularJS-Frontends losgehen. Hierzu nutzt der Entwickler im Projektordner die folgende Anweisung:

yo gulp-angular [app-name]

Der Platzhalter [app-name] steht dabei für den Namen der neuen Anwendung. Wie Abbildung 1 zeigt, stellt der Generator dem Entwickler einige Fragen. Diese zielen auf die einzusetzenden Bibliotheken und Werkzeuge ab. Im betrachteten Fall wurden bereits einige Fragen, die mit einem Fragezeichen eingeleitet werden, beantwortet. Die Antworten, die aus einer Liste gewählt wurden, werden neben den Fragen in Türkis anzeigt. Die aktuelle Frage dreht sich um den gewünschten Transpiler. Neben den Werkzeugen Babel und Treceur, die ECMAScript 6 nach ECMAScript 5 übersetzen, bietet der Generator auch CoffeeScript und TypeScript an. Darüber hinaus kann sich der Entwickler auch entscheiden, keinen Transpiler zu nutzen. Die nachfolgenden Ausführungen gehen davon aus, dass neben den hier dargestellten Einstellungen der Transpiler Babel zum Einsatz kommt.

Zum Erzeugen der Webanwendung bezieht der Generator einige Bibliotheken via npm und bower. Darüber hinaus richtet er einige GULP-Tasks ein, die sich dem Übersetzen von ECMAScript 6 oder dem Bundling der Anwendung annehmen (Abb. 1).

Abb. 1: Der Generator „generator-gulp-angular“ im Einsatz

Abb. 1: Der Generator „generator-gulp-angular“ im Einsatz

Projektstruktur

Die vom Generator eingerichtete Projektstruktur orientiert sich an den von Google veröffentlichten Best Practices. Wie Abbildung 2 zeigt, beinhaltet der Ordner src die Quellcodedateien. Darin befindet sich die index.html mit dem Markup für die Anwendung und ein Ordner assets, der Ressourcen wie Bilder beinhaltet. Die restlichen Dateien der Anwendung finden sich im Ordner app. Dieser Ordner erhält entsprechend den Best Practices von Google pro funktionaler Einheit, zum Beispiel pro Route, einen weiteren Ordner. Auch diese Ordner können weiter untergliedert werden. Als Beispiel für solch einen Ordner findet man hier den Ordner main. Er enthält das Template (main.html) sowie den Controller (main.controller.js) für die Startseite der Anwendung. Darüber hinaus findet man für diesen Controller einen Testfall (main.controller.spec.js). Das Platzieren des Testfalls im selben Ordner soll verhindern, dass Entwickler diese im Zuge der Weiterentwicklung aus dem Blickfeld verlieren.

Darüber hinaus findet man im Ordner app einen Ordner components mit wiederverwendbaren Komponenten, wie AngularJS-Services oder Direktiven. Auch einige JavaScript-Dateien, die AngularJS konfigurieren, sind in app zu finden. Die Datei index.module.js erzeugt beispielsweise das AngularJS-Modul für die Anwendung, und index.route.js richtet die von UI-Router verwendeten Routen ein.

Neben dem Ordner src existieren weitere Ordner in der erzeugten Projektstruktur. Die via npm und bower heruntergeladenen Bibliotheken finden sich in den Ordnern node_modules und bower_components. Für Integrationstests (End-2-End-Tests), die Benutzerinteraktionen simulieren, steht der Ordner e2e zur Verfügung. Dieser beinhaltet einen beispielhaften Testfall, der sich auf das Framework Protractor stützt. Der Ordner gulp beinhaltet Dateien mit GULP-Tasks, die sich unter anderem um das Übersetzen nach ECMAScript 5 sowie ums Bundling kümmern. Für die Installation auf einem Webserver hinterlegen diese Tasks die bearbeiteten und übersetzten Dateien im Ordner dist. Fürs Debuggen und Testen kommt hingegen der Ordner .tmp zum Einsatz.

Abb. 2: Von „generator-gulp-angular“ generierte Projektstruktur

Abb. 2: Von „generator-gulp-angular“ generierte Projektstruktur

Listing 1 zeigt den vom Generator für die Startseite eingerichteten Controller, der sich in der Datei main.controller.js wiederfindet. Es handelt sich dabei um eine EcmaScript-6-Klasse, deren Konstruktor Informationen über Eigenschaften bereitstellt. Der auf den ersten Blick unnütze String mit dem Inhalt ngInject veranlasst das vom Generator eingerichtete GULP-Plug-in gulp-ng-inject, Metadaten für den Dependency-Injection-Mechanismus von AngularJS zu hinterlegen.

Die betrachtete Klasse bietet auch eine Methode showToastr an. Diese blendet eine Information auf der Seite ein. Dazu nutzt sie die Bibliothek toastr. Die export-Anweisung am Ende des Listings sorgt dafür, dass der Controller auch in anderen Dateien sichtbar ist. Das ist notwendig, damit die Datei index.module.js den Controller im AngularJS-Modul der Anwendung registrieren kann.

Listing 1

class MainController {
  constructor ($timeout, webDevTec, toastr) {
    'ngInject';

    this.awesomeThings = [];
    this.classAnimation = '';
    this.creationDate = 1434805875383;
    this.toastr = toastr;
    […]
  }
  […]
  showToastr() { […] }
}
export default MainController;

Der Testfall für diesen Controller findet sich in Listing 2. Er basiert auf ECMAScript 5 und dem populären Unit-Testing-Framework Jasmine. Darüber hinaus stützt er sich auf das Modul angular-mocks. Die Funktion describe definiert eine Testsuite. Mit beforeEach und module wird das Modul yeomanGulp geladen. Dabei handelt es sich um das vom Generator für die Anwendung eingerichtete Modul. Die darauffolgende Funktion it definiert einen beispielhaften Testfall, der mittels inject den AngularJS-Service $controller injiziert bekommt. Damit bezieht der Testfall den zu testenden MainController.

Listing 2

(function() {
  'use strict';

  describe('controllers', function(){

    beforeEach(module('yeomanGulp'));

    it('should define more than 5 awesome things', 
      inject(function($controller) {
      var vm = $controller('MainController');

      expect(angular.isArray(vm.awesomeThings)).toBeTruthy();
      expect(vm.awesomeThings.length > 5).toBeTruthy();
    }));
  });
})();

Bereitgestellte Tasks

Um die Webanwendung zu testen, startet der Entwickler im Projektverzeichnis die GULP-Task serve mittels gulp serve. Diese führt die besprochene Kompilierung und das Bundling durch. Zusätzlich richtet sie in der index.html Verweise auf sämtliche verwendete Skriptdateien und CSS-Vorlagen ein. Somit muss sich der Entwickler nicht selbst um diese lästige und fehleranfällige Aufgabe kümmern. Zusätzlich startet serve einen Webserver und einen Webbrowser. Anschließend überwacht sie das Projektverzeichnis und führt die definierten Schritte bei jeder entdeckten Dateiänderung erneut aus. Im Anschluss daran benachrichtigt sie den zuvor geöffneten Browser, sodass er die Webanwendung neu lädt. Hierzu kommt das GULP-Plug-in browser-sync zum Einsatz. Informationen über weitere Tasks, die der Generator einrichtet, bietet Tabelle 1.

Tabelle 1: Eingerichtete GULP-Tasks

Tabelle 1: Eingerichtete GULP-Tasks

CSS-Dateien kopieren

Die vom Generator bereitgestellten GULP-Tasks richten nur Verweise auf CSS-Vorlagen ein, die sich innerhalb des Ordners app befinden. Aus diesem Grund kann es je nach Konfiguration notwendig sein, die CSS-Dateien von Frameworks wie Bootstrap aus ihren Ordnern in einen Ordner unterhalb von app zu kopieren.

Backend mit ASP.NET 5

Während Yeoman in erster Linie JavaScript-Projekte adressiert, macht es auch vor anderen Programmierumgebungen nicht halt. Beispielsweise stellt das OmniSharp-Projekt einen Generator für ASP.NET 5 zur Verfügung. Dieser ist in allen Fällen nützlich, in denen Visual Studio nicht zum Einsatz kommt. Ein Beispiel dafür ist die Nutzung von ASP.NET 5 unter Mac oder Linux. Wer hingegen ASP.NET-Anwendungen nur mit Visual Studio nutzt, muss sich mit den nachfolgenden Ausführungen nicht befassen. Zur Installation des Generators kommt erneut npm zum Einsatz:

npm install -g generator-aspnet

Um den Generator zu starten, führt der Entwickler im Projektverzeichnis die Anweisung

yo aspnet

aus. Anschließend wird er aufgefordert, einen Anwendungstyp festzulegen. Zur Auswahl stehen die Optionen Empty Application, Console Application, Web Application, Web API Application, Nancy ASP.NET Application und Class Library. Zusätzlich ist auch ein Anwendungsname zu erfassen. Danach generiert Yeoman das Grundgerüst für den gewünschten Anwendungstyp.

Zum Erzeugen von weiteren Artefakten, wie Controller oder Views, bietet der besprochene Generator so genannte Subgeneratoren an. Die nachfolgenden drei Anweisungen veranschaulichen die Nutzung dieser Subgeneratoren, die eine View, einen Controller für eine Webanwendung sowie einen Controller für ein Web-API erzeugen:

yo aspnet:MvcView MyView
yo aspnet:MvcController MyController
yo aspnet:WebApiController MyApiController

Zum Ausführen der Webanwendung benötigt der Entwickler das Dienstprogramm dnvm (.NET Version Manager). Damit lässt sich die letzte Version von ASP.NET 5 beziehen. Informationen zur Installation und Nutzung von dnvm findet man hier.

Vor dem Start der Anwendung ist sicherzustellen, dass sämtliche NuGet-Pakete heruntergeladen wurden. Dies bewerkstelligt der Entwickler mit dem Dienstprogramm dnu (.NET Utility):

dnu restore

Danach kann er die Anwendung mit dem .NET Execution Environment (dnx) ausführen. Für eine Webanwendung nutzt er beispielsweise die folgende Anweisung:

dnx . web

Der Punkt steht dabei für das aktuelle Verzeichnis, und web ist das auszuführende Kommando, das in der Datei project.json der ASP.NET-5-Anwendung hinterlegt ist und standardmäßig einen Webserver auf Port 5000 startet.

Fazit

Dank Yeoman können monotone und wiederkehrende Aufgaben mittels Scaffolding automatisiert werden. Auf diese Weise erhält man ohne IDE den Komfort von Projekt- und Dateivorlagen. Das Vorhandensein eines Grundgerüsts hilft Entwicklern, möglichst schnell produktiv zu werden: Sie können sich an den eingerichteten beispielhaften Dateien orientieren, ohne Details in der Dokumentation nachschlagen zu müssen.

Allerdings können zu umfangreiche Vorlagen auch auf den ersten Blick verwirrend erscheinen. Das mag auch auf die Vorlage des hier vorgestellten Angular-Generators zutreffen, zumal dieser eine Fülle an Bibliotheken und Werkzeugen einbindet. Deswegen scheint es sinnvoll zu sein, sich ein wenig mit der Vorlage zu beschäftigen und Details nachzuschlagen, um ein Verständnis für den Aufbau der generierten Elemente zu bekommen.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Aufmacherbild: silhouette of construction worker against sky on scaffolding via Shutterstock / Urheberrecht: hans.slegers

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -