Ackermann Professionell entwickeln mit JavaScript

Design, Patterns, Praxistipps
2. Auflage 2018
ISBN: 978-3-8362-5689-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 6 - ePub Watermark

E-Book, Deutsch, 648 Seiten

Reihe: Rheinwerk Computing

Für alle, die mit JavaScript robusten Code schreiben wollen. Skills und Standards für komplexe Geschäftsanwendungen, clevere Apps und tragfähige Bibliotheken, für JavaScript auf dem Server und auf dem Client. Dieses umfassendes Lehr- und Praxisbuch behandelt alle relevanten Themen von den Sprachfeatures über Patterns und Frameworks bis zum Build-Prozess und Continuous Integration. Mit vielen Codebeispielen. Programmiererfahrung wird vorausgesetzt, JavaScript-Kenntnisse nicht.

Aus dem Inhalt:

• Aktuelle Sprachkenntnisse aufbauen
• Design-Patterns nach JavaScript-Art
• Architekturmuster einsetzen
• Klassen emulieren
• Funktionale Sprachmittel einsetzen
• Dos und Don'ts für guten Code
• Funktional-reaktive Programmierung
• Package-Management
• Den Build-Prozess optimieren
• Dokumentation und Deployment
• Continuous Integration
• Unit Tests und Test Driven Design
• Aspektorientierte Programmierung
• Messaging
• Frameworks auswählen

Philip Ackermann ist Master of Science in Computer Science. Am Fraunhofer-Institut für Angewandte Informationstechnologie FIT arbeitet er als Software-Entwickler an Tools zum teilautomatisierten Testen von Web Compliance, z. B. der Barrierefreiheit von Webseiten. Wissenschaftlich befasst er sich außerdem mit der modellbasierten Simulation und Evaluierung von mobilen und Web 2.0-Anwendungen.

Autoren/Hrsg.

Ackermann, Philip

Inhaltsverzeichnis

Geleitwort ... 15  Vorwort ... 17  Materialien zum Buch ... 20  1.  Einführung ... 21  1.1 ... Einleitung ... 21  1.2 ... Entstehung und Historie ... 22  1.3 ... Einsatzgebiete von JavaScript ... 24  1.4 ... Laufzeitumgebungen ... 27  1.5 ... Entwicklungsumgebungen ... 30  1.6 ... Debugging-Tools ... 35  1.7 ... Einführung in die Sprache ... 40  1.8 ... Zusammenfassung und Ausblick ... 65  2.  Funktionen und funktionale Aspekte ... 67  2.1 ... Die Besonderheiten von Funktionen in JavaScript ... 67  2.2 ... Standardmethoden jeder Funktion ... 87  2.3 ... Einführung in die funktionale Programmierung ... 92  2.4 ... Von der imperativen Programmierung zur funktionalen Programmierung ... 94  2.5 ... Funktionale Techniken und Entwurfsmuster ... 101  2.6 ... Funktionale reaktive Programmierung ... 127  2.7 ... Zusammenfassung und Ausblick ... 137  3.  Objektorientierte Programmierung mit JavaScript ... 141  3.1 ... Objekte ... 141  3.2 ... Prototypen ... 154  3.3 ... Vererbung ... 158  3.4 ... Datenkapselung ... 189  3.5 ... Emulieren von statischen Eigenschaften und statischen Methoden ... 196  3.6 ... Emulieren von Interfaces ... 199  3.7 ... Emulieren von Namespaces ... 202  3.8 ... Emulieren von Modulen ... 204  3.9 ... Modulsyntax ... 212  3.10 ... Zusammenfassung und Ausblick ... 215  4.  ECMAScript 2015 und neuere Versionen ... 219  4.1 ... Einführung ... 219  4.2 ... Block-Scope und Konstanten ... 221  4.3 ... Striktere Trennung zwischen Funktionen und Methoden ... 229  4.4 ... Flexiblerer Umgang mit Funktionsparametern ... 234  4.5 ... Mehrfachzuweisungen über Destructuring ... 243  4.6 ... Iteratoren und Generatoren ... 252  4.7 ... Promises ... 258  4.8 ... Proxies ... 260  4.9 ... Collections ... 265  4.10 ... Neue Methoden der Standardobjekte ... 269  4.11 ... Sonstiges neue Features ... 279  4.12 ... Zusammenfassung und Ausblick ... 283  5.  Der Entwicklungsprozess ... 285  5.1 ... Einleitung ... 285  5.2 ... Node.js und NPM ... 287  5.3 ... Styleguides und Code Conventions ... 289  5.4 ... Codequalität ... 295  5.5 ... Dokumentation ... 302  5.6 ... Konkatenation, Minification und Obfuscation ... 310  5.7 ... Package Management und Module Bundling ... 318  5.8 ... Building ... 332  5.9 ... Scaffolding ... 341  5.10 ... Zusammenfassung und Ausblick ... 348  6.  JavaScript-Anwendungen testen ... 351  6.1 ... Testgetriebene Entwicklung ... 351  6.2 ... Test-Doubles ... 375  6.3 ... Testabdeckung ... 390  6.4 ... DOM-Tests ... 396  6.5 ... Funktionstests ... 399  6.6 ... Zusammenfassung und Ausblick ... 406  7.  Fortgeschrittene Konzepte der objektorientierten Programmierung ... 409  7.1 ... SOLID ... 409  7.2 ... Fluent APIs ... 426  7.3 ... Aspektorientierte Programmierung in JavaScript ... 443  7.4 ... Zusammenfassung und Ausblick ... 458  8.  Die Entwurfsmuster der Gang of Four ... 459  8.1 ... Einführung ... 459  8.2 ... Erzeugungsmuster ... 460  8.3 ... Strukturmuster ... 476  8.4 ... Verhaltensmuster ... 499  8.5 ... Zusammenfassung und Ausblick ... 544  9.  Architekturmuster und Konzepte moderner JavaScript-Webframeworks ... 549  9.1 ... Model View Controller ... 550  9.2 ... Model View Presenter ... 551  9.3 ... MVC und MVP in Webanwendungen ... 551  9.4 ... Model View ViewModel ... 558  9.5 ... Komponentenbasierte Architektur ... 566  9.6 ... Routing ... 576  9.7 ... Zusammenfassung und Ausblick ... 578

10.  Messaging ... 581  10.1 ... Einführung ... 581  10.2 ... AMQP ... 583  10.3 ... AMQP unter JavaScript ... 587  10.4 ... MQTT ... 598  10.5 ... MQTT unter JavaScript ... 602  10.6 ... Zusammenfassung und Ausblick ... 607

11.  Continuous Integration ... 611  11.1 ... Vorbereitungen ... 612  11.2 ... Jenkins ... 619  11.3 ... Alternativen: Travis CI und CircleCI ... 638  11.4 ... Zusammenfassung und Ausblick ... 640  Index ... 641

Leseproben

1.6    Debugging-Tools

So wie nahezu jeder Browserhersteller eine eigene JavaScript-Laufzeitumgebung verwendet, gibt es auch für jeden Browser ein eigenes Debugging-Tool. Sollten Sie dagegen eine serverseitige JavaScript-Anwendung debuggen wollen, bietet sich unter Node.js für ältere Versionen das Modul node-inspector an, für Node.js-Versionen seit 6.3 der integrierte Node.js Inspector. Alternativ dazu bieten natürlich wie im vorigen Abschnitt erwähnt viele der Entwicklungsumgebungen und Editoren Debugging-Tools an.

Bevor wir uns jedoch diesen Debugging-Tools zuwenden, möchte ich Ihnen kurz noch einen Weg vorstellen, über den Sie simple Ausgaben auf die Konsole schreiben können – in den meisten Fällen zwar nicht die beste Art zu debuggen, aber trotzdem oft sehr hilfreich. Die Rede ist von dem Objekt console, das sowohl in den Laufzeitumgebungen der verschiedenen Browser als auch unter Node.js zur Verfügung steht (unter Google Chrome öffnen Sie die Entwicklerkonsole beispielsweise über Anzeigen • Entwickler • Entwicklertools bzw. Anzeigen • Entwickler • JavaScript-Konsole).

1.6.1    Das »console«-Objekt

Beim console-Objekt handelt es sich um ein Objekt, das erstmals durch das Firefox-Plugin Firebug eingeführt wurde und mit dem es möglich ist, auf die Standardausgabe zu schreiben. Mittlerweile steht das console-Objekt (obwohl immer noch nicht im Standard enthalten) in nahezu jeder JavaScript-Laufzeitumgebung zur Verfügung.

Die einzelnen Methoden, die das Objekt zur Verfügung stellt, unterscheiden sich jedoch von Laufzeitumgebung zu Laufzeitumgebung. Um dem entgegenzuwirken, gibt es daher bereits Bestrebungen, die API zu standardisieren. Immer unterstützt wird aber die Methode log(), mit der Sie eine einfache Konsolenausgabe erzeugen:

console.log('Hallo Welt');

Tabelle 1.2 gibt eine Übersicht über die Methoden, die von jeder Laufzeitumgebung unterstützt werden, die das console-Objekt bereitstellt.

Methode	Beschreibung

clear()

Leert die Konsole.

debug()

Erwartet ein oder mehrere Objekte und gibt diese auf der Konsole aus.

error()

Erwartet wie debug() ein oder mehrere Objekte und gibt diese als Fehler auf der Konsole aus. In Browsern wird innerhalb der Konsole oft ein Fehler-Icon neben der ausgegebenen Meldung dargestellt sowie der Fehler-Stack ausgegeben.

info()

Hiermit werden die übergebenen Objekte als Info-Meldung auf die Konsole ausgegeben. Chrome beispielsweise gibt zusätzlich ein Info-Icon mit aus.

log()

Die wohl am häufigsten verwendete Methode von console. Loggt die übergebenen Objekte auf die Konsole.

trace()

Gibt den Stack-Trace, also den Methodenaufruf-Stack, auf die Konsole aus.

warn()

Gibt die übergebenen Objekte als Warnung auf die Konsole aus. Auch hier wird in den meisten Browsern ein entsprechendes Icon neben der Meldung ausgegeben.

Tabelle 1.2    Standardmethoden des »console«-Objekts

Ein besonderes nettes Feature der log()-Methode ist die Möglichkeit, innerhalb des übergebenen Strings mit Platzhaltern zu arbeiten. Enthält ein String solche Platzhalter, werden die nachfolgenden Parameter bei der Ausgabe als Werte für die Platzhalter eingesetzt. Beispielsweise erzeugt der Aufruf

console.log('%s: %d', 'Ergebnis', 2.4);

die Ausgabe Ergebnis: 2.4.

Auf diese Weise lassen sich ebenfalls komplette Objekte in die Meldung einbauen, nämlich einfach, indem Sie den Platzhalter %j verwenden. Folgendes Programm erzeugt beispielsweise die Ausgabe {"name":"Max","nachname":"Mustermann"}:

const person = {
firstName: 'Max',
lastName: 'Mustermann'
}
console.log('%j', person);

Allerdings funktioniert die Ausgabe von Objekten nur unter Node.js. Eine Methode, die eine ähnliche Ausgabe erzeugt, ist die Methode dir().

Hinzu kommen weitere Methoden für die formatierte Ausgabe, wie beispielsweise dirxml(), die XML- oder HTML-(Unter-)Bäume auf die Konsole ausgibt, group(), groupCollapsed() und groupEnd(), die Konsolenausgaben gruppieren, und table(), die Daten in Tabellenform ausgibt.

Aber wie gesagt: Nicht alle Laufzeitumgebungen bieten alle Methoden an. Eine Übersicht, welche Methoden zur Verfügung stehen, finden Sie auf den Dokumentationsseiten der jeweiligen Laufzeitumgebung: für Chrome (https://developer.chrome. com/devtools/docs/console-api), Firefox (https://developer.mozilla.org/en-US/docs/Web/API/console), Node.js (http://nodejs.org/api/). Einen guten Überblick gibt außerdem Axel Rauschmayer in seinem Blog unter http://www.2ality.com/2013/10/console-api.html.

1.6.2    Browser

In jedem der bekannten Browser gibt es mittlerweile ein Debugging-Tool, wobei sich die einzelnen Tools voneinander nur wenig unterscheiden. In jedem der Tools ist es beispielsweise möglich, verschiedene Arten von Breakpoints zu setzen (in dem einen Tool mehr, in dem anderen weniger), den Methoden-Stack zu begutachten, die aktuelle Variablenbelegung einzusehen, Variablen zu verändern, schrittweise im Programm weiterzugehen etc.

Firefox Developer Tools

Welches Tool Sie verwenden, hängt also eher davon ab, für welchen Browser Sie entwickeln. Eines der wohl bekannteren Debugging-Tools ist der Debugger der Firefox Developer Tools (bis 2017 unter dem Namen Firebug entwickelt). Damit können verschiedene Aspekte bei der Webentwicklung überprüft werden, so auch die Ausführung von JavaScript-Code (siehe Abbildung 1.7).

Der Debugger (https://getfirebug.com), erlaubt Ihnen einzelne Breakpoints zu setzen und ausgehend davon schrittweise im JavaScript-Code zu navigieren. Einem Breakpoint können Sie dabei eine boolesche Bedingung zuweisen (Conditional Breakpoints), die angibt, in welchen Fällen an dem jeweiligen Breakpoint angehalten werden soll. Alternativ können Sie pauschal den Debugger immer dann pausieren lassen, wenn ein Fehler auftritt.

Zu den weiteren Features zählen Zugriff auf den Stack-Trace, Watch Expressions (über die es möglich ist, bestimmte Ausdrücke zu beobachten) sowie diverse Profiling-Optionen. Ebenfalls praktisch: Über die eingebaute Konsole lässt sich JavaScript direkt im Kontext der jeweiligen Anwendung ausführen.

Abbildung 1.7    Firefox Firebug

Chrome Developer Tools

Die Chrome Developer Tools (CDT) (https://developers.google.com/chrome-developer-tools/docs/javascript-debugging) zählen unter JavaScript-Entwicklern wohl zu den beliebtesten Debugging-Tools (siehe Abbildung 1.8). Ähnlich wie in Firebug lassen sich auch unter CDT Breakpoints setzen. Neben Breakpoints, die Exceptions abfangen, gibt es dort aber zusätzlich die Möglichkeit, DOM-Breakpoints oder XHR-Breakpoints zu setzen, wodurch das jeweilige Programm bei DOM-Manipulationen oder bei Aufrufen über das XHR-Objekt zum Halten kommt.

Mittlerweile ist es sogar möglich, den Quelltext eines...

Über Autor(innen)

Ackermann, Philip
Philip Ackermann ist Master of Science in Computer Science. Am Fraunhofer-Institut für Angewandte Informationstechnologie FIT arbeitet er als Software-Entwickler an Tools zum teilautomatisierten Testen von Web Compliance, z. B. der Barrierefreiheit von Webseiten. Wissenschaftlich befasst er sich außerdem mit der modellbasierten Simulation und Evaluierung von mobilen und Web 2.0-Anwendungen.