Kolumne: Keine Angst vor JavaScript!

Die große JavaScript-Erschöpfung

Nils Hartmann, Oliver Zeigermann

(c) Shutterstock / durantelallera

Der Einstieg in JavaScript kann ganz schön kompliziert und verwirrend sein. Musste man früher „nur“ die Sprache lernen (und das konnte ja schon schlimm genug sein), sieht man sich heutzutage mit einer ganz eigenen Welt von Tools, Frameworks und Verfahren gegenüber. Die Zeiten, in denen man einen Texteditor öffnete und ein paar Zeilen JavaScript direkt in das script-Tag einer HTML-Seite schrieb, scheinen vorbei zu sein, und selbst erfahrenere JavaScript-Entwicklerinnen und Entwickler sprechen mittlerweile von einer „JavaScript Fatigue“, also einer Ermüdung angesichts einer sich ständig wandelnden Landschaft.

Im Rahmen unserer Kolumne möchten wir Ihnen dabei helfen, sich in der „neuen“ Welt zurechtzufinden. Dazu geben wir Ihnen in dieser Folge zunächst einen sehr groben Überblick über die JavaScript-Welt. Dieser Überblick richtet sich vor allem an Ein- bzw. Umsteiger. In den kommenden Folgen werden wir uns dann einzelne Themen näher ansehen. Dabei sind auch für „Fortgeschrittene“ interessante Themen dabei.

Wenn Sie Fragen haben, können Sie uns gerne kontaktieren, ebenso wenn Sie Vorschläge für Themen haben, die wir aufgreifen sollten. Wenn Sie beispielsweise ein Thema haben, über das Sie sich in JavaScript schon immer geärgert haben (und vielleicht sagen: geht zum Beispiel in Java viel besser), dann zögern Sie nicht, uns zu kontaktieren (@nilshartmann bzw. @djcordhose) oder das untere Kommentar-Feld zu nutzen.

JavaScript-Uebersicht-Nur-JS

JavaScript Basics

Fangen wir mit unserem Überflug bei der Laufzeitumgebung und der eigentlichen Sprache an. Eine ganze Weile war die „natürliche“ Umgebung zur Ausführung von JavaScript-Code der Browser. Dort wurde JavaScript zunächst nur eingesetzt, um Websites aufzuhübschen, kleinere Animationen oder die Validierung von Eingaben zu implementieren. Mittlerweile werden mit JavaScript aber auch ganze Applikationen gebaut, die im Browser und sogar auch außerhalb eines Browsers laufen. Hierbei kommt in der Regel NodeJS zum Einsatz. NodeJS verwendet die JavaScript-Implementierung V8 von Google, die auch die JavaScript-Engine von Chrome ist. Seit Anfang 2016 gibt es daneben eine NodeJS-Variante, die mit Chakra Core arbeitet. Das ist die JavaScript-Engine des Webbrowsers Edge von Microsoft.

Auf Basis von NodeJS werden dabei einerseits Serverprozesse (zum Beispiel für Webserver oder für ein REST API) implementiert. Andererseits dient NodeJS auch als Ausführungsumgebung für eine ganze Reihe von Tools, wie Compiler oder Buildtools.

NodeJS bringt außerdem einen eigenen Package Manager (npm – Node Package Manager) mit. Mit diesem Tool können Sie externe Bibliotheken in Ihr Projekt einbinden, vergleichbar mit Maven in Java.

Abhängig von der Laufzeitumgebung gibt es unterschiedliche Unterstützung für die einzelnen JavaScript-Sprachfeatures. Die neuste Spezifikation (ECMAScript2015) wird zurzeit zum Beispiel von keinem Browser vollständig umgesetzt. Diesem Problem wird mit zwei Ansätzen begegnet: Zum einen kann „neuerer“ JavaScript-Code mittels eines Compilers (z.B. Babel oder TypeScript) in „älteren“ Code übersetzt werden. Für fehlende Standard-Funktionen und Objekte gibt es sogenannte Polyfills. Dabei handelt es sich um Bibliotheken, die je nach Laufzeitumgebung die fehlenden Features zur Verfügung stellen. Die Funktion Object.assign() beispielsweise ist in Chrome (bzw. V8) bereits vorhanden, steht aber zurzeit im Internet Explorer noch nicht zur Verfügung.

Mit einer entsprechenden Bibliothek kann die fehlende Methode aber auch im Internet Explorer genutzt werden. Dazu muss lediglich eine weitere JavaScript-Datei eingebunden werden. Sie können also bereits heute Browser- bzw. Laufzeitumgebungs-übergreifend die neusten JavaScript-Features und -Funktionen verwenden.

Typen & Module

Wie erwähnt, können Sie einen Compiler verwenden, um neueres JavaScript in eine ältere Version zurückzuübersetzen. Hierfür kann der Babel-Compiler verwendet werden, der sich als quasi Standard in diesem Bereich durchgesetzt hat. Eine Alternative dazu ist TypeScript. TypeScript ist allerdings nicht nur ein Compiler, sondern definiert auch eine gleichnamige Sprache, die einen Aufsatz auf JavaScript darstellt. Die Sprache TypeScript bringt – ähnlich wie von Java oder C# gewohnt – ein Typensystem mit. Genau wie in Java überprüft der Compiler dann, ob die definierten Anforderungen eingehalten wurden. Einen Überblick über das TypeScript Typensystem können Sie in unserer vorherigen Kolumne finden: Wer hat das beste Typensystem? JavaScript!

Sobald Ihre Anwendung etwas größer wird, werden Sie ein Modul-System benötigen, um Ihre Anwendung zu strukturieren und auch um externe Bibliotheken und Frameworks einzubinden. Ein Modulsystem bietet die Möglichkeit, Sichtbarkeiten zu beschreiben, um Code in einen öffentlichen und einen privaten Teil aufzuteilen. Einen Standard für ein Modulsystem gibt es allerdings erst seit der neusten JavaScript-Version. In der Praxis kommen daher für diesen Zweck insbesondere die beiden Systeme CommonJS (innerhalb von NodeJS) oder AMD (im Browser) zum Einsatz.

Build-Tools & Frameworks

In vielen Fällen werden Sie auch bei der Arbeit mit JavaScript nicht um ein Build-Tool herumkommen. Dazu stehen mit Gulp und Grunt zwei prominente Vertreter bereit, und auch npm kann dazu genutzt werden, häufig wiederkehrende Aufgaben auszuführen. Damit können Sie dann beispielsweise mit Babel Ihren Code übersetzen und danach die Tests ausführen lassen, genau wie Sie das auch aus Java gewohnt sind.

Wenn Sie Ihre Anwendung für das Web entwickeln, können Sie als Alternative zu Gulp oder Grunt auch einen Module Bundler wie Webpack oder Browserify verwenden. Ein Module Bundler erzeugt aus allen Ihren verwendeten Modulen (sowohl den eigenen wie auch den externen) eine oder mehrere vom Browser verwendbare JavaScript-Dateien. Dabei spielt es keine Rolle, welches Modulsystem Sie während der Entwicklung verwendet haben. Ebenso können Sie damit dieselben Module sowohl auf dem Server als auch im Browser verwenden. Die Bundler können während der Ausführung noch weitere Aufgaben übernehmen, zum Beispiel mit Babel Ihren Sourcecode übersetzen.

Wenn Sie größere Anwendungen für den Browser (sogenannte Single-Page-Applications) entwickeln wollten, setzen Sie ein hierfür geeignetes Framework ein. Bekannte Vertreter dieser Art sind AngularJS (von Google) bzw React (von Facebook).

Dieser Überblick soll fürs erste ausreichen, auch wenn wir hier noch nicht alle Themen angesprochen haben. Wie erwähnt werden wir einzelne Themenblöcke in den nächsten Kolumnen vertiefen.

Tipps für den Einstieg

Zum Schluss möchten wir Ihnen noch Empfehlungen für das Kennenlernen der JavaScript-Welt mitgeben. Wenn Sie noch keine Erfahrungen mit der Sprache haben, sollten Sie gleich mit der neusten Sprach-Version ECMAScript 2015 einsteigen. Gegenüber der Vorgängerversion sind hier viele Features hinzugekommen, die bisher nur sehr umständlich umzusetzen waren (z.B. Block Scoping oder Klassen), und die notwendige Verwendung des Babel-Compilers ist trivial. Machen Sie sich danach mit dem Modulsystemen und dem npm-Paket-Manager vertraut, und wenden Sie sich dann erst den weiteren Themen zu.

Um nicht gleich von all den weiteren Themen erschlagen zu werden, empfiehlt es sich, Schritt-für-Schritt vorzugehen und immer nur das einzusetzen, was Sie auch wirklich benötigen. Lassen Sie sich nicht von dem Prinzip „Das macht man so“ leiten. Prüfen Sie für sich, was in Ihrem Projekt sinnvoll ist und was nicht. Das gilt übrigens auch für Frameworks und Bibliotheken, die Sie in Ihrem Projekt einsetzen.

Verzichten Sie auf alles, was Ihnen keinen unmittelbaren Mehrwert bringt. Dieses Vorgehen kann helfen, die „JavaScript Fatigue“ zu vermeiden.

Aufmacherbuild: Vintage frightened man von Shutterstock / Urheberrecht: durantelallera

Geschrieben von
Nils Hartmann
Nils Hartmann
Nils Hartmann ist Softwareentwickler und Softwarearchitekt. Er hat langjährige Erfahrung in der Entwicklung von großen Java-Enterprise-Anwendungen und beschäftigt sich mit dem server- und clientseitigen Einsatz von JavaScript. Nils ist unter www.nilshartmann.net zu erreichen. Twitter: @nilshartmann
Oliver Zeigermann
Oliver Zeigermann
Oliver Zeigermann ist Softwareentwicklungs-Enthusiast, der sich besonders für Singe-Pages-Webanwendungen (SPAs) in Java und JavaScript interessiert. Er lebt in Hamburg und arbeitet als selbständiger Consultant, Trainer, Coach und Software-Entwickler. Twitter: @djcordhose
Kommentare

Hinterlasse einen Kommentar

2 Kommentare auf "Die große JavaScript-Erschöpfung"

avatar
400
  Subscribe  
Benachrichtige mich zu:
Alexander
Gast

Schöner Artikel! Irgendwie erinnert mich der Spaß an die Geschichte von EJB. Viel Aufwand für wenig Nutzen^^
Ich glaube man sollte noch etwas warten, bevor man mit den Frameworks startet. Bestes Beispiel ist Angular, dass inkompatibel zwischen 1.x und 2.x ist.

trackback

[…] Die große JavaScript-Erschöpfung – V8) bereits vorhanden, steht aber zurzeit im Internet Explorer noch … Ihre Anwendung für das Web entwickeln, können Sie … […]