Tag: javascript

KineticJS: HTML5/JS-Library für Canvas-Interaktivität

Spezielle Bibliotheken für HTML5-Canvas-Anwendungen gibt es mittlerweile in Mengen. Aktuelle Beispiele sind Paper.js oder RPG.js, die jeweils sehr unterschiedliche Ziele verfolgen. Auf die Erstellung von interaktiven Canvas-Anwendungen wurde hingegen das Framework KineticJS ausgelegt, das unter Anderem mit Event-Listenern für Canvas-Objekte aufwertet, die dadurch transformiert werden können. KineticJS kommt mit einem durchdachten Ebenen-System, das aus einer Buffer-, einer Hintergrund- und einer Benutzer-Ebene besteht und sich schließlich zum finalen Resultat zusammenfügt.

Die Bibliothek bietet etliche Funktionen, erfordert aber dennoch Kenntnisse über die Canvas-Technik, da durch die API lediglich Interaktionen vereinfacht werden. KineticJS enthält zudem auch Funktionen für mobile Geräte, so dass auch Touch-Ereignisse eingesetzt werden können.
Wer sich Beispiele des Frameworks ansehen möchte, erhält auf dieser Seite einen guten Eindruck. Übrigens lassen sich HTML5-Animationen inzwischen auch in der Cloud erstellen: Die Plattform Mugeda wäre ein solcher Dienst, der sich aktuell noch in einer Preview-Phase befindet.

jsMorph: Schnelles Micro-Framework für Animationen

In der Welt der JavaScript-Bibliotheken entstehen immer mehr Micro-Frameworks, die auf einen bestimmten Zweck optimiert wurden. Gerade im Bereich der Animationen blühen interessante Skripte wie jsAnim oder $fx auf. Derartige Bibliotheken bieten in der Regel keine eigene Selector-Engine oder ein Event-System. Doch darin kann der Vorteil liegen, wenn lediglich die Animationen benötigt werden und auf Geschwindigkeit sowie Dateigröße geachtet werden muss (besonders bei mobilen Webanwendungen).
Mit jsMorph gibt es eine weitere Bibliothek dieser Gattung und hier hat der Entwickler Wert darauf gelegt, eine möglichst gute Performance mit gleichbleibender Geschwindigkeit der Animationen zu gewährleisten.

Das jsMorph-Framework bietet verschiedene Features wie Chaining, ein Queueing-System, Zeitkorrektur und animierbare Eigenschaften wie Farbe oder Transparenz. Die Zeit sowie die Framerate (FPS) werden automatisch angepasst, so dass eine gleiche Darstellung auf untereschiedlichen Browsern und Geräten bestehen bleibt. Zudem bietet jsMorph eine automatische Konvertierung von Einheiten (Px, Em, %, etc.), wodurch eine hohe Flexibilität gegeben ist.
In den Tutorials finden sich etliche Anleitungen und die Demos sprechen für sich. Derzeit befindet sich die Bibliothek noch in einer Alpha-Version.

Spine Mobile: MVC-Framework für mobile Web-Apps

Mit Spine steht ein kompaktes JavaScript-MVC-Framework für Entwickler zur Verfügung, die nicht den vollen Umfang von Backbone.js benötigen. Wer sich mit MVC in JavaScript noch etwas schwer tut, sollte einen Blick auf Agility.js werfen, da hier das MVC-Entwurfsmuster sehr einfach angewendet und ausprobiert werden kann.
Die Entwickler von Spine.js haben ihr Framework nun auch auf mobile Webanwendungen optimiert und Spine Mobile vorgestellt.

Die Bibliothek setzt auf HTML5, CSS3, Node.js, jQuery, GFX und wahlweise auf CoffeeScript. Mit der "Spine.app" wird ein Grundgerüst erzeugt, auf dem eine Anwendung aufgesetzt werden kann. Die MVC-Architektur eignet sich natürlich nur für Anwendungen, die Benutzereingaben annehmen, verarbeiten und ausgeben. Für mobile WebApps, die auf Smartphones ausgelegt werden müssen, dürfte die mobile Version von Spine also ein interessante Wahl sein.
Auch eine Unterstützung für PhoneGap ist vorhanden, wobei sich dieses Feature noch in einer frühen Phase befindet. Das PhoneGap-Framework gehört inzwischen zu Adobe und hat sich als kostenloses Framework für native Smartphone-Anwendungen bewährt.

JavaScript: Objektorientierte Programmierung verstehen

Dass sich JavaScript und die klassische objektorientierte Programmierung etwas unterscheiden, dürfte inzwischen allgemein bekannt sein. Mit Projekten wie JavaScript++ wird versucht, dem prototypischen Ansatz entgegenzuwirken — das dürfte vor allem für Entwickler interessant sein, die aus einer echten Programmiersprache wie Java oder C++ kommen.
Wer dem (durchaus leistungsfähigen) Pfad der nativen JavaScript-Programmierung folgen möchte, muss sich mit den Gegebenheiten auseinandersetzen und diese verstehen. In JavaScript besteht alles aus Objekten und eine Klassenhierarchie samt Vererbung muss daher auf einem anderen Weg umgesetzt werden. Hierzu gibt es bereits etliche Artikel, aber der Beitrag von Quildreen Motta ist sehr gelungen und lesenswert.

Der Entwickler unterstreicht die reine Theorie mit anschaulichen Darstellungen, welche die Materie verdeutlichen. Für den Artikel wird Grundwissen in JavaScript vorausgesetzt: Der prototypische Ansatz von JavaScript wird detailliert erklärt und anhand von einfachen Code-Beispielen vertieft.

RPG.js: Bibliothek für HTML5/JS-Rollenspiele

Wer Browserspiele mit HTML5 umsetzen möchte, greift am besten zu einem speziellen Framework oder einer Game-Engine. Mit Impact JS, LimeJS oder Cocos2D stehen erstklassige Vertreter dieser Art zur Verfügung und bieten zum Teil sogar schon Level-Editoren.
Auch ein Rollenspiel (RPG) lässt sich theoretisch mit HTML und JavaScript umsetzen, wobei hier mehrere Aspekte erfüllt werden müssen. Eine Basis für ein solches Projekt könnte die Bibliothek RPG.js darstellen, mit der schon ein exemplarisches Spiel realisiert wurde (dieses steht auf der Website zum Download bereit und kann dort auch getestet werden).

Die Bibliothek setzt auf Easel.js und bietet ein Toolkit für einfache 2D-Rollenspiele, bei denen die Level aus Kacheln (Tiles) bestehen. So können mit RPG.js sehr einfach grafische Karten geladen und mit Interaktionen versehen werden. Die Informationen darüber, welche Bereiche auf einer Karte begehbar sind, werden aus einem JSON-Array geladen.
Die Bibliothek sieht vielversprechend aus und befindet sich momentan noch in einer Beta-Phase. Bei den Beispielen und in der API-Dokumentation finden sich weitere Details über die Fähigkeiten der Engine.

Kinetic: jQuery-Plugin für sanftes Bild-Dragging

Wenn auf einer Website eine vergrößerte Darstellung einer Grafik (etwa von einem Produkt oder einem detaillierten Photo) interaktiv eingebunden werden soll, eignet sich eine Drag 'n' Drop-Funktionalität sehr gut dafür. Ein Skript wie die SpryMap erfüllt diesen Zweck. Ähnlich arbeitet das jQuery-Plugin Kinetic, mit dem sich ebenfalls Bildausschnitte mit einer Drag-Funktionalität ausstatten lassen.

Das Skript bietet die Möglichkeit, die Bewegung des verschobenen Bildausschnitts zu beschleunigen und abzubremsen (Acceleration und Deceleration). So wirkt der Effekt etwas sanfter und dezenter. Das Plugin bietet etliche Optionen, die auf der Skript-Website eingesehen werden können. Neben der Möglichkeit, den Bildausschnitt über den Mauszeiger zu verschieben, gibt es auch die Option, den Ausschnitt per Schaltfläche gezielt in eine Richtung zu bewegen.

JavaScript: Boolesche Operationen und 3D-Objekte

Wer mit 3D-Grundobjekten (3D Primitives) in JavaScript arbeiten möchte und dabei auf Boolesche Operationen (Addieren, Subtrahieren, Überschneiden) zurückgreifen will, kann sich die "Constructive Solid Geometry"-Bibliothek CSG.js ansehen. Die Bibliothek basiert auf dem Light.js-Framework und stammt ebenfalls von Evan Wallace, der seit geraumer Zeit mit sehr interessanten Projekten beeindruckt.

Die CSG-Library basiert auf BSP-Trees, wodurch die Verarbeitung von Polygonen sehr sauber funktioniert. Ein Beispiel-Snippet, mit ein Würfel und eine Kugel erzeugt werden:

• var a = CSG.cube({ center: [-0.25, -0.25, -0.25] });
• var b = CSG.sphere({ radius: 1.3, center: [0.25, 0.25, 0.25] });
•  
• // Boolesche Operationen anwenden
• a.union(b)
• a.subtract(b)
• a.intersect(b)

Am Ende der Projekt-Website steht übrigens ein Textfeld bereit, mit dem in Echtzeit JavaScript ausgeführt und die Bibliothek getestet werden kann. Die Dokumentation steht hier bereit.

jQuip: jQuery-Framework in Modulen laden

Was bei MooTools den "Core Builder" und bei der YUI-Bibliothek den "Configurator" darstellt, ist bei jQuery in seiner offiziellen Version derzeit noch nicht möglich: Das Erstellen einer individuell angepassten Code-Basis, die nur ausgewählte Effekte und Klassen enthält. Dadurch verringert sich die Dateigröße der Bibiliothek und Performance-Optimierung von Websites wird zunehmend wichtiger, da die Ladezeiten einer Seite auch die Platzierung in den Suchergebnissen von Google beeinflussen.
Unabhängig vom jQuery-Entwicklerteam wurde inzwischen jedoch eine Möglichkeit geschaffen, mit der sich auch jQuery in Modulen laden lässt. Das jQuip-Projekt erzeugt eine Code-Basis von jQuery, die mit unterschiedlichen Funktionen ausgestattet ist.

Zur Auswahl stehen:

• jquip.js (6.6k)
• jquip.events.js (1k)
• jquip.docready.js (.5k)
• jquip.css.js (2.5k)
• jquip.ajax.js (1k)

Über den jQuip-Builder können die unterschiedlichen Module zusammengesetzt werden. Alternativ kann auch eine eigene Query-Engine verwendet werden, die allerdings nur in modernen Webbrowsern funktioniert.
Auf einer Demo-Seite kann jQuip getestet werden. Man darf gespannt sein, wie sich jQuery in dieser Richtung entwickeln wird, denn auch im offiziellen Entwicklerteam arbeitet man daran, jQuery etwas abzuspecken.