All about JavaScript

"Java is to JavaScript as ham is to hamster, as car ist to carpet, and as iron is to irony."

Dieser Blogbeitrag richtet sich vor allem an Software Entwickler aus der Java & .NET Welt. Es führt JavaScript (JS) Einsteiger in das JS Ecosystem ein. Erfahrene JS Entwickler hingegen erhalten wertvolle Informationen darüber, wie sich JS entwickeln wird und welche aktuellen Werkzeuge und Frameworks für die Entwicklung einer zeitgemässen Software zur Verfügung stehen. Der Blogbeitrag wurde aufgrund eines intensiven JS Bootcamp, geleitet vom Profi Jonas Bandi (Freelancer & Dozent an der Fachhochschule Bern), erstellt.

JavaScript Grundlagen

Der Vater von JS ist Brendan Eich.
Heute ist es eine "Trademark" von Oracle Inc.

Geschichte

1995: Entstanden mit Netscape Navigator
1997: Normierung in ECMAScript (ES)
2009: Node.js (von Ryan Dahl), Performant als Webserver

Nutzen

• Beweggrund zur Entwicklung von JS:
  • Ziel: Java Applets in den Browser einzubinden. Zur Orchestrierung soll eine einfache Skriptsprache dienen.
  • Interaktionsfähigkeit in Browser einpflegen.
• Befindet sich heute (durch Microsoft angehoben) auf Augenhöhe mit .NET und dergleichen.

Aufbau von JS Software

Separate Code from Markup (1)

Ziel ist es, den JS Code vollständig von Seitenstruktur (HTML & Design) zu entkoppeln und damit eine Trennung von Geschäftslogik und View zu erreichen. Dies ermöglicht es, das Modell wiederzuverwenden.

• JS-Blöcke nicht im HTML einbetten: für Model-View Trennung und Reuse.
• Verknüpfungscode realisierbar in:
  
  • Button Click-Handler als JS-Expression
  • Im JS-File Programmatikalisch. (Fachbegriff: "Unobtrusive JS").

Das (verlinkte) HTML Dokument wird damit zum Host für Webapplikationen.

Durch den Einsatz von Single-Page Applikationen lässt sich die Logik auf den Klienten (in den Browser auslagern).

• Ein HTML, in welchem JS den ganzen Inhalt aufbaut.
• Server wird zum Datenlieferanten degradiert und muss keine Seiten mehr erstellen.
• Mehr Logik im Client.

• Die View wird hierbei größtenteils durch Frameworks erledigt.
• Das Datenmodell wird bereits durch die JSON (Java Script Object Notation) vom Server vorgegeben.

Vorteil: die Benutzerinteraktion verbessert sich, da die Seite nicht immer neu geladen werden muss, sondern vom Klienten neu gestaltet wird.
Nachteil: Die Synchronisation mit dem Server wird komplizierter. Bei langen Laufzeiten führen alte Inhalte auf Caches zu Problemen.

Die JS Engine ist immer Single Thread. Die Abarbeitung mehrerer Anfragen wird mit dafür entwickelten Patterns ermöglicht (EventLoop, analog Qt).

Das Ecosystem

Aktives Ökosystem: Paketverwaltung npm (node package manager). Dieses bietet extrem viele Pakete, auf welche aufgebaut werden kann. Darunter auch viele Leichen, da viele Frameworks mit einer Lebensdauer von 2 Jahren extrem kurzlebig sind und nicht weiterentwickelt werden.

• Grösste Herausforderung: Pakete zu finden, welche langlebiger sind. Daher eher auf die Basis setzen als auf kurzlebige Pakete.
  
  • jQuery hat sich aus der ersten Generation von Frameworks etwas durchgesetzt.
  • Robuste Frameworks aus dritter und vierter Generatio sind angular.js und React.
  • Die langlebigeren Pakete können durch Downloadmetriken ermittelt werden. Solche zeigen an, wie oft ein Paket im vergangenen Jahr, Monat und Tag aus dem Repo heruntergeladen wurde. Ein Paket, welches millionenfach verwendet wird überdauert längere Zeit im Vergleich zu einem Paket, welches in den vergangenen Monaten nur ein paar tausend mal verwendet wurde.
• JS hat den Browser verlassen: z.B. durch Node.JS und viele mehr. Daher gibt es heute immer mehr Rich-Client Applikationen. Z.B. wurde "Visual Studio Code" von Microsoft so realisiert. D.h. praktisch der gleiche Code kann im Browser über Web, aber auch als lokale Visual Studio Applikation verwendet werden.

Abhängigkeiten von Bibliotheken:

• Werden z.B. durch Gulp.js (ein task runner) explicit angegeben und über npm online vom Repo gezogen.
• Wenn das online-Repo "unpublished" wird gibt es Probleme. Dagegen hilft es, einen Repo-Server intern zu betreiben, welcher die verwendeten (npm-) Pakete spiegelt.
• NPM wird aktuell gestärkt, da grosse Anbieter (Angular, Microsoft) auf die Distribution über npm setzen.

Toolchain

Build-Prozess:

Durch einen Compiler, z.B. mit Gulp.js. Aus dem (bereits schon ausführbaren) Developer Code werden zur Compile-Time neue Files mit anderen Namen erstellt.

Vorteile:

• Optimierung auf Inhalt und Anzahl Aufrufe (weniger Text und weniger Dateien).
• Der spezielle Dateiname (mit HASH) enthält Versionierungsinformationen, was u.A. Bugs durch Caching verhindert.
• Solche Compiler liefern ein Feedback zum Source-Code, z.B. statische Codeanalyse.
• Automatisches Testen, auch für die Ausführung in verschiedenen Browsern gleichzeitig.
• Es gibt Tools/Frameworks, welche dieses Verhalten zur Laufzeit bewirken. So, dass bei Aufruf die concaternierten/minifizierten Files im Cache leben.

Testing:

Mit Hilfe von Unit-Tests mit z.B. Karma

• Hier muss nur die Unit funktionieren (wird gegen Browser getestet).

Mit Hilfe von Integrations-Test

• End To End mit Browser-Fernsteuerung.
• Erfordert einen funktionierenden Build.
• Erfordert einen laufenden Server, auf dem der ferngesteuerte Browser die Inhalte abrufen kann.
• Erfordert ein Debug-Tool, welches die zu testenden Inhalte beim DOM abholt und bearbeitet.

Typescript & ES2015

Übersicht

TypeScript ist eine vom Unternehmen Microsoft entwickelte, auf Javascript aufbauende Programmiersprache. Sie unterstützt Sprachkonstrukte wie Klassen, Interfaces, Vererbung, statische Typisierung, etc. Solche Sprachkonstrukte werden bei Javascript ES5 gegenüber anderen konventionellen Programmiersprachen vermisst. Viele dieser Sprachkonstrukte basieren auf den Vorschlägen des neueren ES2015-Standards. Untenstehende Grafik verdeutlicht, dass TypeScript auf ES5 aufbaut, jedoch bereits auch grosse Teile von ES2015 beinhaltet.

TypeScript transpiliert dabei Code auf Basis von TypeScript oder ES2015 zurück auf ES5-Standard. Dies ermöglicht die Darstellung auch auf Browsern, die den neueren Standard ES2015 noch nicht unterstützten. Siehe dazu folgenden Link als Übersicht über die Kompatibilität der Browsern zu den Features der Standards: https://kangax.github.io/compat-table/es6/.

Die folgende Abbildung verdeutlicht nochmals die einzelnen Standards und einen der Nutzen von TypeScript.

Workflow

Folgende Abbildungen zeigen die Unterschiede zwischen den Workflows beim Arbeiten mit ES5 gegenüber ES2015/TS. Während früher der geschriebene Code direkt ausgeführt werden konnte, wird heute ein Compiler/Transpiler (z.B. wie erwähnt TypeScript oder auch Babel) dazwischengeschalten. Oftmals werden Tools und Frameworks benutzt um den ganzen Workflow zu vereinfachen wie oben im Kapitel Toolchain bereits erwähnt.

Vorteile gegenüber ES5 - Beispiel

Einen gutes Beispiel für den Nutzen der Features von ES2015 gegenüber ES5 zeigt sich anhand der Callback-Hell. Während sich die Callback ineinander hinein verschachteln, kann man dasselbe Statement wesentlich eleganter mit Promises lösen. Diese lassen sich mit dem Future-Feature von C# vergleichen.

Fazit

JavaScript ist aufgrund seiner vielfältigen Anwendungsmöglichkeiten, seinem schnell wachsenden Ecosystem und der riesigen, aktiven Community wie auch Online-Hilfen extrem attraktiv für Entwicklungen aller Art. Neue Tools und Frameworks werden laufend entwickelt und unterstützen die Entwickler in allen Belangen. Ein Risiko ist allerdings die schnelllebende Welt des JavaScripts, so dass das Ecosystem mit bedacht gewählt werden muss und die einzelnen Tools/Frameworks die Applikation überdauern.

Dieser Blog-Beitrag wurde von Andreas Michel und Claudio Stoob erstellt.