Tag: javascript

jQuery: Native JavaScript-Äquivalente zu Funktionen

Frameworks wie jQuery oder MooTools zeichnen sich vor allem durch ihre einfache und intuitive Schreibweise aus. Hinter den Framework-Funktionen stecken meist komplexere Mechanismen, da Elemente mit speziellen Eigenschaften ausgestattet werden. Manche Funktionalitäten lassen sich aber mittlerweile auch sehr leicht nativ umsetzen, wodurch die Performance erhöht werden kann. Dieser Aspekt ist gerade bei mobilen Geräten sehr wichtig, da hier die Qualität einer WebApp durch übermäßige jQuery-Operationen schnell sinken kann.
Lee Brimelow von Adobe hat in einem Beitrag ein paar jQuery-Funktionen aufgezeigt, die in aktuellen Browsern mit nativen JavaScript-Funktionen ersetzt werden können.

In der Aufzählung finden sich so die Äquivalente für Selektoren, DOM-Manipulationen und CSS-Änderungen, wie zum Beispiel:

• jQuery:
• $(document.body).append("<div id='myDiv'><img src='im.gif' /></div>");
•  
• JavaScript:
• var frag = document.createDocumentFragment();
•  
• var myDiv = document.createElement("div");
• myDiv.id = "myDiv";
•  
• var im = document.createElement("img");
• im.src = "im.gif";
•  
• myDiv.appendChild(im);
• frag.appendChild(myDiv);
• document.body.appendChild(frag);

Sicherleicht ist die jQuery-Syntax kompakter, aber die native Schreibweise lässt sich einfach in einer Funktion verpacken und wenn es um Performance geht, sollten die integrierten Fähigkeiten des Browsers auf jeden Fall ausgenutzt werden. Wer wissen möchte, welcher Browser neuere Selektoren wie "querySelectorAll" unterstützt, kann dies auf CanIUse.com nachschlagen.
Lee Brimelow hat übrigens auch Benchmarks aufgestellt, in denen der Unterschied von jQuery zu nativen Funktionen deutlich wird.

X-Tag: JavaScript-Polylib für Web Components

Im Dezember letzten Jahres hatte ich über das Web UI berichtet, einer User Interface-Bibliothek für Google Dart, die von Web Components Gebrauch macht. Bei den Web Components handelt es sich um eine sehr interessante Methode, um dynamische HTML-Bausteine zu erzeugen und wiederzuverwenden. So lassen sich also eigene Komponenten erstellen, die mit HTML, CSS und JavaScript ausgestattet werden können.
Die Web Components befinden sich noch im Standardisierungsprozess des W3C und stehen aktuell nur in Google Chrome zur Verfügung. Dennoch gibt es seit einiger Zeit schon diverse Polyfills, wie beispielsweise X-Tag von Mozilla.

Bei X-Tag handelt es sich um eine kleine JavaScript-Bibliothek, die das Verhalten eines Web Components simuliert: So können eigene HTML-Tags definiert werden, die komplette Widgets enthalten können, wie etwa ein Accordion, ein Kontaktformular oder gar eine Kartenansicht. Das Panel-Beispiel zeigt etwa das asynchrone Laden einer HTML-Datei in einen Container. Der X-Tag-Code dazu sieht aus wie folgt:

• <x-panel src="some-page.html"></x-panel>

Es gibt noch weitere Polyfills für Web Components, wie beispielsweise Model Driven Views, die ebenfalls vielversprechend aussehen.

Timbre.js: Klangsynthese mit HTML5 im Browser

Das virtuelle Erzeugen von Tönen durch Synthese ist im Web nicht mehr nur durch Flash (z.B. Audiotool) möglich. Auch HTML5 ermöglicht dank der Web Audio API das Generieren von Wellenformen mittels Oszillatoren. Durch die Frequenzen mehrerer Oszillatoren ist also die Frequenzmodulationssynthese möglich, wodurch sich variierende Töne und Melodien erzeugen lassen. Mit der JavaScript-Bibliothek Timbre.js stehen für den Bereich der Audio-Programmierung komfortable Werkzeuge bereit.

Timbre.js bildet also die Brücke zur Web Audio API und bietet eine einfache Schreibweise an:

• T("sin", {freq:880, mul:0.5}).play();

Das Framework bietet neben dem Erzeugen von Tönen auch etliche Filter (Chorus, Delay, FFT, Equalizer, Phaser, usw.) an. Weiterhin können Audio-Dateien verarbeitet und sogar in Einzelteile (Beat Slicing) zerlegt werden, um sie dann in einer neuen Reihenfolge zusammenzusetzen. Das Beatbox-Beispiel zeigt dieses Szenario.
Auf der Seite der Vorgängerversion v12 finden sich weitere Beispiele.

Superhero.js: Ressourcen für JavaScript-Entwickler

Mittlerweile gibt es ein breites Angebot an digitalen Büchern, Anleitungen und Präsentationen rund um JavaScript. Eine sorgfältig zusammengestellte und aktualisierte Liste mit den wichtigsten Ressourcen dürfte hier für viele Entwickler nützlich sein. Bei der Website Superhero.js handelt es sich um eine solche Sammlung, welche Links zu diversen Hilfestellungen beinhaltet, die sich im Netz finden lassen.

Die Sammlung gliedert sich in 9 Hauptbereiche, die verschiedene Aspekte von JavaScript behandeln: Angefangen bei der Syntax, APIs und Frameworks über Entwurfsmuster und Tools bis hin zu Performance-Tipps und erweiterten Techniken. In der Liste finden sich die unterschiedlichsten Quellen, beispielsweise auch das bewährte eBook "Eloquent JavaScript". Die Sammlung dürfte nicht nur für JavaScript-Einsteiger interessante Links enthalten.

Cytoscape.js: Interaktive Graphen mit JavaScript

Dieses Framework ist zwar schon etwas älter, aber es wurde stetig aktualisiert und bietet auch jetzt noch moderne Funktionalitäten: Mit Cytoscape.js lassen sich Graphen aller Art visualisieren und mit Interaktionen versehen. Das JavaScript-Framework ist ein Ableger des Cytoscape Web-Projekts, das auf Flash basiert. Auch hiermit lassen sich vernetzte Strukturen darstellen und in Echtzeit manipulieren.

Die JavaScript-Version basiert auf einem ereignisgesteuerten Modell mit einer Core-API, die Erweiterungen enthält. Diese wiederum modifizieren die Elemente eines Graphen und senden Änderungen an den Core weiter. Dadurch können auch eigene Plugins und sogar jQuery-Plugins angebunden werden. Auf der Demo-Website findet sich der dazugehörige Beispiel-Code. Der komplette Quelltext steht bei GitHub bereit, wobei noch nicht alle Features der Flash-Version umgesetzt wurden (wie etwa Layouts).

Unreal Engine 3: Erste Demo der HTML5-Version

Erst im März berichtete ich über die Portierung der Unreal Engine 3 in den Webbrowser, die Epic Games zusammen mit Mozilla realisiert hatte. Die HTML5-Demo war allerdings nur Besuchern der GDC 2013 vorbehalten. Seit letzter Woche kann die HTML5-Version der "Epic Citadel" nun auch öffentlich getestet werden. Bei der HTML5-Demo handelt es sich um die dreidimensionale Umsetzung einer mittelalterlichen Burg, die virtuell erkundet werden kann. Um die Demo ausführen zu können, wird ein Nightly Build von Firefox empfohlen, da in dieser Version spezielle JavaScript-Anpassungen enthalten sind, die für einen flüssigen Ablauf der WebGL-Demonstration sorgen.

In den FAQ der HTML5-Demo schreibt Epic Games Genaueres über die JavaScript-Erweiterungen und die unterstützten Browser. Unter Google Chrome läuft die Demo zwar, aber es kommt zu Abstürzen. Unter Safari oder Opera kann die Demonstration derzeit nicht angesehen werden, da die Browser nicht mit der Engine kompatibel sind. Es handelt sich also noch um eine sehr frühe Demo, die aber schon jetzt zeigt, was mit WebGL möglich ist. Erst kürzlich wurde bekannt, dass Microsoft auch in Internet Explorer 11 WebGL unterstützen will.

Min.js: Einfache Bibliothek für Selektoren und Events

Für Offline-JavaScript-Anwendungen oder Webanwendungen, die nicht das volle Paket eines üblichen JavaScript-Frameworks wie jQuery benötigen, kann eine einfache Selektor-Engine hilfreich sein. Im Prinzip lässt sich eine solche Bibliothek relativ unkompliziert umsetzen, wenn man auf moderne JavaScript-Funktionen wie querySelector und querySelectorAll zurückgreifen kann. Auf dieser Basis können dann prototypische Erweiterungen von Standard-Elementen wie "Element" oder "NodeList" genutzt werden, um eine eigene Engine zu bauen. Wie einfach das geht, zeigt unter Anderem Andrew Lunny von Adobe (PhoneGap-Team) eindrucksvoll in einem Video.

Kein Geringerer als Remy Sharp hat genau das in die Tat umgesetzt und eine kleine, kompakte Bibliothek namens Min.js geschrieben, die eben Gebrauch von nativen JavaScript-Funktionen macht und die erwähnten Elemente erweitert. So wird auch das "NodeList"-Element einfach um die forEach-Funktion von Arrays erweitert: Dadurch lassen sich DOM-Strukturen genauso iterieren wie gewöhnliche Arrays.
Min.js ermöglicht DOM-Selektoren durch das "$"-Zeichen und ist gerade einmal 50 Zeilen groß. Die Mini-Bibiliothek dürfte sicherlich für Framework-unabhängige JavaScript-Anwendungen interessant sein.

WebStorm: Intelligente JavaScript-IDE für alle Zwecke

In einem Satz lässt sich die JavaScript-Entwicklungsumgebung WebStorm von JetBrains nur schwer zusammenfassen: Die IDE bietet schlichtweg alles, was das JavaScript-Herz begehrt. Eine integrierte Code-Überprüfung mit Verbesserungsvorschlägen (auch hinsichtlich der Code-Qualität) ist ein sehr interessantes Feature, ebenso wie die völlige Anpassbarkeit des Editors oder die Tools für Refactoring (z.B. TODOs) und Unit Testing (JsTestDriver). Weiterhin bietet WebStorm Support für Node.js, CoffeeScript, TypeScript, Dart, JSLint/JSHint, WebGL, LESS, SASS oder gar ECMAScript Harmony. Zudem wird Zen Coding durch das integrierte Emmet ermöglicht, so dass auch HTML-Code schnell geschrieben ist. Versionierungskontrolle ist natürlich auch möglich, da unter Anderem SVN, CVS und Git unterstützt werden.

Alle Features auf einen Blick finden sich hier. Die IDE sollte wirklich keine Wünsche offen lassen, zumal sie sich in allen Belangen sehr granular anpassen lässt, aber dennoch viele Dinge automatisiert erledigt. Das alles kommt natürlich nicht von ungefähr: Wer mit Visual Studio arbeitet, wird die Erweiterung ReSharper zu schätzen wissen, die ebenfalls von JetBrains stammt und zum unverzichtbaren Werkzeug geworden ist, wenn es um die Entwicklung von On- und Offline-Anwendungen geht.
Interessant ist nun, dass die "Personal License" von WebStorm im Rahmen des Earth Days noch bis zum 22. April 2013 für 26 EUR (zzgl. MwSt.) zu haben ist: Die Verkäufe, die in diesem Zeitraum stattfinden, werden dazu genutzt, den gefährdeten atlantischen Regenwald in Brasilien wiederaufzubauen. Mehr zu der Aktion findet sich im Blog-Eintrag.