Tag: tipps

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.

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.