Tag: javascript

201516Mär

jQuery: Kurzanleitung für Deferred-Objekte und Promises

Um in JavaScript die sogenannte "Callback Hell" zu verhindern, können sich JavaScript-Entwickler seit jQuery 1.5 dem Deferred-Objekt und damit verbundenen Promises bedienen. Dabei handelt es sich um ein Konzept, mit dem sich asynchrone Programmabläufe besser steuern lassen. Dies kann beispielsweise bei Ajax-Abfragen, Animationen oder Benutzerinteraktionen der Fall sein.

jQuery - Kurzanleitung für Deferred-Objekte und Promises

Zusammen mit dem Deferred-Objekt können also Promises und entsprechende Funktionen wie $.then() und $.when() eingesetzt werden. Weiterhin können Callbacks mit .done() und .fail() ausgeführt werden, nachdem ein Promise aufgelöst (per resolve oder reject) wurde. Um die ganzen Begrifflichkeiten und den Zusammenhang von Deferred-Objekten und Promises besser zu verstehen, können Interessierte einen Blick in die Anleitung von Vasanth Krishnamoorthy werfen. Der Entwickler zeigt hier anhand eines einfachen Beispiels die Funktionsweise von Deferred-Objekten auf. Schließlich wird auch die synchrone Version des Beispiels aufgezeigt, wodurch das Konzept noch besser verständlich wird.

201510Mär

Konva: Framework für HTML5-Canvas-Anwendungen

Die Arbeit mit HTML5 und dem canvas-Element gestaltet sich je nach Anforderung unterschiedlich komplex. Für Browsergames oder grafische Webanwendungen empfiehlt sich der Einsatz einer JavaScript-Bibliothek, die bereits mit grundlegenden Canvas-Funktionalitäten ausgestattet ist. KineticJS dürfte hier der bekannteste Vertreter sein.
Mit Konva steht eine weitere Bibliothek zur Verfügung, die als Fork von KineticJS gestartet wurde. Dabei handelt es sich ebenfalls um eine JavaScript-/HTML5-/Canvas-Bibliothek, die auf die Entwicklung von grafischen Desktop- und Mobile-Anwendungen ausgelegt ist.

Konva - 2D HTML5 canvas framework for desktop and mobile applications

Konva bietet eine objektorientierte API, Verschachtelung von Knoten, Ebenen, Caching, Animationen, Tweens, Drag 'n' Drop, Filter, Selektoren und sogar Kollisionserkennung. Gelungen sind bei dem Projekt auch die Dokumentation sowie die API-Dokumentation. Das Framework kann schließlich auch als Node.js-Modul oder per Bower installiert werden.

201509Mär

TreeQL: Bibliothek für JSON-Abfragen und -Mutationen

Die Arbeit mit JSON-Datenstrukturen gehört fast schon zum Alltag eines Webentwicklers. Der Komplexität sind hier keine Grenzen gesetzt und gerade das Filtern von JSON-Daten kann immer wieder eine Herausforderung darstellen. Bei dieser Aufgabe könnte beispielsweise die Bibliothek TreeQL Abhilfe schaffen, mit der sich JSON-Strukturen durch gezielte Abfragen (Queries) auslesen und verändern lassen.

Wenn beispielsweise folgende Struktur gegeben ist:

  • var data = {
  • people: [{
  • name: "Andrei",
  • age: 28
  • }, {
  • name: "Homer Simpson",
  • age: 60
  • }, {
  • name: "Corina",
  • age: 28
  • }]
  • };

Dann können mithilfe von TreeQL beispielsweise alle Personen mit einem Alter von 28 ausgegeben werden:

  • treeql.query(data, {
  • age: 28
  • }, function(node) {%
  • // 1: node = { name: "Andrei", age: 28 }
  • // 2: node = { name: "Corina", age: 28 }
  • });

Zudem können neben statischen Filtern auch Funktionen verwendet werden, um beispielsweise Berechnungen in die Filterung mit einfließen zu lassen. Schließlich ist es mit der Bibliothek noch möglich, die entsprechenden Datensätze zu verändern: So könnten mit einem Query etwa alle Altersangabe im obigen Beispiel um 2 Jahre erhöht werden.
TreeQL dürfte damit ein interessantes Werkzeug sein, wenn es um die Arbeit mit größeren JSON-Datensätzen geht. Ein ähnliches Projekt stellt JSONSelect dar.

201529Jan

is.js: Micro-Framework für Überprüfungen und Vergleiche

Dass nahezu alles in JavaScript wie ein Objekt behandelt wird, dürfte mittlerweile bekannt sein. Um den genauen Typ einer Variable herauszufinden, ist die Verwendung von "Object.prototype.toString()" nötig. Wer in seinem Projekt nicht unbedingt ein fertiges Framework einsetzt, das bereits mit Methoden zur Überprüfung und Validierung verschiedener Arten ausgestattet ist, kann einen Blick auf das Micro-Framework is.js werfen.

is.js - micro check library

Die Bibliothek ist denkbar einfach zu benutzen und bietet eine große Anzahl an fertigen Routinen zur Überprüfung von Variablen an. Dazu zählen Typ-Überprüfungen, reguläre Ausdrücke, Zeitangaben, Strings, mathematische Vergleiche und User-Agent-Variablen (Gerät, Betriebssystem, Browser, etc.).

Ein paar Beispiele:

  • is.email('test@test.com');
  • is.alphaNumeric('y3s');
  • is.weekend(new Date('07/03/1985'));
  • is.all.even([4, 2, 7]);
  • is.ios()

Mit der Bibliothek lässt sich also unter Umständen viel Zeit sparen. Die Größe der JavaScript-Datei in minifizierter Form beläuft sich auf rund 11 KB.

201526Jan

Texgen.js: Prozeduraler Texturen-Generator

Wer schnell und unkompliziert mit JavaScript prozedurale Texturen erzeugen will, kann dazu jetzt die Bibliothek Texgen.js von Mr. doob nutzen. Dabei handelt es sich um ein einfaches Canvas-Skript, das mit wenigen Methoden komplexe Muster ermöglicht. Zu den Grundfunktionalitäten gehören Rechtecke, Sinus-Funktionen, Schachbrettmuster, Rauschen und OR-/XOR-Verknüpfungen. Die Textur wird schließlich durch das Aneinanderreihen verschiedener Funktionen generiert, wobei die entsprechenden Ebenen durch Überlagerungen der einzelnen RGB-Pixel-Informationen (Addieren, Subtrahieren, Multiplizieren, Dividieren) zusammengefügt werden.

Texgen.js - Procedural Texture Generator

Der folgende Code ist aus dem "Waves"-Beispiel der GitHub-Seite von Texgen.js entnommen.

  • var texture = new TG.Texture( 493, 200 )
  • .add( new TG.SinX().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinY().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinX().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .mul( new TG.SinY().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .div( new TG.SinX().frequency( 0.02 ).color( 2, 4, 3 ) )
  • .mul( new TG.SinX().frequency( 0.003 ).color( 0.2, 0, 0 ) )
  • .toCanvas();

Eine Dokumentation gibt es in der Hinsicht nicht, wobei der Quellcode des Skripts überschaubar ist und sich daraus die jeweiligen Methoden ablesen lassen.

201521Jan

JavaScript: Nützliche Einführungen und Tipps für ES6

Die Spezifikationen der sechsten Edition von JavaScript (ECMA-262) wurden im Dezember 2014 aktualisiert und der Webstandard rückt der Fertigstellung ein Stück näher. Im Node.js-Bereich wird ES6 durch io.js noch mehr Beliebtheit erlangen und auch Angular 2.0 wird komplett auf ES6 aufgebaut sein. Wer die zukünftigen Funktionen der Skriptsprache nutzen will, kann dazu schon seit geraumer Zeit den Traceur-Compiler verwenden.
Kürzlich wurden einige interessante Artikel und Hilfestellungen veröffentlicht, die verschiedene Bereiche des Standards beleuchten.

Count Up to Version 6 of JavaScript

So handelt es sich beispielsweise bei count-to-6 um ein Node.js-Modul, mit dem eine interaktive Einführung in die Bereiche von ES6 zur Verfügung steht. Weiterhin empfiehlt sich ein Blick in die folgende Beiträge, die in den letzten Wochen entstanden sind:

Viel Spaß beim Ausprobieren!

201519Jan

io.js: Version 1.0.0 des Node.js-Forks mit ES6-Features

Wer mit Node.js arbeitet, wird womöglich schon von io.js gehört haben: Dabei handelt es sich um einen Fork der Node.js-Plattform, der im Juli 2014 begonnen wurde und seit einigen Tagen in der Version 1.0.0 bereitsteht. Der io.js-Code basiert auf Semver, wodurch sich die Versionsnummer in Form von "MAJOR.MINOR.PATCH" zusammensetzt. Der Blog-Beitrag der Entwickler gibt Aufschluss über die Details. Der Node.js-Fork erlaubt die Verwendung von ES6-Features, ohne dass explizit das --harmony-Flag gesetzt werden muss.

io.js - JavaScript I/O

Zu den ES6-Funktionen, die ohne Flags genutzt werden können, zählen also unter Anderem Block Scoping, Collections (Map, WeakMap, Set, WeakSet), Generators, Promises, Symbole, Template-Strings sowie neue String-Methoden. Welche Version der V8-Engine benutzt wird, kann über den Befehl

  • iojs -p process.versions.v8

abgerufen werden. Die Entwickler rufen dazu auf, Module mit io.js zu testen und eventuelle Bugs bei GitHub einzutragen. Das io.js-Projekt versteht sich als Weiterentwicklung von Node.js und auf lange Sicht sollen io.js und Node.js zusammengeführt werden.

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...