· 5 min read

JavaScript Entwicklungsumgebung für Windows Entwickler

In dieser kleinen Serie: Ionic_Start möchte ich meine Erkenntnisse bei der Entwicklung einer mobilen, hybriden App mit dem Framework Ionic festhalten.

Dieser erste Teil dient zum einen zur Motivation, sich als .NET Entwickler in die JavaScript Welt zu wagen und sich eine Entwicklungsumgebung zurecht zu legen.

Fliegenpilz

Entwicklungsumgebung

Für einen .NET Entwickler gibt es sehr viel Neues zu entdecken. Es wirkt kompliziert und der Sinn ist nicht gleich ersichtlich. Lassen wir uns nicht entmutigen und beißen in den sauren Apfel.

Cordova

Will man mobile Apps via Cordova entwickeln oder eine Desktop App auf Basis Electron entwickeln benötigt man eine Entwicklungsumgebung, die Node.js http://blog.ionic.io/wp-content/themes/ionic/favicon.ico unterstützt. Node.js ist eine Platform auf der JavaScript Code ausgeführt werden kann und man verwendet sie vorwiegend um Web Server damit zu erstellen. Damit hat man nun nicht nur im Browser JavaScript zur Verfügung, sondern auch im Server kann die Web Applikation in JavaScript realisiert. Eine mobile App auf Basis Cordova wird in JavaScript, HTML und CSS erstellt und läuft schlussendlich in einem von der App gehosteten Browserfenster.

[Apache Cordova Logo](http://cordova.apache.org/)
[Node.js Logo](https://nodejs.org/en)
Wir brauchen Node.js, doch wozu?

Während der Entwicklungszeit der App, ist es praktisch, die Applikation in einem Server zu hosten und sie im Browser zu testen. Da schon JavaScript für die App verwendet wird, war es wohl logisch dafür Node.js zu verwenden. Eigentlich muss dieser Server nur statische Files servieren, aber diese Server (z.B. ionic serve) bieten ein paar Zusatzfeatures, wie den Brower benachrichtigen, wenn neue Files da sind oder ihm eine neue Start Adresse mitzuteilen, die das Leben einfacher machen. Und wenn diese Laufzeitumgebung Node.js schon mal da ist, wurde sie auch von den Tools Herstellern verwendet. So sind auch die Werkzeuge zur Paketverwaltung, zum Laufen von Tasks, … in JavaScript erstellt und verwenden bei der Ausführung Node.js.

Woher nehmen?

Die erste Anlaufstelle für einen Entwickler unter Windows ist sicher Microsoft.

Damit man die Anleitungen der JavaScript Frameworks versteht (und die vielen Tipps auf diversen Hilfeseiten, wie stackoverflow), ist es aber unumgänglich, sich auch das Wissen anzueignen, wie man ohne Visual Studio nur über die Commandline bzw. PowerShell arbeitet.

Vielleicht irre ich mich auch und es ist inzwischen gar nicht mehr nötig außerhalb Visual Studios zu arbeiten (Seit dem Update 1 für Visual Studio 2015 scheint die Cordova Entwicklung deutlich stabiler geworden zu sein).
Doch auch wenn man alles innerhalb Visual Studios macht, bemerkt man schnell, dass Microsoft, die (JavaScript) Tools wie gulp/grunt, bower, npm, usw. verwendet und so ist man auch hier ständig mit den Meldungen dieser Tools konfrontiert.

Muss man dann z.B. auf einem Mac auf das iPhone deployen, ist es ebenfalls toll, sich da nicht ganz verloren zu fühlen, wenn kein Visual Studio mehr vorhanden ist.

Dies ist auch ein Grund, warum man sich Visual Studio Code mal ansehen sollte, das ist zwar anderes als Visual Studio (und sollte eigentlich einen eigenen Namen bekommen), aber sehr praktisch und auch auf OS X und Linux verfügbar. Übrigens basiert Visual Studio Code auf Electron, das Chromium und Node.js verwendet.

Weil es immer wieder Leute gibt, die daraus gleich rauslesen, dass .NET tot ist, dem ist natürlich nicht so. Allein wenn man die OpenSource Projekte von Microsoft auf GitHub durchsieht, merkt man, wieviel sich im .NET Umfeld tut.

Aber auch die .NET Entwicklung bleibt nicht stehen und übernimmt ähnliche Vorgangsweisen, wie man sie jetzt von JavaScript/Node.js kennt: PackageManager, TaskRunner, … Es wird nicht einfacher, aber flexibler und plattformunabhängig und sichert dadurch die weitere Zukunft von .NET (Siehe auch ASP.NET Core 1.0: dnu build ; dnx web, …).

Auch wenn der Einstieg in die JavaScript Entwicklung über die Microsoft Welt sicher untypisch ist, hoffe ich doch, dem einen oder anderen damit weiter zu helfen.

Einen Motivationspunkt will ich nicht unerwähnt lassen, weil er mich doch sehr antreibt. Ich will wissen, wenn ich ein JavaScript Framework Projekt auf GitHub sehe, wie z.B. WinJS oder AngularJS, wie das aufgebaut ist, wie man es buildet, was das package.json File ist usw. Das lernt man hier nun nebenbei und auch wenn ich zu Beginn es sehr befremdlich fand, warum Microsoft all die JavaScript Tools in Visual Studio verwendet, sogar die Projektverwaltung für diesen Projekttyp komplett ändert und nicht die “eigenen” Tools, wie NuGet verwendet, bin ich jetzt doch froh, denn es ist für uns .NET Entwickler eine große Erweiterung des Betätigungsfeldes. Bemerkung: NuGet wird im .NET Umfeld immer wichtiger. (Es ist mit npm für Node.js zu vergleichen.)

Was braucht man nun am Entwickler-PC:

Ich will eine Cordova App entwickeln.

Für Android und Windows Phone Emulatoren muss Hyper-V funktionieren, daher ist eine virtuelle Maschine nicht geeignet (derzeitiger Stand).

Ein zu alter Rechner ist daher nicht geeignet, denn der Prozessor muss SLAT unterstützen (Hyper-V: List of SLAT-Capable CPUs for Hosts)

Bemerkung: Im Prinzip geht es auch ohne Emulator. - Ich verwende ihn nur ganz selten, deploye lieber gleich direkt auf das Handy, auch zum Debuggen.

Software:

Windows 10 Pro (Editionen Vergleich) Kann auch eine ältere Windows Version als 10 sein, man muss nur überprüfen, dass Hyper-V unterstützt wird.

Zur Visual Studio Installation: Man wählt natürlich alles aus, was für die Cordova und Web Entwicklung interessant ist. Durch die Android Emulatoren benötigt man eine Menge Speicherplatz auf der Festplatte. Empfehlenswert ist auch immer die kostenlose Erweiterung: Web Essentials
bzw. gleich das Web Extension Pack, das auch die Web Essentials inkludiert.

Und über npm dann folgende JavaScript Projekte:

  • bower
  • cordova
  • grunt-cli
  • gulp und gulp-cli
  • ionic
  • npm-windows-upgrade
  • tsd
  • typescript
  • yo

Wie man das macht, beschreibt folgender Beitrag: Pakete installieren mit npm.

Dieser Artikel ist Teil der Serie Ionic_Start.
Links und Glossar

Share:
Back to Blog