Tag: entwicklung

201528Sep

StateMan: Standalone-JavaScript-Router für SPAs

Bei heutigen Webanwendungen handelt es sich oft um solche, die aus einer zentralen Seite bestehen und Inhalte per Ajax nachladen: Single-Page-Applications (SPAs) haben den Vorteil, dass gezielt Daten vom Server geholt werden (häufig in Form von JSON/REST) und nicht die komplette Seite neu geladen werden muss (per Roundtrip). Eine derartige Anwendung benötigt allerdings auch ein Konzept für URL-Pfade, damit Lesezeichen zu entsprechenden Seiten gesetzt werden oder URLs kopiert werden können. Für eine derartige Funktionalität ist etwas Aufwand nötig, da die URLs bestimmten Bereichen der Anwendung zugeordnet werden müssen (Routing) und auch die nativen Vor-/Zurück-Funktionen des Webbrowsers berücksichtigt werden müssen.
AngularJS-Entwickler können hierzu das ui-router-Modul einsetzen. Wer hingegen eine Standalone-Lösung sucht, die an ui-router angelehnt ist, sollte sich StateMan ansehen.

StateMan - A tiny foundation that providing nested state-based routing for complex web applications

Dabei handelt es sich um ein kompaktes Framework, das etliche Routing-Funktionen mitbringt. Das Beispiel zeigt die Bibliothek in Aktion. Mit StateMan lässt sich also die komplette Routing-Logik für eine SPA umsetzen und dabei sind natürlich auch verschachtelte URLs inklusive IDs oder eigenen Parametern möglich. Die Referenz gibt Aufschluss über die Funktionen des Skripts.

201526Sep

JavaScript: Erweiterbare reguläre Ausdrücke mit XRegExp

Dass in einer etwas komplexeren Webanwendung reguläre Ausdrücke zum Einsatz kommen, dürfte den meisten Webentwicklern klar sein. Sobald es um Formularvalidierung geht, sind reguläre Ausdrücke unverzichtbar. In der Regel reichen die Bordmittel von JavaScript bzw. ECMAScript 5 aus, um ordentliche Validierungen durchführen zu können. Wer jedoch etwas mehr Komfort benötigt oder nach erweiterbaren regulären Ausdrücken sucht, sollte einen Blick auf XRegExp werfen. Mit dieser Bibliothek dürften keine Wünsche offen bleiben, wenn es um die Arbeit mit den speziellen Zeichenketten geht.

XRegExp - The one of a kind JavaScript regular expression library

XRegExp erlaubt beispielsweise benannte Flags und Back-References, Verkettungen oder gar das Zusammensetzen mehrerer Ausdrücke. Sogar eine forEach-Funktion ist möglich:

  • var evens = [];
  •  
  • XRegExp.forEach("1a2345", /\d/, function(match, i) {
  • if (i % 2) evens.push(+match[ 0 ]);
  • });
  •  
  • // evens -> [2, 4]

Weiterhin stehen verschiedene Erweiterungen für die Bibliothek bereit. XRegExp steht als gewöhnliches Browser-Skript oder auch als NPM-Modul bereit. Bei GitHub findet sich der Code zum Download.

201523Sep

JavaScript: Einführung in React ohne JSX, ES6 und Flux

Für die Umsetzung moderner Webanwendungen eignen sich inzwischen diverse Frameworks und Ansätze. Was die Backend-Architektur angeht, ist die Verwendung einer RESTful-API schon fast selbstverständlich geworden. JavaScript-Frameworks wie AngularJS, Backbone.js oder React eignen sich bestens für REST-Schnittstellen und bieten komfortable Möglichkeiten, was die clientseitige Datenbehandlung angeht. Jedes komplexere MV*-Framework bringt eine gewisse Lernkurve mit sich. Im Fall von React gibt es allerdings mögliche Stolpersteine außer dem Konzept des Frameworks selbst: Entwickler müssen die Flux-Architektur, ES6-Syntax und die ECMAScript-Erweiterung JSX verstehen.

James K. Nelson - Learn Raw React — no JSX, no Flux, no ES6, no Webpack

Wer erst einmal nur React verstehen möchte, ist womöglich mit dem Artikel von James K. Nelson gut aufgehoben. Darin setzt er nämlich eine kleine React-App um, ohne auf ES6 und JSX zurückzugreifen. In der Anleitung werden Daten mittels Template dargestellt und eine React-Komponente wird erstellt. Abschließend wird der App noch ein interaktives Formular hinzugefügt.
Wer also in die Welt von React eintauchen möchte, ist mit dieser Anleitung bestens bedient.

201523Sep

Webentwicklung: Statistiken der Frontend-Tools in 2015

Wer als Webentwickler tätig ist, sollte stets auf dem neuesten Stand sein, was Web-Technologien und künftige Standards angeht. Tatsache ist, dass die Browserhersteller, Konsortien und auch unabhängige Entwickler ständig neue Möglichkeiten in Form von Tools oder Funktionen veröffentlichen, mit denen sich Webanwendungen oder mobile Apps umsetzen lassen.
Der Entwickler Ashley Nolan hat einmal die Tools von unabhängigen Entwicklern unter die Lupe genommen eine kleine Umfrage gestartet, in der es um die Frontend-Tools in 2015 geht. Insgesamt haben über 2000 Webentwickler an der Umfrage teilgenommen, so dass einigermaßen repräsentative Ergebnisse zustande kommen.

The State of Front-End Tooling – 2015

Die Ergebnisse der Umfrage hat er in diesem Artikel veröffentlicht. Bei der Umfrage ging es um verschiedene Tools: CSS-Präprozessoren (LESS, SASS, etc.), Task-Runner (Gulp, Grunt, NPM, usw.), JavaScript-Bibliotheken und -Frameworks, Module-Bundler (RequireJS, Webpack, JSPM, etc.), Testing-Frameworks (Jasmine, Mocha, QUnit, usw.) und sonstige Tools wie Yeoman und Bower. Kurz zusammengefasst lässt sich sagen, dass die Mehrheit auf SASS und jQuery setzt, Gulp mittlerweile Grunt verdrängt hat, AngularJS in vielen Projekten eingesetzt wird und Mocha/Jasmine für Unit-Tests eingesetzt werden.

201515Sep

PostCSS: CSS-Preprocessor für Node.js-Build-Tools

Die moderne Entwicklung von Stylesheets findet heutzutage kaum noch in reinem CSS statt: Dank CSS-Präprozessoren wie SASS, LESS oder Stylus können Variablen, Funktionen (Mixins) und echte Verschachtelungen genutzt werden. Die Tools basieren auf systemspezifischen Bibliotheken und erzeugen den finalen CSS-Code mittels Ruby oder Node.js. Wer das ganze in sein bestehendes Frontend-Tooling integrieren möchte (beispielsweise in Grunt oder Gulp), sollte sich PostCSS ansehen.

PostCSS - Transforming styles with JS plugins

Dabei handelt es sich um ein Node.js-Modul, das laut den Entwicklern 2x schneller arbeitet als libsass, die eigentliche SASS-C++-Bibliothek. PostCSS macht zudem Gebrauch von dem CSS-Transpiler cssnext und ermöglicht so zukunftssicheres CSS. Die Integration des entsprechenden Gulp-Tasks könnte beispielweise so aussehen:

  • gulp.task('css', function () {
  • var postcss = require('gulp-postcss');
  • return gulp.src('src/**/*.css')
  • .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) )
  • .pipe( gulp.dest('build/') );
  • });

Viel Spaß beim Ausprobieren!

201509Sep

ShaderFrog: WebGL-Shader im Browser kombinieren

Für Entwickler von hardwarebeschleunigten Computer- und Browserspielen stellen Shader ein wichtiges Werkzeug dar, wenn es darum geht, besondere Effekte zu simulieren. Dabei stehen Entwicklern Fragment- und Vertex-Shader zur Verfügung, die unterschiedlich vom Grafikprozessor verarbeitet werden. Eine Hürde für angehende WebGL- oder OpenGL-Entwickler kann die dazu benötigte Mathematik sein, da Shader eine gewisse Komplexität aufweisen.
Für WebGL gibt es mittlerweile schon Tools wie das Shader Toy oder die GLSL Sandbox, mit denen sich der Shader-Code direkt im Browser bearbeiten lässt. Eine andere Variante stellt nun ShaderFrog dar, ein browsergestützter Shader-Editor, mit dem sich Shader auch kombinieren lassen.

ShaderFrog - WebGL Shader Editor and Composer

ShaderFrog bietet also die Möglichkeit, gewöhnliche Shader per Code (Basic Shader) oder einen zusammengesetzten Shadern (Composed Shader) aus mehreren Shadern zu erzeugen. Letzteres ermöglicht das Kombinieren bestehender Shader, ohne dass Code eingegeben werden muss. Die Shader können auf der Website ausgewählt werden. In einer Vorschau wird das Resultat des kombinierten Shader-Programms angezeigt. Werte lassen sich per Schieberegler oder Eingabefelder anpassen.
Fertige Shader lassen sich nach THREE.js exportieren. Wer seinen Shader in Unity, iOS oder reinem GLSL nutzen will, benötigt einen Pro-Account. Ein Marktplatz für Shader ist ebenfalls geplant, so dass Entwickler gezielt nach fertigen Effekten suchen können.

201506Sep

AngularJS: Artikel für den Einstieg in Angular 2

Es wird noch eine Weile dauern, bis Angular 2.0 erscheinen wird: Ein offizielles Release-Datum gibt es nicht, es ist von Ende 2015, aber auch von 2017 die Rede. Dennoch können sich interessierte Entwickler schon jetzt mit der kommenden Version des MVW-Frameworks vertraut machen. Auf der neuen AngularJS-Website steht die Alpha-Version zum Download bereit und zudem gibt es verschiedene Einführungen in das Framework.

AngularJS - Superheroic JavaScript MVW Framework

Jetzt wurde noch eine weitere Website von Thoughtram ins Leben gerufen, auf der ausgesuchte und hochqualitative Artikel zum Thema Angular 2.0 bereitgestellt werden. Die Seite trägt den Namen "Exploring Angular 2" und ist bisher in diese Kategorien unterteilt: Getting Started, Dependency Injection, Routing, Views and Rendering und Migration / Upgrade. Die Seite wird zukünftig um weitere Anleitungen ergänzt werden und sollte bei AngularJS-Entwicklern daher einen Platz in den Lesezeichen finden.

201502Sep

Pixi.js: 2D-Render-Engine für WebGL- und Canvas-Spiele

Anfang 2013 wurde die Alpha-Version der Engine veröffentlicht, mittlerweile ist das Projekt ausgereift und hat viele neue Features spendiert bekommen: Mit Pixi.js steht eine Render-Engine zur Verfügung, die auf WebGL oder Canvas zurückgreift und an Adobe Flash/ActionScript angelehnt ist. Die Bibliothek basiert auf dem Scene Graph-Konzept und bietet unter Anderem Touch-Support, Unterstützung von SpriteSheet-Animationen, WebGL-Filter, Blend-Modi und vieles mehr.

Pixi.js - 2D WebGL renderer with canvas fallback

Die Beispiele der Engine zeigen verschiedene Szenarien. Mittlerweile gibt es ein breites Spektrum an Projekten, da sich Pixi.js zu einer soliden Render-Engine für HTML5-Browserspiele gemausert hat. Das Open Source-Projekt steht bei GitHub zum Download bereit.