Tag: tutorials

201528Mär

Node.js: Einfacher Webserver mit connect und serve-static

Ich habe das Skript schon seit einiger Zeit im Einsatz und mittlerweile dürfte es auch allgemein bekannt sein, wie sich mit Node.js und den Modulen connect und serve-static einfache Webserver einrichten lassen. Wenn es wirklich nur darum geht, schnell und unkompliziert HTML-, JavaScript- und CSS-Dateien auszuliefern, muss nicht gleich das umfangreiche Express.js-Framework verwendet werden. Mit dem folgendem Setup kann das Vorhaben schneller umgesetzt werden, da die genutzten Module kompakter ausfallen als Express.js.

Zuerst müssen dazu die beiden Module lokal installiert werden:

  • npm install connect serve-static

Anschließend kann der Webserver mit diesem Skript erzeugt werden:

  • var connect = require('connect');
  • var serveStatic = require('serve-static');
  • var http = require('http');
  •  
  • var app = connect().use(serveStatic(__dirname));
  •  
  • http.createServer(app).listen(3000);

Nach dem Start über die Kommandozeile ist der Server dann per http://localhost:3000 erreichbar. Das Skript steht auch als Gist bereit. Wer alternativ nach einer universellen Lösung für statische Webserver unter Windows und Mac OS X sucht, sollte einen Blick auf den Fenix Web Server werfen. Hier wird auch gleich noch eine Benutzeroberfläche geboten, welche per Klick die Verwaltung von mehreren lokalen Webservern und deren Neustart ermöglicht.

201521Jan

JavaScript: Nützliche Einführungen und Tipps für ES6

Die Spezifikationen der sechsten Edition von JavaScript (ECMA-262) wurden im Dezember 2014 aktualisiert und der Webstandard rückt der Fertigstellung ein Stück näher. Im Node.js-Bereich wird ES6 durch io.js noch mehr Beliebtheit erlangen und auch Angular 2.0 wird komplett auf ES6 aufgebaut sein. Wer die zukünftigen Funktionen der Skriptsprache nutzen will, kann dazu schon seit geraumer Zeit den Traceur-Compiler verwenden.
Kürzlich wurden einige interessante Artikel und Hilfestellungen veröffentlicht, die verschiedene Bereiche des Standards beleuchten.

Count Up to Version 6 of JavaScript

So handelt es sich beispielsweise bei count-to-6 um ein Node.js-Modul, mit dem eine interaktive Einführung in die Bereiche von ES6 zur Verfügung steht. Weiterhin empfiehlt sich ein Blick in die folgende Beiträge, die in den letzten Wochen entstanden sind:

Viel Spaß beim Ausprobieren!

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.