Tag: tutorials

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...
201421Okt

Koa: Node.js-Framework für WebApps auf ES6-Basis

Wer mit Node.js unterwegs ist und eigene Web-Anwendungen oder APIs bauen möchte, wird an Express.js oder zumindest Connect nicht vorbeikommen. Die Frameworks bieten alles, was für einfache und auch komplexe Server-Anwendungen notwendig ist. Das Team hinter Express.js hat nun ein weiteres Node.js-Framework namens Koa veröffentlicht. Das Interessante daran: Es kommt fast ohne Callbacks aus und basiert auf ECMAScript 6, was mit der --harmony-Option aktiviert werden kann.

Koa - next generation web framework for node.js

In einem ersten Tutorial geben die Koa-Entwickler Einblicke in die wichtigen Konzepte von ES6, auf denen Koa aufbaut. Dazu zählen Generator-Funktion, for-of-Schleifen und auch Thunks. Die Grundidee hinter diesen Techniken besteht darin, die Ausführung des Codes schrittweise und dennoch asynchron ablaufen zulassen. Zudem können über Thunks Callback-Rückgabewerte nach außen gereicht werden, wodurch wiederum gekapselte Funktionen möglich werden, die einem Teilbereich zugeordnet sind. Man darf also gespannt sein, denn schon jetzt versprechen Thunks einen Weg aus der Node.js-Callback Hell.

UPDATE
Mittlerweile wurde auch Teil 2 des Tutorials veröffentlicht.

201418Okt

Node.js: Desktop-File-Player auf Node-Webkit-Basis

Mit dem Node-Webkit-Projekt lassen sich ähnlich wie mit Mozillas XULRunner Desktop-Anwendungen für Windows, Mac OS X und Linux erstellen und dabei mit HTML, CSS und JavaScript entwickeln. Das Node-Webkit erlaubt die Ausführung von Node.js-Skripten, wodurch schnell und einfach funktionsfähige Desktop-Apps erzeugt werden können. Mit Gravit.io steht beispielsweise ein erster Vektor-Editor zur Verfügung und mit dem Node-Webkit File Player gibt es nun ein weiteres interessantes Projekt, mit dem diverse Dateitypen wie etwa TXT, LOG, JSON, MD, MP3, MP4, PNG oder JPEG "abgespielt" werden können.

Node-Webkit File Player - A File player for your desktop

Das Projekt dürfte eine gute Inspirationsquelle für eigene Desktop-Anwendungen sein. Es basiert neben Webkit auf den bewährten Frameworks Express und AngularJS. Das Scaffolding übernimmt der Generator slush-wean und alle weiteren Infos finden sich in dem Blog-Beitrag. Der Entwickler hat noch einen weiteren Beitrag verfasst, in dem es allgemein um erste Apps mit Node-Webkit geht.

201421Sep

React Starter Kit: Einstieg für das Facebook-Framework

Das Frontend-Framework React dürfte mittlerweile in aller Munde sein. Zusammen mit AngularJS zählt es zu den Next-Gen-JavaScript-Frameworks, die mit MVC-Konzepten auskommen oder gar darüber hinausgehen, wie es Facebook mit seiner Flux-Architektur zeigt.
Die neuen Frameworks sind durch ihre Komplexität nicht gerade leicht zu verstehen, weshalb es bereits diverse Bücher und Tutorials gibt. Für React gibt es jetzt bei GitHub das React Starter Kit, das den Einstieg erleichtern soll.

React - A JavaScript library for building user interfaces

Dabei kommen moderne Techonlogien zum Einsatz: Neben der eigentlichen React.js-Bibliothek zählen Gulp, Webpack, BrowserSync und Bootstrap zu den Bestandteilen des Starter Kits. Auch der Karma Test Runner ist mit an Bord, der schon in AngularJS zur Grundausstattung gehört, um Unit Tests mit Jasmine durchzuführen.
Das Skeleton des React Starter Kits ist leicht verständlich und dürfte für viele Einsteiger einige Hürden nehmen, da gerade die Komponenten sowie die Verwendung von JSX-Templates am Anfang eine Herausforderung darstellen können.

201430Aug

JavaScript: Angular und React/Flux im Vergleich

Mittlerweile bieten sich für JavaScript etliche Frameworks und Lösungen an, mit denen sich eine Webanwendung umsetzen lässt. Gerade AngularJS und Facebooks React/Flux bieten durchdachte Funktionalitäten, die auf größere WebApps ausgelegt sind. Die Auswahl dürfte hier schwer fallen, da sich die Komponenten von React und Directives von AngularJS sehr ähnlich sind. Beide Konzepte zeichnen sich durch Zwei-Wege-Bindings und der einfachen Verknüpfung mit DOM-Elementen aus. React erlaubt zudem JSX-Templates, die das direkte Einbinden von HTML-Markup erlauben.

AngularJS - Superheroic JavaScript MVW Framework

Die Entscheidung für Components, Dispatcher und Stores oder Directives, Services und Controller kann durch die Betrachtung von direkten Code-Beispielen vereinfacht werden. Mittlerweile gibt es hierfür schon gute Ansätze, beispielsweise das bekannte TodoMVC-Projekt, das bei der Auswahl eines MV*-Frameworks behilflich sein soll.
Weiterhin gibt es von Pete Hunt bei Quora einen hilfreichen Artikel, bei dem AngularJS und React gegenübergestellt werden. Auch der Beitrag von Christian Alfoni zeigt mögliche Fallstricke der beiden Frameworks auf, wobei hier ein Backbone-Projekt die Basis darstellt.

201427Aug

JavaScript: Black Box Driven Development als Grundlage

Konzepte wie private Methoden oder Information Hiding sind in JavaScript nicht sofort ersichtlich, aber mit den richtigen Design Patterns sind auch diese Bereiche einfach zu bewerkstelligen. Das Module Pattern hat sich hierfür schon seit langer Zeit bewährt und eigentlich sollte es mittlerweile zum Standard geworden sein, da es gegenüber der Prototype- und Konstruktor-Methodik via new nur Vorteile bietet: Kapselung, private Methoden und ein Interface-Objekt, das nach außen gereicht wird und später beliebig erweitert werden kann. Eine echte Vererbung ist in JavaScript in der Regel nicht notwendig, denn es gilt: Composition over inheritance. So können bestehende Pseudo-Klassen, die auf dem Module Pattern aufbauen, instanziiert und schließlich erweitert werden.

Black Box Driven Development in JavaScript

Dass dieses Entwurfsmuster als Grundlage für JavaScript-Projekte dienen sollte, ist auch bei Mozilla bekannt. Hier wird die Bezeichnung "Black Box Driven Development" gewählt und im entsprechenden Artikel werden anhand von einfachen Code-Beispielen die Vorteile des "Revealing Module Pattern" aufgezeigt.

201426Aug

ECMAScript 6: Vergleich der neuen Funktionen mit C#

Zwei Programmiersprachen in einem Vergleich gegenüberzustellen ist immer etwas schwierig, vor allem wenn eine der Sprachen aus der Browser-Welt stammt und die Andere aus der Windows- und Server-Welt. Dennoch zeigt der Artikel von Marcell Spies interessante Vergleiche der neuen ES6-Funktionen und C# auf. Der Beitrag dürfte vor allem für C#-Entwickler interessant sein, da es zu fast jedem JavaScript-Feature ein entsprechendes C#-Snippet gibt.

ECMAScript 6 - Vergleich der neuen Funktionen mit C#

Aber auch für Web-Entwickler, die sich mit den neuen Funktionen von ECMAScript 6 vertraut machen möchten, dürfte der Artikel einen Blick wert sein: Die neuen Funktionen des JavaScript-Standards werden durch einfache Code-Snippets beleuchtet, angefangen bei Klassen und Modulen über Block Scopes und Rest-Parametern bis hin zu Lamdba-Operatoren, Generator-Funktionen und Promises. Der Beitrag dürfte also einen Platz in den Lesezeichen finden, wenn es um weitere Tipps für ES6 gibt.

201421Aug

AngularJS: Styleguide und dokumentiertes Lern-Projekt

Wer sich mit der Materie von AngularJS vertraut machen möchte, findet auf der Website des Frameworks schon sehr gute Anlaufstellen, darunter interaktive Tutorials und Videos. Da sich die Bibliothek langsam, aber sicher zum neuen Standard für moderne Web-Apps etabliert, finden sich auch im Netz immer mehr Anleitungen und Boilerplates, die Interessierten Webentwicklern den Einstieg erleichtern sollen. So gibt es mit Angular Motto ein dokumentiertes AngularJS-Lern-Projekt, das auf dem AngularJS Styleguide von Todd Motto basiert.

AngularJS - Superheroic JavaScript MVW Framework

In dem Styleguide finden sich verschiedene "Best Practices" wieder, die sich auch in diversen Stack Overflow-Posts finden. So wird beispielsweise die Verwendung der "controllerAs"-Methode empfohlen, mit der sich Controller-Konstruktoren auf das this-Schlüsselwort beziehen, das automatisch an $scope gebunden wird. Dadurch können die Konstruktor-Methoden für Controller als separate Funktion erstellt werden, wodurch die Verwendung einer anonymen Funktion entfällt:

  • function MainCtrl () {
  • // …
  • }
  •  
  • angular
  • .module("app", [])
  • .controller("MainCtrl", MainCtrl)

Weiterhin finden sich in dem Styleguide noch andere Tipps, wie beispielsweise die Empfehlung von Array.join('') für Templates oder der Verwendung von $scope.$digest anstelle von $scope.$apply, da Letzteres auch im $rootScope einen $digest ausführt, was wiederum mit einem Dirty-Check der $$watchers verbunden ist.
Das "Angular-Motto"-Boilerplate versteht sich nicht direkt als Basis für neue AngularJS-Projekte, sondern als Lern-Projekt, das als Referenz dienen soll. Die verschiedenen Komponenten wie Controller, Directives, Filter und Services sind kommentiert, so dass die Logik in den einzelnen Dateien besser nachvollziehbar ist.
Wer hingegen ein echtes Starter-Projekt sucht, das auch als Grundlage für eine neue Web-App genutzt werden kann, ist mit dem angular-seed bestens bedient.