Neue Tools und Funktionen zur Entwicklung von JavaScript-Apps

Visual Studio 2015 für JavaScript-Entwickler
Kommentare

Die Bedeutung von JavaScript hat bei der Entwicklung von Anwendungen sowohl auf der Client- aber auch auf der Serverseite immer stärker zugenommen. Das neue Visual Studio 2015 kommt diesem Trend mit vielen neuen Funktionen und Features entgegen, die im Folgenden aus der Sicht eines JavaScript-Entwicklers kurz vorgestellt werden.

Für die Entwicklung von serverseitigen Anwendungen stellt Visual Studio 2015 mit dem Plug-in Node.js Tools für Visual Studio entsprechende Node.js-Projektvorlagen bereit. Auf der Clientseite werden zurzeit keine speziellen Vorlagen für die ausschließliche Entwicklung einer JavaScript-Clientanwendung (Single Page Application) bereitgestellt. Was auch nicht unbedingt nötig ist, da die neue ASP.NET-5-Vorlage sehr gut geeignet ist.

Als Erstes fällt auf, dass sich die Webprojektvorlage in der neuen Version von Visual Studio relativ stark verändert hat. Diese Änderungen kommen dem Entwickeln einer Single Page Application sehr entgegen. Die größte Änderung hat in dem Aufbau der Projektstruktur stattgefunden. Bisher war das Root-Verzeichnis eines ASP.NET-Projekts auch gleichzeitig das Web-Root-Verzeichnis. In der neuen Vorlage ist das Web-Root-Verzeichnis von dem Projekt-Root-Verzeichnis losgelöst. Dadurch wird ein separater Build-Prozess sowohl für die Clientseite aber auch für die Serverseite mit Werkzeugen wie gulp und Grunt viel besser unterstützt.

Neue Features des JavaScript-Editors

Die Referenzen auf die verwendeten JavaScript-Bibliotheken werden nach wie vor entweder direkt in der JavaScript-Datei oder alternativ in der Datei ~/Scripts/_references.js angegeben (Abb. 1). Neu ist die Funktion, diese Datei anzulegen, sollte das Projekt noch keine _references,js-Datei haben. Visual Studio bietet die Möglichkeit, diese Datei direkt mittels Rechtsklick auf das Projekt anzulegen, erkennt diese Datei aber auch, wenn sie mit einem externen Editor hinzugefügt wird.

Abb. 1: Anlegen der Datei „_references.js“ mit Visual Studio 2015

Abb. 1: Anlegen der Datei „_references.js“ mit Visual Studio 2015

Eine zwar nicht neue, aber inzwischen integrierte Funktion, ist die automatische Aktualisierung dieser Referenzdatei, die mit Visual Studio 2015 standartmäßig aktiviert ist. Dabei werden alle neu hinzugefügten bzw. bereits vorhandenen Dateien und Bibliotheken in dem Web-Root-Verzeichnis wwwroot automatisch eingetragen. Das erspart das separate Angeben der jeweiligen Referenzen in den einzelnen JavaScript-Quellcodedateien. Um dieses Feature ein- oder auszuschalten, muss folgender Eintrag in der ersten Zeile der Datei stehen oder entfernt werden:

/// <autosync enabled="true" />

Ein weiteres Feature ist die direkte Unterstützung von npm und Bower. Wird die Datei package.json (für npm) oder bower.json (für Bower) gefunden, so aktiviert Visual Studio 2015 automatisch die Unterstützung dieser Tools. Dabei gibt es verschiedene Möglichkeiten, diese Datei zu erzeugen, entweder mittels Rechtsklick Add | new Item oder alternativ einfach eine Datei mit dem entsprechenden Namen hinzufügen. Visual Studio 2015 erkennt die Datei in beiden Fällen.

Um ein neues Paket hinzuzufügen, kann die entsprechende Datei direkt in Visual Studio bearbeitet werden, und mit dem Speichern der Datei werden die Pakete entweder von Bower oder npm in der gewünschten Version hinzugefügt oder entfernt.

In diesem Beispiel soll jquery, angular und angular-route hinzugefügt werden. Dazu wird zunächst die Datei bower.json geöffnet und die entsprechenden Pakete in den jeweiligen Versionen hinzugefügt (Abb. 2). Während der Eingabe unterstützt Visual Studio 2015 sowohl bei der Auswahl des Paketnamens, als auch bei der Version mit einem neuen IntelliSense-Feature des entsprechenden Editors.

Abb. 2: IntelliSense-Unterstützung von Visual Studio 2015 beim Hinzufügen neuer Clientbibliotheken

Abb. 2: IntelliSense-Unterstützung von Visual Studio 2015 beim Hinzufügen neuer Clientbibliotheken

Nach dem Speichern der Datei bower.json werden die hinzugefügten Abhängigkeiten im Hintergrund geladen und stehen ab sofort im konfigurierten Ordner (Standard: bower_components) bereit. Ganz ähnlich verhält es sich mit npm-Paketen, dazu später mehr.

Ein weiteres sehr hilfreiches Feature ist der erweiterte Support des JavaScript-Editors im Visual Studio 2015 für häufig verwendete Bibliotheken. Zurzeit werden AngularJS 1.x und RequireJS unabhängig vom Projekttyp unterstützt. Sobald die Datei angular.js/angular.min.js oder/und require.js/require.min.js in dem Projekt in einer Quellcodedatei oder der Datei _references.js referenziert werden, wird der erweiterte Support für AngularJS/RequireJS aktiviert. Für das folgende Beispiel wurden jQuery, angular und angular-route manuell zu den Referenzen hinzugefügt:

/// <autosync enabled="true" />
/// <reference path="../bower_components/jquery/dist/jquery.js" />
/// <reference path="../bower_components/angular/angular.js" />
/// <reference path="../bower_components/angular-route/angular-route.js" />

Anschließend unterstützt IntelliSense im JavaScript-Editor nicht nur bei den Standardfunktionen, wie module() oder controller(), sondern auch über die Dependency Injection von AngularJS hinweg, bis hin zur Konfiguration des Route-Providers. Diese Unterstützung funktioniert auch mit eigenen Diensten und Providern für Clientprojekte oder für das Anfordern einer Bibliothek mittels require in einem serverseitigen Projekt (Abb. 3).

Abb. 3: Erweiterte IntelliSense-Unterstützung des JavaScript-Editors in Visual Studio 2015

Abb. 3: Erweiterte IntelliSense-Unterstützung des JavaScript-Editors in Visual Studio 2015

In diesem Zusammenhang kommt eine weitere Neuerung des JavaScript-Editors zur Verbesserung von IntelliSense ins Spiel: die direkte Integration von JSDoc-Kommentaren in die Tooltipps. Inzwischen verwenden viele größere Communityprojekte, wie AngularJS oder Ember.js, JSDoc zur Dokumentation von JavaScript-Code Programmcode, da JSDoc neben der Beschreibung der Funktion auch optional die Möglichkeit bietet, den Namen des Parameters, sowie dessen Typ anzugeben. Diese Information lässt sich hervorragend verwenden, um eine erweiterte Hilfe bei der Verwendung anzuzeigen (Abb. 4).

Abb. 4: Anzeigen von erweiterten Informationen via JSDoc

Abb. 4: Anzeigen von erweiterten Informationen via JSDoc

Unterstützung für Task Runner

Viele clientseitige Anwendungen benötigen inzwischen einen eigenen Build-Prozess. Diese Anforderung wird nicht nur von der neuen ASP.NET-5-Vorlage, sondern auch von Visual Studio 2015 durch die direkte Integration der gebräuchlichsten Task Runner gulp und Grunt sehr gut unterstützt. Für welche der beiden Möglichkeiten man sich entscheidet oder ob man sogar beide verwenden möchte, macht für die Integration keinen Unterscheid.

In diesem Beispiel wird gulp verwendet. Wie auch schon bei den Bower-Paketen lassen sich alle Abhängigkeiten der benötigten Node.js-Module direkt in der package.jsonDatei angeben. Auch hier steht eine entsprechende Unterstützung bereit, die nicht nur bei der Auswahl der richtigen Version hilft, sondern auch erklärt, was die einzelnen Einstellungen bedeuten.

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Nach dem Speichern der Datei werden die abhängigen Pakete automatisch geladen, sollte dies einmal nicht klappen, so können alle Abhängigkeiten auch direkt mit einem Rechtsklick auf den Knoten Dependencies aktualisiert werden.

Anschließend kann die gulp-Steuerdatei gulpfile.js erstellt werden. Hierfür gibt es auch eine entsprechende Vorlage unter Add | Item nach einem Rechtsklick auf den Projektordner. Alternativ kann eine leere Datei mit einem beliebigen Editor zum Projektverzeichnis hinzugefügt werden, Visual Studio erkennt alle hinzugefügten Dateien automatisch und interpretiert diese richtig, unabhängig davon, ob die Datei mit Visual Studio selbst erstellt oder extern hinzugefügt wurde.

Eine weitere neue Funktion ist der Task Runner Explorer. Dieser bietet eine Übersicht über alle Tasks an, die in gulp und/oder Grunt definiert wurden. Der Task Runner Explorer lässt sich über das Menü Views | Other Windows | Task Runner Explorer öffnen (Abb. 5).

Abb. 5: Task Runner Explorer Visual Studio 2015

Abb. 5: Task Runner Explorer Visual Studio 2015

Der Task Runner Explorer bietet die Möglichkeit, eine einzelne Task direkt zu starten oder diese zu einem bestimmten Zeitpunkt innerhalb der Visual-Studio-2015-Ereignisse aufzurufen. Dazu können mittels Rechtsklick jeweils die Ereignisse von Visual Studio 2015 ausgewählt werden, die mit der Task verknüpft werden sollen. Die Ausführung der Task erfolgt dann automatisch zum entsprechenden Zeitpunkt und kann im Ausgabefenster des Task Runner Explorers verfolgt werden.

Debugging einer Task mit Visual Studio

Die Tasks laufen in der Regel im Hintergrund und lassen sich nur bedingt debuggen. Hierfür bietet Visual Studio eine interessante Möglichkeit. Die Node.js Tools für Visual Studio 2015 enthalten unter anderem die Möglichkeit, den Debugger von Visual Studio an einen Node.js-Prozess zu verbinden.

Hierzu muss der zu debuggende Prozess mit dem Parameter –debug oder –debug-brk gestartet werden. Node.js öffnet jetzt den Port 5858 für eingehende Verbindungen von Debuggern. Alternativ kann der Port auch als Parameter mitgegeben werden. In diesem Beispiel würde der Aufruf von Node.js direkt im Projektverzeichnis erfolgen:

node --debug-brk=5858 node_modules\gulp\bin\gulp.js

Anschließend kann sich Visual Studio 2015 mit dem Debugger unter Debug | Attach to Process verbinden. Im folgenden Dialog ist für das Feld Tansport : Node.js remote Debugging auszuwählen. In das Feld Qualifier wird der Host und der Port eingetragen. In diesem Beispiel ist das localhost:5858. Mit einem Klick auf den Button Refresh wird die Liste mit den verfügbaren Prozessen aktualisiert. Wenn jetzt der Prozess in der Liste erscheint, kann es unter Umständen dazu kommen, dass der Node.js-Prozess neu gestartet werden muss. Anschließend lässt sich Visual Studio mit dem (neu gestarteten) Node.js-Prozess verbinden und der Debugger wie gewohnt verwenden.

Fazit

Zusammenfassend lässt sich sagen, dass die Entwicklung einer JavaScript-App mit der neuen Version von Visual Studio 2015 sehr gut unterstützt wird. Besonders die kostenfreie Community-Edition dürfte für viele JavaScript- Entwickler eine interessante alternative Möglichkeit sein.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -