Tag: werkzeuge

Scrubby: JavaScript-Werte in Echtzeit verändern

Wer sich für Animationen, Spiele und interaktive Grafikanwendungen in HTML/JavaScript interessiert, wird Seiten wie CreativeJS oder die GLSL Sandbox bereits kennen. Für das Erstellen und Bearbeiten von Canvas-Animationen direkt im Browser hatte ich vor einem Jahr den Canvas Animation Playground entwickelt, der das Schreiben von Animationen beschleunigen soll.
Ein interessantes Skript in diesem Zusammenhang stellt Scrubby dar: Damit können die Zahlenwerte von JavaScript-Codes per Schieberegler verändert werden, wodurch sich eine HTML5-Canvas-Anwendung in Echtzeit manipulieren lässt.

Für das direkte Bearbeiten von Animationen im Browser eignet sich Scrubby also hervorragend, da gerade für die Berechnungen von Positionen, Farben und Effekten etliche Anpassungen erforderlich sein können. Ein Skript-Block muss nur mit dem Typ "text/scrubby" gekennzeichnet werden, damit sich Werte interaktive verändern lassen.
Scrubby setzt dafür die ECMAScript-Tools Esprima und Escodegen ein. Bei GitHub findet sich der Quellcode zu Scrubby und eine Roadmap. So sind bereits weitere interessante Features geplant, wie etwa das Verändern von Strings oder das Einblenden eines Farbwählers.

Webentwicklung: Frontend-Paketmanager im Vergleich

Sie heißen Bower, Component oder Volo: Frontend-Paketmanager, die sich dank der Popularität von Node.js immer mehr durchsetzen und Webentwicklern diverse Aufgaben abnehmen. So müssen JavaScript-Bibliotheken und andere Komponenten eines Web-Projekts nicht mehr manuell installiert oder aktualisiert werden, sondern können einfach über eine Konfigurationsdatei definiert werden. Hierbei können Abhängigkeiten festgelegt werden, die dann mit einem Script-Loader wie RequireJS geladen werden können.
Der Entwickler Wil Moore hat sich die Mühe gemacht und bei GitHub eine "Front-End Package Manager Comparison" zusammengestellt, in der die verschiedenen Tools beleuchtet werden.

Das GitHub-Dokument listet unter Anderem die Konfigurationsdateien der Paketmanager auf und gibt Einblick in die Funktionalitäten. Dazu zählen beispielsweise Scaffolding, Bootstrapping, Build Automation oder Script-Loading. Zudem gibt es eine Liste der unterstützten Schreibweisen für Module (AMD, CommonJS, globales Skript). Die Vergleichsmatrix dürfte einen guten Überblick über die bisher existierenden Frontend-Paketmanager geben und Entwicklern damit die Auswahl erleichtern.
Wer nach einer Komplettlösung sucht, mit der sich per Knopfdruck Webprojekte erzeugen und testen lassen, sollte hingegen einen Blick auf Yeoman werfen.

JavaScript: Ein Blick auf moderne Web-Frameworks

Steve Sanderson, der Entwickler von Knockout, dürfte mit seinen Worten die Zukunft von JavaScript-Anwendungen sehr gut beschreiben: Während eine größere Web-Applikation bisher mit Server-Rendering, Ajax-Schnittstellen und etwas jQuery-Code auskam, werden zukünftige Anwendungen geeignete Datenmodelle und ein solides Client-Side-Rendering erfordern. Aus diesem Grund wurden MVW-Frameworks (Model-View-Whatever) wie Knockout, Backbone oder AngularJS ins Leben gerufen. Mit dem TodoMVC-Projekt soll Entwicklern die Wahl des richtigen Frameworks erleichtert werden.
Die Leute von "SoftFinity" haben ein paar interessante Artikel zu dieser Thematik veröffentlicht, in denen sie die genannten Bibliotheken beleuchten.

Die Artikelreihe "The Battle of Modern Javascript Frameworks" zeigt Kernfunktionen, Vor- und Nachteile sowie Community-Support (Stack Overflow, GitHub) der beliebtesten Frameworks auf. Abschließend gibt es ein Fazit. Hier die Artikelreihe im Überblick:

• The Battle of Modern Javascript Frameworks – Part II: Knockout.js
• The Battle of Modern Javascript Frameworks – Part III: Backbone.js
• The Battle of Modern Javascript Frameworks – Part IV: Angular.js
• The Battle of Modern Javascript Frameworks – Part V: Ember.js
• The Battle of Modern Javascript Frameworks – Conclusion

Insgesamt schneidet Knockout dank seiner guten Dokumentation und dem interaktiven Tutorial-System sehr gut ab, wenn es um kleine bis mittlere Projekte geht. Für größere Projekte eignet sich Backbone, wobei es hier keine data-bindings gibt und strenge Konventionen eingehalten werden müssen. Wer Knockout und Backbone vereint haben möchte, greift entweder zu Knockback oder wirft einen Blick auf AngularJS, das ebenfalls viele Funktionen vereint und auf komplexere Projekte ausgelegt ist. Alles Weitere findet sich in der kurzen und dennoch sehr gelungenen Artikelreihe.

Lazy.js: Utilities für JavaScript mit Deferred Execution

Für die Arbeit mit unterschiedlichen Datenstrukturen in JavaScript können Hilfsbibliotheken wie Underscore.js oder Lo-Dash sehr nützlich sein. Gerade wenn es sich um die Verarbeitung von größeren JSON-Datensätzen handelt, dürften die Funktionen der genannten Bibliotheken interessant sein, mit denen sich Arrays, Objekte und Collections schneller verarbeiten lassen.
In diesem Zusammenhang wurde auch das Skript Lazy.js entwickelt, das ähnlich wie Underscore.js arbeitet, aber Sequenzen erzeugt und damit eine verzögerte Ausführung (Deferred Execution) ermöglicht.

Der Vorteil von Lazy.js liegt also darin, dass Iterationen erst beim Aufruf der each-Methode ausgeführt werden und keine Zwischen-Arrays erzeugt werden. Ein Beispiel, bei dem die ersten 10 geraden Quadratzahlen eines Arrays mit 1000 Ganzzahlen ausgegeben werden:

• function square(x) { return x * x; }
• function isEven(x) { return x % 2 === 0; }
•  
• var arr = Lazy.range(1000).toArray();
• var result = Lazy(arr).map(square).filter(isEven).take(100);

Auf der Seite finden sich noch weitere Beispiele, bei denen unter Anderem eindeutige Zufallszahlen erzeugt werden oder die Maus-Koordinaten direkt als Sequenz verarbeitet werden.
Der Quellcode zu Lazy.js findet sich wieder bei GitHub.

Unheap: Übersichtliche jQuery-Plugin-Sammlung

Die Zahl der neu entwickelten jQuery-Plugins dürfte täglich ansteigen. Durch die einfache Architektur ist es sehr einfach, ein jQuery-Plugin zu schreiben. Mittlerweile gibt es bereits große Online-Sammlungen, die in Kategorien unterteilt sind und ein breites Spektrum an Plugins beinhalten.
Eine etwas modernere Auflistung findet sich auf der Seite Unheap: Auch hier wurden die verschiedenen Plugins in Kategorien unterteilt und lassen sich so besser unterscheiden.

Unheap ist sehr gut strukturiert und beinhaltet aktuelle Plugins für alle denkbaren Bereiche. Von Navigationen über UI-Widgets bis hin zu Video-Playern und Galerien. Es gibt eine Suchfunktion und neue Plugins können einfach über ein Formular eingereicht werden.
Weitere Sammlungen dieser Art, die nicht auf jQuery beschränkt sind, wären JSDB.io oder Jster.

Firefox 23: Firefox Developer Tool mit Netzerkmonitor

Die integrierten Entwicklerwerkzeuge, die seit Version 10 in Firefox zur Grundausstattung zählen, bekommen im August mit Version 23 des Browsers ein Update spendiert, in dem auch ein Netzwerkmonitor enthalten sein wird. Wie im Mozilla Hacks-Blog zu lesen ist, wird es zudem einen "Remote Style Editor" geben, mit dem sich eine Seite auch auf mobile Geräten in Echtzeit anpassen lässt. Voraussetzung auf dem Endgerät dafür ist ein installierter Firefox, der etwa für Android vorliegt.

Weiterhin wird es ein "Option Panel" geben, in dem sich bestimmte Tools an- und ausschalten lassen. Auch ein erster Support für SourceMaps wird integriert sein, wodurch sich komprimierter JavaScript-Code in ursprünglicher Form anzeigen und mit Breakpoints versehen lässt. Wer sich selbst einen Eindruck von den Features verschaffen möchte, kann einfach Firefox Aurora installieren und ausprobieren.
Doch nicht nur das Developer Tool von Firefox bekommt Neuerungen: Auch der immer noch unangefochtene Firebug wird stets aktualisiert und erhält mit Version 1.12 ebenfalls interessante Funktionen.

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.