Tag: entwicklung

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.

201425Aug

Scraper.js: Screen Scraping per Node.js-Modul

Was für PHP der Simple HTML DOM Parser und für Python Beautiful Soup ist, dürfte für Node.js nun Scraper.js sein: Eine kleine Bibliothek, mit der sich die DOM-Stuktur von Websites auslesen und verarbeiten lässt. Scraper.js kommt mit einem "SimpleScraper", einem "DynamicScraper", einem Router für mehrfache Abfragen und Promises für dynamische Callbacks. Das Modul basiert auf Phantom.js und injiziert jQuery für schnelle DOM-Manipulationen.

Das Node-Modul ist schnell per npm install scraperjs installiert und ein einfaches Scraping lässt sich mit folgendem Snippet durchführen:

  • var scraperjs = require('scraperjs');
  •  
  • scraperjs.StaticScraper.create('https://news.ycombinator.com/')
  • .scrape(function($) {
  • return $(".title a").map(function() {
  • return $(this).text();
  • }).get();
  • }, function(news) {
  • console.log(news);
  • })

Mit dem eingebauten Router lassen sich auch dynamische Seiten auslesen, falls weiterführende Links geparsed werden soll. Weitere Informationen finden sich wieder bei GitHub.

201423Aug

Way.js: Mini-Framework für Zwei-Wege-Data-Bindings

Sie zählen zu den Grundkonzepten von AngularJS und Knockout.js: Zwei-Wege-Data-Bindings, also die Verknüpfung von JavaScript-Daten mit DOM-Elementen, ermöglichen automatische UI-Aktualisierungen und Serialisierungen von Formulardaten. Gerade bei Formularen, die per Ajax übermittelt werden sollen, ist die Kapselung von Daten in JavaScript-Objekten unumgänglich. Mit jQuerys $.serialize() ist zwar das Serialisieren der Formulardaten relativ einfach, aber damit ist noch nicht das Konzept von Zwei-Wege-Data-Bindings abgedeckt. Hierfür bedarf es einem Skript wie Way.js, das ohne Abhängigkeiten auskommt und den gleichen Komfort wie etwa AngularJS in Sachen Data-Bindings bietet.

Way.js - Simple, lightweight, persistent two-way databinding

So genügt es, einem Formular-Element ein entsprechendes Attribut (way-data) zu geben, wodurch die Daten zusätzlich in einem JavaScript-Objekt gehalten werden. Das Ganze lässt sich mit einem weiteren Attribut auch persistieren, also in der localStorage des Browsers ablegen. Mit bestimmten Methoden können Daten aus einem JavaScript-Objekt in ein DOM-Element und umgekehrt übertragen werden:

  • way.dom("#someForm").toStorage();
  • way.dom("#someForm").fromStorage()

Weiterhin sind Watcher möglich, die mit einem Callback verbunden werden können, das ausgelöst wird, sobald sich ein Wert geändert hat. Mit Way.js lassen sich die komfortablen Data-Bindings also auch in Web-Projekten einsetzen, die nicht auf einem MVW-Framework aufbauen.

201422Aug

DeLorean.js: Framework für Flux-Architekturen

Mit React wurde vor einiger Zeit ein JavaScript-Framework von und für Facebook veröffentlicht: Dabei handelt es sich um eine Komponente der Flux-Architektur, die sich als Pattern für Web-Applikationen versteht und bei dem sozialen Netzwerk zum Einsatz kommt. React stellt in der Flux-Architektur einen "View-Controller" dar, der sich bei dem Konzept in den unidirektionalen Datenfluss einfügt — dadurch wird die Business-Logik einfacher als bei einer MVC-Anwendung und die Daten bleiben in allen Bereichen, also auf dem Server und im Client, konsistent.

Flux - Application Architecture for Building User Interfaces

Eine Flux-Anwendung besteht also aus den drei folgenden Bereichen: Dispatcher, Stores und Views, wobei Letztere durch das React-Framework und JSX-Templates repräsentiert werden. Änderungen im Client werden also von einer React-Komponente erkannt und an eine Web-API weitergegeben, die wiederum lokale Stores durch entsprechende Dispatcher aktualisiert, wobei ein Dispatcher dafür sorgt, dass auf eventuelle Callbacks von anderen abhängigen Stores gewartet wird. Wer das Ganze in Aktion sehen möchte, kann sich das Flux Chat Example dazu ansehen.
Eine weitere interessante Anlaufstelle für das Flux-Pattern stellt nun auch das Framework DeLorean.js dar, das nicht nur mit React, sondern auch mit anderen Lösungen, wie etwa Flight.js von Twitter, eingesetzt werden kann. Durch entsprechende Fiddles von DeLorean.js dürfte die Funktionsweise von Flux etwas einfacher zu verstehen sein.

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.