201414Aug

Next-Gen-JS-Frameworks: Pro, Contra und Neuansatz

Sie heißen AngularJS, Backbone.js, Ember.js, Polymer und React: Die Next-Gen-JavaScript-Frameworks, mit denen schon jetzt moderne Webanwendungen und Portale realisiert werden. Die Frameworks bieten in der Regel keine gewöhnlichen Funktionen wie DOM-Manipulationen, Effekte oder Ähnliches, sondern warten mit neuartigen Konzepten für Client-Templates, Bindings und Model-View-Controller-Alternativen auf. Ende letzten Jahres hatte ich einen Artikel darüber verfasst, wie sich die Welt der JavaScript-Frameworks in den kommenden Jahren verändern wird.

Google Trends - angularjs, knockoutjs, ember js, backbone.js

Auch gibt es bereits ausführliche Vergleiche der Next-Gen-Frameworks, in denen die Bibliotheken beleuchtet und mit einem Fazit versehen werden. Im Blog von "&yet" findet sich nun ein aktueller "Opinionated Rundown of JS Frameworks", in dem auch React und Polymer betrachtet werden. Neben Pros und Contras stellen die Entwickler am Ende des Artikels schließlich ihr eigenes Framework Ampersand.js vor, das die genannten Punkte verbessern will. Ob sich das "highly modular, loosely coupled, non-frameworky" Framework durchsetzen wird, dürfte sich bald herausstellen.
AngularJS erfreut sich immer größerer Beliebtheit und inzwischen gibt es mit Ionic sogar schon eine PhoneGap-/Cordova-Erweiterung, die auf AngularJS basiert und eine solide Basis für native Smartphone-Apps darstellt, die mit JavaScript entwickelt werden können.

201413Aug

JavaScript: Schlüsselwort 'this' übernehmen mit bind()

Manchmal gibt es Situationen in JavaScript, in denen das Schlüsselwort "this" in einem anderen Kontext überschrieben wird, ohne dass dies gewünscht ist. Ein klassisches Beispiel dafür sind Event-Listener, bei denen sich "this" nach dem Binden des Events auf das Listener-Scope und nicht mehr auf das gewünschte Objekt bezieht:

  • function a() {
  • this.abc = 123;
  •  
  • this.func = function(event) {
  • alert(this.abc);
  • };
  •  
  • return this;
  • }
  •  
  • var b = a();
  •  
  • document.querySelector("#btn").addEventListener("click", b.func);

In dem Beispiel wird beim Klick auf die Schaltfläche mit der ID "btn" also nicht etwa "123" ausgegeben, sondern "undefined". Das Problem mit dem "this"-Schlüsselwort erstreckt sich natürlich noch auf weitere Bereiche, wie beispielsweise asynchrone Ajax-Callbacks. Der Entwickler Krasimir Tsonev hat in diesem Beitrag das Problem noch einmal beleuchtet und den entsprechenden Lösungsansatz inklusive Polyfill für ältere Browser vorgestellt: Die native JavaScript-Funktion Function.prototype.bind(). Hiermit lässt sich der Kontext bzw. das Scope einer Funktion neu definieren und somit kann auch "this" an anderen Stellen genutzt werden, ohne eine Hilfsvariable "self", "that" oder Ähnliches erstellen zu müssen. Das obige Beispiel kann also mit dem Hinzufügen von ".bind(this)" korrigiert werden. Die entsprechende Zeile sieht dann aus wie folgt:

  • document.querySelector("#btn").addEventListener("click", b.func.bind(this));

Die Problematik von Event-Listenern und "this" wird übrigens auch mit ES6 und den Arrow Functions verschwunden sein.

201412Aug

CodeLobster: Vielseitiger Editor für PHP und JavaScript

Das Entwickeln von Web-Anwendungen ist inzwischen zu einem komplexen Prozess geworden, da Projekte sehr umfangreich werden können und es etliche Bibliotheken mit eigener Syntax gibt. Ein einfacher Text-Editor reicht in diesem Fall nicht mehr aus. Wer auf der Suche nach einem kostenlosen Editor für Windows ist, der unter Anderem auch PHP unterstützt und zudem eine Alternative zu Aptana oder NetBeans sucht, könnte einen Blick auf CodeLobster werfen. Hierbei handelt es sich um einen ausgereiften Code-Editor mit den gängigen IDE-Features wie Syntaxhervorhebung, Autovervollständigung oder kontextsensitive Hilfe.

CodeLobster - Vielseitiger Editor für PHP und JavaScript

Die kostenlose Version des Editors ist portabel und kann direkt gestartet werden. Enthalten sind Editor-Funktionen für PHP, JavaScript, CSS und HTML. Sollte die freie Version nicht ausreichen, kann für 39,95 USD die "Lite"-Version genutzt werden, die weitere Funktionalitäten wie SASS, LESS, Code-Snippets, Versionierungssysteme und einen SQL-Manager bietet. Hier findet sich ein Vergleich der verschiedenen Versionen.

201411Aug

ECMAScript 6: Playground-Projekt zum Experimentieren

Für die nächste Version von ECMAScript, also ES6, gibt es mittlerweile diverse Tools und Artikel, die den Einstieg in die Zukunft von JavaScript etwas erleichtern. Neben Addy Osmani hat mittlerweile auch Karma- und AngularJS-Entwickler Vojta Jina bei GitHub ein Repository erstellt, das sich um ES6 dreht: Der ES6++ Playground stellt ein leeres Projekt dar, mit dem sich der kommende JavaScript-Standard direkt ausprobieren lässt. Traceur und RequireJS sind unter Anderem integriert, um die entsprechenden Funktionalitäten von ES6 zu simulieren.

ECMAScript 6 - Harmony

ECMAScript 6 wird Module unterstützen, Polymorphie und etliche weitere Funktionen, die aus anderen Programmiersprachen bekannt sind. Das "++" im Titel des ES6++ Playgrounds steht für zusätzliche Features, die nicht in den Spezifikationen enthalten sind, aber vom AngularJS-Team für die eigene Entwicklung eingesetzt werden. Dazu zählen Meta Data Annotations und Type Annotations. Durch Letzteres wird also zum Beispiel Folgendes möglich:

  • function request(url: String, data: Object, callback: Function) {
  • // …
  • }

Das GitHub-Repository basiert auf Node.js sowie dem Task Runner Gulp.js. Viel Spaß beim Ausprobieren von ES6.