201507Jun

JavaScript: ECMAScript 6 schon jetzt für Projekte einsetzen

Die Features von ECMAScript 6 (Harmony) können im Prinzip schon jetzt in 2015 für Projekte verwendet werden: Durch Transpiler wie Babel oder Traceur wird geschriebener ES6-Code für Browser in entsprechenden ES5-Fallback-Code umgewandelt, sofern diese ES6-Funktionen noch nicht unterstützen. Weiterhin empfiehlt sich die Verwendung eines Modulsystems (RequireJS, SystemJS), da durch ES6 echte Klassen und Module möglich sind. Zudem sollte ein Package-Manager wie jspm eingesetzt werden, um automatische Abhängigkeiten aufzulösen.

ECMAScript 6 - Harmony

Mit diesen Voraussetzungen lassen sich ohne Probleme schon jetzt moderne Web-Projekte auf ES6-Basis entwickeln. Damit der ganze Prozess etwas leichter verständlich wird, sind hierzu zwei Artikel zu empfehlen:

Die beiden Artikel ergänzen sich gegenseitig und stammen von angesehenen JavaScript-Entwicklern (Dr. Axel Rauschmayer und Cody Lindley von Telerik). Ein Blick auf ES6 lohnt sich in jedem Fall, zumal auch AngularJS 2 darauf basieren wird und Module einsetzt. Wer mit ES6 experimentieren möchte, nutzt dazu am besten den TypeScript Playground oder den Babel-REPL (Read-Eval-Print-Loop).

201529Mai

JavaScript: JSX anhand von React-Komponenten erklärt

Mit React hat Facebook auch JSX eingeführt, eine JavaScript-Syntax-Erweiterung, mit der XML-Notationen in JavaScript-Objekte transformiert werden. Obwohl die Verwendung von JSX in React optional ist, empfiehlt sich die Anwendung von JSX-Templates in React-Komponenten. Allerdings sollte klar sein, dass sich bei JSX nicht um eine Template-Sprache (wie etwa Handlebars oder EJS) handelt: JSX stellt eine deklarative Syntax dar, um das virtuelle DOM von React darzustellen. Der virtuelle DOM-Tree wird schließlich mit dem eigentlichen DOM-Tree der HTML-Seite abgeglichen, wobei nur die Änderungen synchronisiert werden.

JSX muss zudem nicht ausschließlich für HTML verwendet werden, sondern kann allgemein für das Abbilden von beliebigen Objektbäumen genutzt werden. Auch das Event-Handling unterscheidet sich bei JSX zu dem von anderen Template-Engines: Events werden an die React-Root-Node delegiert, wodurch nicht für mehrere Elemente Event-Listener im Speicher gehalten werden müssen.
Diese und weitere Aspekte werden in einem Artikel auf Medium.com beschrieben. Entwickler sollen dadurch ein besseres Bild von der Technologie erhalten, um sie zusammen mit React-Komponenten einsetzen zu können.

201527Mai

JavaScript: Allgemeine Fehler bei Promises

Mit Promises steht JavaScript-Entwicklern schon seit geraumer Zeit ein Konzept zur Verfügung, mit dem sich eine "Callback Hell" vermeiden lässt, da Funktionen asynchron ausgeführt werden können. Ein Promise ist also eine wartende Funktion, die per resolve oder reject aufgelöst werden muss, damit die nachfolgenden Promises per .then() ausgeführt werden.

PouchDB - We have a problem with promises

Nolan Lawson hat in einem Artikel auf dem PouchDB-Blog allerdings die Feststellung gemacht, dass Promises häufig falsch verwendet werden. Daher zeigt er verschiedene Fehler und entsprechende Verbesserungsvorschläge auf. Gerade bei der Arbeit mit dynamischen Daten und forEach-Schleifen kann auch mit Promises die "Pyramid of Doom" entstehen, die es zu vermeiden gilt.

201525Mai

JavaScript: Alternative Konzepte zu Flux und React

Mittlerweile dürften die meisten JavaScript-Entwickler mit den Begriffen Flux oder React etwas anfangen können. Facebook hat damit neue Methoden zur Entwicklung moderner Webanwendungen geschaffen. Neben einem virtuellem DOM und einem unidirektionalen Datenfluss stehen bei React ein Klassensystem, Event-Emitter, Actions und Stores im Vordergrund der Funktionsweise. Das ganze stellt eine mögliche Lösung dar, bietet aber zugleich Raum für Weiterentwicklungen.

Flux - Application Architecture for Building User Interfaces

Inzwischen gibt es zwei Vertreter, welche die Paradigmen von Facebook analysiert und verändert haben. Zum einen hat der Entwickler Matti Lankinen eine Alternative beschrieben, die auf Bacon.js und React basiert: Hier wird also die Flux-Architektur mit ihren Konventionen aufgelöst und durch "Functional Reactive Programming (FRP)" ersetzt, bei dem Event-Streams die Grundlage bilden. Actions und Stores werden überflüssig, da eine "öffentliche API" als lokaler Dispatcher agiert und die Zustände innerhalb der Anwendung regelt. Eine beispielhafte TodoMVC-App demonstriert die Funktionsweise.
Der zweite Ansatz bezieht sich auf das UI-Framework Deku: Hierbei handelt es sich um eine funktionale Alternative zu React, die auf das Klassensystem verzichtet. ES6, JSX sowie Komponenten kommen hier weiterhin zum Einsatz, lediglich das Rendering gleicht bei dieser Idee dem einer Game-Engine.