Tag: tricks

Reguläre Ausdrücke: Umfangreiche Anleitung online

Das Entwickeln von regulären Ausdrücken ist essentiell und kann in jeder Programmiersprache zur Herausforderung werden, wenn komplexere Ausdrücke eingesetzt werden müssen. Gerade für Neueinsteiger dürfte das Verstehen und Schreiben von regulären Ausdrücken schwierig sein, da die verschiedenen Zeichenklassen und Quantifizierer nicht sofort ersichtlich sind. Im Netz finden sich bereits etliche Quellen sowie nützliche Tools, die das Testen von Ausdrücken in Echtzeit erlauben.
Eine wirklich umfangreiche und gelungene Anleitung für reguläre Ausdrücke in JavaScript steht jetzt mit dem JavaScript Regular Expression Enlightenment auf TechPro zur Verfügung. Auf dieser Seite wird die komplette Materie anhand von Beispielen analysiert und beleuchtet.

Der Artikel enthält viele interaktive JSFiddle-Bereiche, die einen direkten Einblick in den Aufbau eines Ausdrucks erlauben. Ebenfalls interessant dürfte die Website Debuggex sein, die in dem Beitrag verwendet wird und ähnlich wie Regexper reguläre Ausdrücke visualisiert.
Zusammen mit den interaktiven Beispielen und den grafischen Darstellungen stellt der Artikel insgesamt eine wichtige Quelle dar, die nicht nur für Einsteiger interessant sein dürfte.

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.

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.

AuraJS: Framework für skalierbare JavaScript-Projekte

Viele werden den Entwickler und Chrome-Mitarbeiter Addy Osmani bereits von seinem Blog, seinen eBooks oder seinem TodoMVC-Projekt kennen. Er hat vor einiger Zeit eine sehr interessante Präsentation über skalierbare JavaScript-Anwendungen veröffentlicht, in der er auf verschiedene Aspekte von JavaScript und größeren Projekten eingeht.
Hier geht es vor allem um Entwurfsmuster, Privatisierung, asynchrone Module (AMD) und einer Widget-Architektur. Basierend auf seiner Präsentation ist nun das Framework AuraJS entstanden und steht ab sofort bei GitHub als Open-Source-Projekt bereit.

AuraJS stellt ein skalierbares Framework dar, das im Kern aus dem Mediator-Pattern (publish, subscribe, installTo) besteht und das asynchrone Laden von Modulen durch das Facade-Pattern ermöglicht. Lose Kopplung sowie das Privatisieren von Attributen und Methoden durch das Module- bzw. Facade-Pattern stehen hierbei im Vordergrund. Zudem stellt AuraJS ein Wrapper für jQuery und Dojo dar, wodurch auch DOM-Manipulationen möglich sind:

• aura.core.dom.query('#search_input').attr('title', 'test');
  aura.core.dom.animate('#button', { width: 200, duration: 50 });

Mit den Aura-Todos steht bereits ein AuraJS-Beispiel zur Verfügung, das mit Node.js und Grunt erzeugt werden kann. Die Bibliothek dürfte eine gute Inspiration für zukünftige JavaScript-Projekte mit größerem Anspruch sein.