Tag: javascript

201522Apr

JS.ORG: Subdomain für JavaScript-Entwickler per GitHub

Für JavaScript-Entwickler, die bereits über einen GitHub-Account verfügen, gibt es jetzt eine Möglichkeit, das eigene Github-User-Repository mit einer JS.ORG-Subdomain zu verknüpfen. Auf der Website finden sich die notwendigen Schritte: Im Grunde muss nur die gewünschte JS.ORG-Subdomain dem CNAME-Eintrag des User-Repositories hinzugefügt werden. Ob der gewünschte Domain-Präfix noch frei ist, kann hier eingesehen werden.

JS.ORG - Providing nice and free domains for GitHub Pages since 2015

Ist die CNAME-Datei erstellt und in das User-Repository übertragen worden, muss ein Pull-Request auf das JS.ORG-Repository gemacht werden. Der Entwickler verspricht, den gewünschten CNAME-Eintrag innerhalb von 24 Stunden der Liste hinzuzufügen. Die Domain ist dann aktiv und das User-Repository ist von diesem Zeitpunkt an nicht mehr über *.github.io, sondern *.js.org erreichbar.

201516Apr

Osmosis: Website-Quelltexte verarbeiten mit Node.js

Wer mit Node.js den Quelltext von Webseiten auslesen und verarbeiten möchte, kann dazu beispielsweise das Modul Scraper.js nutzen, das bereits mit ausreichend Funktionalitäten bestückt ist. Neu in diesem Bereich ist das Modul Osmosis, das auf Promises basiert und dadurch Piping ermöglicht. Zudem werden verschachtelte Callbacks überflüssig.

Mit Osmosis lassen sich GET- und POST-Abfragen auf eine URL schicken und anschließend mit verschiedenen Funktionen verarbeiten. Per .find() sind CSS- und XPath-Queries möglich und weiterführende Links können mit .follow() ausgelesen werden. Per .set() lassen sich Informationen in das finale data-Objekt schreiben, das die gewünschten Daten repräsentiert. Das Projekt sollte im Auge behalten werden, denn laut Entwickler wird das Modul um eine Funktionalität erweitert werden, mit der auch dynamisch erzeugter Inhalt von Websites verarbeitet werden kann.

201501Apr

React Native: Native Apps mit React/JavaScript erstellen

Und noch einmal Facebook: Bei den hauseigenen Open Source-Projekten tut sich momentan etwas. Noch steht die Veröffentlichung der eigenen IDE namens Nuclide aus und inzwischen wurde auch das Framework React Native zum Open Source-Projekt gemacht. Damit lassen sich native Apps für mobile Geräte auf Basis von React erzeugen. Derzeit steht nur die iOS-Version bereit, womit sich jedoch schon arbeiten lässt. Installiert wird das Framework per Node.js und auch die App-Entwicklung stützt sich ganz auf die V8-Engine: Zu Beginn läuft ein lokaler Server, auf den die App zugreift, so dass die App bzw. der View bei Code-Änderungen nur per Tastenkürzel neu geladen und nicht neu kompiliert werden muss.

React Native - A framework for building native apps using React

Das Beispiel funktioniert soweit einwandfrei, doch will man komplexere Anwendungen erstellen oder andere React-Widgets benutzen, erfordert es schon tiefer gehende Kenntnisse des Facebook-Frontend-Frameworks. Bei GitHub finden sich schon etliche Beispiele, welche die verschiedenen Komponenten oder gar Spiele demonstrieren.
Insgesamt ist der Ansatz interessant, doch für echte Cross-Plattform-Apps auf JavaScript-Basis empfiehlt sich bis auf Weiteres immer noch Ionic, das auf AngularJS, PhoneGap und Cordova basiert und eigene JavaScript-/CSS-Komponenten bietet. Wer also ohnehin schon mit AngularJS vertraut ist, dürfte mit dem Ionic Framework bestens bedient sein. Auch hier geht die App-Entwicklung dank Node.js und LiveReload extrem schnell von statten.

201528Mär

Nuclide: Facebook-IDE für React, Hack und Flow

Die Entwickler von Facebook bereiten derzeit die Veröffentlichung einer quelloffenen Entwicklungsumgebung (IDE) vor, die den Namen Nuclide trägt und auf GitHubs Atom-Editor basiert. Nuclide wird die volle Unterstützung (Auto-Vervollständigung, Syntaxhervorhebung, etc.) für die Eigenentwicklungen von Facebook enthalten: Dazu zählt zum einen das Projekt Hack, einem Just-In-Timer-Compiler für PHP, der unter Anderem statische Typisierung bietet. Weiterhin wird Flow unterstützt, mit dem statische Typisierung auch in JavaScript möglich wird. Und schließlich unterstützt Nuclide das React-Framework, dem Frontend-Kern von Facebook.

Nuclide - a unified IDE

Man darf gespannt sein, wie Nuclide bei den Entwicklern ankommen wird. Bisher sieht das Projekt vielversprechend aus, auch wenn derzeit nur ein Screenshot verfügbar ist. Es wird sich zeigen, ob es sich wirklich um eine voll ausgestattete IDE handelt, die mit WebStorm mithalten kann — dieser hat sich mittlerweile zum Platzhirsch gemausert und immerhin bietet dieser ebenfalls Support für React und JSX-Templates. Zudem werden Meteor- und PhoneGap/Cordova/Ionic-Anwendungen unterstützt und auch die Entwicklung mit Polymer, TypeScript, Dart, Node.js, ES6, Gulp, Grunt und CSS3 werden wesentlich erleichtert.
Die Open-Source-Projekte von Facebook sind übrigens hier einsehbar.

201516Mär

jQuery: Kurzanleitung für Deferred-Objekte und Promises

Um in JavaScript die sogenannte "Callback Hell" zu verhindern, können sich JavaScript-Entwickler seit jQuery 1.5 dem Deferred-Objekt und damit verbundenen Promises bedienen. Dabei handelt es sich um ein Konzept, mit dem sich asynchrone Programmabläufe besser steuern lassen. Dies kann beispielsweise bei Ajax-Abfragen, Animationen oder Benutzerinteraktionen der Fall sein.

jQuery - Kurzanleitung für Deferred-Objekte und Promises

Zusammen mit dem Deferred-Objekt können also Promises und entsprechende Funktionen wie $.then() und $.when() eingesetzt werden. Weiterhin können Callbacks mit .done() und .fail() ausgeführt werden, nachdem ein Promise aufgelöst (per resolve oder reject) wurde. Um die ganzen Begrifflichkeiten und den Zusammenhang von Deferred-Objekten und Promises besser zu verstehen, können Interessierte einen Blick in die Anleitung von Vasanth Krishnamoorthy werfen. Der Entwickler zeigt hier anhand eines einfachen Beispiels die Funktionsweise von Deferred-Objekten auf. Schließlich wird auch die synchrone Version des Beispiels aufgezeigt, wodurch das Konzept noch besser verständlich wird.

201510Mär

Konva: Framework für HTML5-Canvas-Anwendungen

Die Arbeit mit HTML5 und dem canvas-Element gestaltet sich je nach Anforderung unterschiedlich komplex. Für Browsergames oder grafische Webanwendungen empfiehlt sich der Einsatz einer JavaScript-Bibliothek, die bereits mit grundlegenden Canvas-Funktionalitäten ausgestattet ist. KineticJS dürfte hier der bekannteste Vertreter sein.
Mit Konva steht eine weitere Bibliothek zur Verfügung, die als Fork von KineticJS gestartet wurde. Dabei handelt es sich ebenfalls um eine JavaScript-/HTML5-/Canvas-Bibliothek, die auf die Entwicklung von grafischen Desktop- und Mobile-Anwendungen ausgelegt ist.

Konva - 2D HTML5 canvas framework for desktop and mobile applications

Konva bietet eine objektorientierte API, Verschachtelung von Knoten, Ebenen, Caching, Animationen, Tweens, Drag 'n' Drop, Filter, Selektoren und sogar Kollisionserkennung. Gelungen sind bei dem Projekt auch die Dokumentation sowie die API-Dokumentation. Das Framework kann schließlich auch als Node.js-Modul oder per Bower installiert werden.

201509Mär

TreeQL: Bibliothek für JSON-Abfragen und -Mutationen

Die Arbeit mit JSON-Datenstrukturen gehört fast schon zum Alltag eines Webentwicklers. Der Komplexität sind hier keine Grenzen gesetzt und gerade das Filtern von JSON-Daten kann immer wieder eine Herausforderung darstellen. Bei dieser Aufgabe könnte beispielsweise die Bibliothek TreeQL Abhilfe schaffen, mit der sich JSON-Strukturen durch gezielte Abfragen (Queries) auslesen und verändern lassen.

Wenn beispielsweise folgende Struktur gegeben ist:

  • var data = {
  • people: [{
  • name: "Andrei",
  • age: 28
  • }, {
  • name: "Homer Simpson",
  • age: 60
  • }, {
  • name: "Corina",
  • age: 28
  • }]
  • };

Dann können mithilfe von TreeQL beispielsweise alle Personen mit einem Alter von 28 ausgegeben werden:

  • treeql.query(data, {
  • age: 28
  • }, function(node) {%
  • // 1: node = { name: "Andrei", age: 28 }
  • // 2: node = { name: "Corina", age: 28 }
  • });

Zudem können neben statischen Filtern auch Funktionen verwendet werden, um beispielsweise Berechnungen in die Filterung mit einfließen zu lassen. Schließlich ist es mit der Bibliothek noch möglich, die entsprechenden Datensätze zu verändern: So könnten mit einem Query etwa alle Altersangabe im obigen Beispiel um 2 Jahre erhöht werden.
TreeQL dürfte damit ein interessantes Werkzeug sein, wenn es um die Arbeit mit größeren JSON-Datensätzen geht. Ein ähnliches Projekt stellt JSONSelect dar.

201529Jan

is.js: Micro-Framework für Überprüfungen und Vergleiche

Dass nahezu alles in JavaScript wie ein Objekt behandelt wird, dürfte mittlerweile bekannt sein. Um den genauen Typ einer Variable herauszufinden, ist die Verwendung von "Object.prototype.toString()" nötig. Wer in seinem Projekt nicht unbedingt ein fertiges Framework einsetzt, das bereits mit Methoden zur Überprüfung und Validierung verschiedener Arten ausgestattet ist, kann einen Blick auf das Micro-Framework is.js werfen.

is.js - micro check library

Die Bibliothek ist denkbar einfach zu benutzen und bietet eine große Anzahl an fertigen Routinen zur Überprüfung von Variablen an. Dazu zählen Typ-Überprüfungen, reguläre Ausdrücke, Zeitangaben, Strings, mathematische Vergleiche und User-Agent-Variablen (Gerät, Betriebssystem, Browser, etc.).

Ein paar Beispiele:

  • is.email('test@test.com');
  • is.alphaNumeric('y3s');
  • is.weekend(new Date('07/03/1985'));
  • is.all.even([4, 2, 7]);
  • is.ios()

Mit der Bibliothek lässt sich also unter Umständen viel Zeit sparen. Die Größe der JavaScript-Datei in minifizierter Form beläuft sich auf rund 11 KB.