Tag: entwicklung

201419Aug

PlayCanvas: WebGL-Game-Engine für HTML5/JS-Games

Auch wenn sich in Sachen JavaScript-3D-Engines THREE.js inzwischen zum Platzhirsch gemausert haben dürfte, kann es nicht schaden, Alternativen auszuprobieren. Die im April 2011 gestartete WebGL-Game-Engine PlayCanvas ist Mitte diesen Jahres bei GitHub als Open-Source-Projekt unter der MIT-Lizenz veröffentlicht worden. Im Gegensatz zu THREE.js kommt PlayCanvas gleich noch mit einer integrierten Physik-Engine, mit der sich Rigid Bodies, Joints und auch Fahrzeuge umsetzen lassen.

PlayCanvas - 3D HTML5 Game Engine

Natürlich sind auch die Grundfunktionalitäten einer Game-Engine in PlayCanvas vertreten: 3D-Model Loading, Shadow Mapping, Post-Effekte, Keyframes, Skeletal Blending, Skinning, Audio-Integration sowie Support für sämtliche Eingabegeräte (Maus, Tastatur, Touch, Gamepad, Leap Motion) sind in PlayCanvas integriert. Weiterhin steht ein Entity-Component-System zur Verfügung, mit dem sich im Szenengraph sehr leicht Objekte hinzufügen lassen. Ein Beispiel:

  • var game = new pc.fw.Application(canvas, {});
  • game.start();
  •  
  • var cube = new pc.fw.Entity();
  • game.context.systems.model.addComponent(cube, {
  • type: "box"
  • });
  •  
  • game.context.root.addChild(cube);

Weiterhin steht mit dem "PlayCanvas Designer" ein Echtzeit-Editor zur Verfügung, in den 3D-Modelle per Drag 'n' Drop importiert werden können und auch Änderungen in einem kollaborativen Projekt direkt für andere Teilnehmer sichtbar werden.
Demos von bestehenden PlayCanvas-Projekten finden sich hier.

201418Aug

Dominus: Skript für einfache DOM-Manipulationen

Moderne Webbrowser bieten mit querySelector, querySelectorAll oder dem className-Attribut schon native Wege an, um DOM-Strukturen auszulesen und zu verändern. Ein paar erweiterte Funktionalitäten wie Chaining oder etwa "find()", "findOne()", "prev()", "next()", "html(), "text()", "attr()" und Event-Zuweisungen per ".on()" können aber nicht schaden. Hierfür bietet sich eine minimalistische Bibliothek wie Dominus an, die genau wie jQuery die Sizzle-Engine für CSS-Selektoren verwendet.

Sizzle CSS Selector Engine

Dominus versteht sich daher als unkomplizierte Erweiterung zu nativen DOM-Funktionen und bietet dennoch die Flexibilität von neuere JavaScript-Methoden: Elemente, die mit Dominus ausgelesen werden, sind als Array verfügbar und daher können Transformationen wie ".filter()", ".forEach()" oder ".filter()" weiterhin genutzt werden.
Wer auf das beliebte Dollarzeichen ($) von jQuery nicht verzichten möchte, erhält mit dem Skript Cash ein Pendant zu Dominus, das allerdings die $-Funktion für den Aufruf verwendet.

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.

201330Dez

Web 3.0: JavaScript-Frameworks und die Zukunft

Die Überschrift wurde absichtlich mit dem Buzzword "Web 3.0" versehen, da die "Versionsnummer des Webs" häufig als Synonym für die Zukunft des Internets gebraucht wird und die Bezeichnung den Kern dieses Artikels trifft: Es geht nicht um das Web 3.0 in seiner Gesamtheit, also um künstliche Intelligenz und Ubiquitous Computing, sondern um den Beginn einer neuen JavaScript-Ära. Während die Bezeichnung "Web 2.0" im Bezug auf JavaScript die bisherigen JavaScript-Frameworks und damit vor allem jQuery kennzeichnet, lässt sich in 2013 ein Umschwung im Bereich der Webentwicklung erkennen, der durch neue Ansätze wie MVC-Frameworks oder Node.js geprägt ist. Die jQuery-Epoche ist zwar noch allgegenwärtig, doch mit der stärkeren Verbreitung moderner Webbrowser und HTML5/CSS3 sowie ECMAScript 5 bzw. 6 wird sich das in Zukunft ändern.

JavaScript und Webstandards seit 2009

Die Grafik soll in etwa veranschaulichen, wie die Entwicklung von Webstandards und JavaScript-Frameworks seit 2009 vorangeschritten ist. ECMAScript 6 alias "Harmony" soll Ende 2013 seinen finalen Status erreichen. Bibliotheken wie MooTools, Prototype oder Dojo wurden einst entwickelt, um das Schreiben von JavaScript-Anwendungen einfacher zu machen und eine Website leichter mit Besonderheiten ausstatten zu können. Dazu zählten hauptsächlich Animationen und der Umgang mit Ajax, was JavaScript schließlich zum Durchbruch verhalf. Auch heute sind die Features aktueller Frameworks noch immer essenziell, wenngleich sich die Verteilung und Popularität der verschiedenen Bibliotheken etwas geändert hat. Die obige Grafik zeigt die Beliebtheit der JavaScript-Frameworks und jQuery dürfte heute, also Ende 2013, der klare Liebling im Bereich der Ajax- und DOM-Frameworks sein.

Weiterlesen...
201330Dez

JavaScript: Transpiler, Module Loader und Polyfills für ES6

Zum Jahresende noch ein nützlicher Link für ES6-Interessierte: Addy Osmani hat bei GitHub ein Repository veröffentlicht, das interessante Tools für ECMAScript 6 beinhaltet. Neben Transpilern, also Code-Umwanderln, welche ES6-Syntax in ES5-Syntax konvertieren und damit ausführbar machen, finden sich auf der Seite weitere Tools für die Arbeit mit dem neuen JavaScript-Standard.

JavaScript - An aggregation of tooling for ES6

So stehen Grunt-Tasks bereit, mit denen sich das Transpiling automatisiert ausführen lässt. Auch Polyfills für Module Loader, mit denen sich ES6- und AMD-Module verwalten und erzeugen lassen, sind aufgeführt. Weiterhin gibt es Lückenfüller für Weakmaps, Promises, Reflections und einige String-Funktionen (z.B. startsWith oder endsWith). Abgerundet wird die Sammlung durch ES6-Code-Generatoren und Links zu weiterführenden Slides über ES6 und die Zukunft von JavaScript.