Tag: javascript

201417Sep

Breach: Erweiterbarer Webbrowser auf Node.js-Basis

Mit Node.js und Chromium lassen sich die unterschiedlichsten Anwendungen umsetzen und ein Webbrowser liegt daher auf der Hand: Mit Breach steht nun ein erster moderner Ansatz bereit, der die beiden Projekt verbindet. Der Browser-Code besteht dementsprechend aus JavaScript-Modulen, während die Benutzeroberfläche mit HTML und CSS erzeugt wird. Interessant bei dem Browser-Konzept ist die Tatsache, dass es sich bei den Modulen und Node.js-Module handelt, die in Echtzeit installiert und aktiviert werden können. Auch Änderungen am Modul-Code können per Kontextmenü nachgeladen werden, ohne dass der Browser geschlossen werden muss.

Breach - A browser for the HTML5 era

Der aktuelle Stand von Breach kann sich bereits sehen lassen, auch wenn momentan nur die Kernmodule, wie etwa die Tabs, zu den Hauptmerkmalen zählen. Doch der Ansatz könnte sich in der kommenden Zeit zu einer Alternative für Entwickler mausern, da eigene Features schnell und einfach per npm hinzugefügt werden können. Breach steht aktuell leider nur für Mac OS X und Linux bereit, was sich jedoch ebenfalls ändern könnte. Das Projekt basiert auf der ExoBrowser-Plattform und diese lässt sich auch unter Windows kompilieren.
Wer dann noch nicht genug von Node.js hat, sollte sich Node OS ansehen — ein komplettes Betriebssystem, das auf einem Linux-Kernel und Node.js/npm basiert.

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

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.

201429Aug

Marka: Skript für animierte CSS3-Icon-Transformationen

Mit HTML, CSS3 und entsprechenden Stilen lassen sich diverse Symbole erzeugen. Mit etwas JavaScript können dann animierte Transformationen durchgeführt werden, die beispielsweise an ein Klick-Ereignis gekoppelt sind. Wofür solche Transformationen gut sein können, ist beispielsweise in Googles Design Guidelines für das neue Material Design zu sehen. Auf mobilen Geräten können derartige Animationen verwendet werden, um ein verbessertes Verständnis der verschiedenen Navigationsebenen zu ermöglichen.
Mit Marka steht eine kompakte JavaScript/CSS3-Lösung bereit, mit der sich genau solche Animationen erzeugen lassen.

Marka - Beautiful transformable icons

Mit der Bibliothek kommen 36 einfache Icons die per JavaScript animiert werden können. Neben Form-Transformationen können auch Farbübergänge erzeugt werden. Eine genaue Dokumentation findet sich hier und das gesamte Projekt gibt es wieder bei GitHub.

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.