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.

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.