Tag: javascript

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.

201527Mai

Mobile Apps: Entwicklung mit einer JavaScript-Codebasis

Es ist wieder Zeit für eine Matrix: Diesmal geht es um die Entwicklung von mobilen Apps mit einer zentralen JavaScript-Codebasis. Dies wird mit bestimmten Frameworks möglich, die Cross-Plattform-Support durch HTML oder eine dynamische Runtime ermöglichen. Zu diesem Thema habe ich daher die Mobile App Framework Matrix entwickelt. Sie zeigt Technologien auf, mit denen sich iOS-/Android-Apps durch einen zentralen JavaScript-Code entwickeln lassen. Webentwickler sollen sich ein Bild von den derzeitigen Technologien und ihren Kehrseiten machen können.

Mobile App Framework Matrix - iOS-/Android-Apps in JavaScript entwickeln

Da mobile Cross-Plattform-Apps unterschiedliche Anforderungen haben, eignet sich nicht jede Lösung für jedes Szenario. Wenn es um Erweiterbarkeit, Leistung und Skalierbarkeit geht, variieren die Frameworks in verschiedenen Bereichen.

Weiterlesen...
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.

201524Mai

JavaScript: Sonnensystem der Skriptsprache in 2015

JavaScript ist zu einer wichtigen und soliden Skriptsprache geworden, die maßgeblich zur Entwicklung des Webs beiträgt und auch für die Umsetzung mobiler Apps oder nativer Desktop-Anwendungen genutzt werden kann. ECMAScript 6 ist zwar noch nicht in allen Browsern vollständig implementiert, kann aber dank Transpiler schon jetzt genutzt werden: Für Browser, die ES6 noch nicht unterstützen, werden dann entsprechende Code-Fallbacks erzeugt.
Neben ES5-Transpilern gibt es noch andere Tools und Weiterentwicklungen, die sich derzeit im JavaScript-Ökosystem (oder -Sonnensystem) befinden.

Solar System of JS

Anlässlich der Space City JS-Konferenz hat der Entwickler Shaun LeBron das "Solar System of JS" entwickelt. Dabei handelt es sich um eine interaktive Illustration aktueller JavaScript-Technologien und -Entwicklungen. Neben Transpilern, Lintern und Modul-Systemen werden Features von ES7 und ES8 gezeigt, Tools zur statischen Typisierung (wie beispielsweise TypeScript oder Flow) sowie Sprachen, die nach JavaScript kompilieren (z.B. ClojureScript).

201514Mai

plainJS: Sammlung mit Vanilla-JavaScript-Bibliotheken

JavaScript-Code, der nicht auf externe Bibliotheken angewiesen ist, bezeichnet man auch als Vanilla-JavaScript. Die Entwicklung der Browser und Webstandards ist in den letzten Jahren soweit fortgeschritten, dass JavaScript-Frameworks wie jQuery oder Dojo immer mehr in den Hintergrund treten. Ich hatte hierzu bereits einen ausführlichen Artikel veröffentlicht. Aus diesem Grund stellt sich vielen Entwicklern die Frage, ob für das nächste Projekt überhaupt noch jQuery oder ein anderes Framework zur Vereinfachung eingesetzt werden soll: Mit ECMAScript 5 und der stärker werdenden Verbreitung moderner Browser stehen im Grunde alle Funktionen bereit, die beispielsweise mit jQuery vereinfacht werden.

plainJS - The Vanilla JavaScript Repository

Daher gibt es jetzt schon etliche Skripte, die nicht auf ein Framework setzen und sich stattdessen ES5-Features zunutze machen. Eine Sammlung solcher Skripte steht nun mit plainJS bereit, die in unterschiedliche Kategorien eingeteilt ist: UI, Eingabe, Medien, Navigation, Effekte und Sonstiges. Hier finden sich also kleine Bibliotheken für alle erdenklichen Bereiche einer modernen Website.

201514Mai

Tooltip.js: MouseOver-Skript mit HTML-Konfiguration

Vor 5 Jahren hatte ich ein Tutorial veröffentlicht, das die Entwicklung eines eigenen jQuery-Tooltip-Plugins beschreibt. Das daraus resultierende Plugin kann zwar immer noch eingesetzt werden, doch mittlerweile bieten sich andere Techniken an, um Seiten eine spezifische JavaScript-Funktionalität hinzuzufügen. Daher habe ich das Skript Tooltip.js entwickelt, das sich an AngularJS orientiert und auf eine HTML-Konfiguration setzt.

Tooltip.js - A basic mouseover tooltip script

Dementsprechend können DOM-Elemente per data-Attribut mit der Tooltip-Funktionalität versehen werden. Anschließend wird noch ein Tooltip-Text benötigt, der aus dem entsprechenden title-Attribut gelesen wird. Über einen JSON-Option-String lassen sich einzelne Tooltip-Elemente zudem anpassen.

Weiterlesen...