Tag: nodejs

201628Jan

Nativefier: Native Electron-Apps per Kommandozeile

Ich hatte bereits über ein Tutorial sowie UI-Komponenten für das Chromium-Framework Electron berichtet. Damit lassen sich native Desktop-Anwendungen für Windows, Mac OS X und Linux auf HTML- und JavaScript-Basis erstellen. Wer es besonders einfach möchte, kann jetzt ein Node.js-Package namens Nativefier verwenden. Damit lassen sich mit einem Befehl per Kommandozeile Electron-Apps aus Web-URLs erzeugen.

Nativefier - Wrap any web page natively without even thinking, across Windows, OSX and Linux

Nativefier lädt das aktuelle Electron-Paket herunter und erzeugt die notwendigen Dateien, je nach Plattform. Um beispielsweise Google Maps in eine Electron-App zu packen, ist lediglich folgender Befehl nötig:

  • $ nativefier maps.google.com

Im "resources"-Verzeichnis befindet sich neben den spezifischen JavaScript-Dateien eine generierte nativefier.json, in der die Einstellungen abgelegt sind. Hier sind verschiedene Optionen für die App möglich, wie etwa die Fenstergröße oder die Einstellung des Hauptmenüs. Auf der GitHub-Seite finden sich gesonderte Anleitungen für die verschiedenen Betriebssysteme, um eine komplette Anwendung samt Icon zu erstellen.

201624Jan

X-Ray: Moderner Web-Scraper für Node.js

Dokumente einlesen und spezifische Daten ausgeben — das ist der Zweck von Screen-Scraping. Web-Scraper ermöglichen diese Funktionalität also für HTML-Dokumente und DOM-Elemente. Für Node.js gibt es bereits diverse Screen-Scraper wie Osmosis oder Scraper.js. Etwas mehr Komfort ist mit X-Ray möglich. Mit dem Node.js-Scraper lassen sich beispielsweise auch Paginierungen einbauen.

X-Ray - The next web scraper

Die Bibliothek bietet einfache Selektoren, um DOM-Elemente zu durchsuchen. Unterstützt werden Tags, Klassen, Attribute oder der Inhalt eines Elements. Zudem erlaubt X-Ray Delays und Throttling, wodurch Ajax-Inhalte ausgelesen werden können. Hier ein Beispiel-Snippet für ein einfaches Scraping:

  • var xray = require('x-ray');
  • var x = xray();
  •  
  • x('https://dribbble.com', 'li.group', [{
  • title: '.dribbble-img strong',
  • image: '.dribbble-img [data-src]@data-src',
  • }])
  • .paginate('.next_page@href')
  • .limit(3)
  • .write('results.json');

Das Ergebnis wird hier in eine JSON-Datei geschrieben, kann aber auch an eine weitere Funktion übergeben und darin verarbeitet werden.

201611Jan

Imba: Neue Web-Sprache für Ruby- und Python-Fans

Wer gerne mit Ruby oder Python entwickelt und bei seiner nächsten Webanwendung verstärkt JavaScript einsetzen möchte, könnte einen Blick auf Imba werfen. Dabei handelt es sich um eine neue Web-Sprache, die nach JavaScript kompiliert und sowohl auf der Client- als auch auf der Serverseite eingesetzt werden kann. Der Compiler kann per npm installiert und anschließend per CLI genutzt werden.

Imba - Create complex web apps with ease

Imba versteht sich als minimalistische Sprache und vereint verschiedene Konzepte, unter Anderem auch Konzepte von React und JSX. Zudem arbeitet es in einer TodoMVC-Beispielanwendung bis zu 10x schneller als React. Die Syntax von Imba ist an Ruby angelehnt und es stehen komfortable Funktionen für die Erzeugung und Manipulation von DOM-Elementen bereit. Auf der Website finden sich diverse Beispiele, bei denen auch der generierte JavaScript-Code eingesehen werden kann. Ein Blick in die Dokumentation dürfte mehr Klarheit schaffen.

201522Nov

PhotonKit: UI-Komponenten für Electron-Apps

Vor ein paar Wochen berichtete ich über ein Tutorial für Electron/AngularJS. Wer mit dem JavaScript-Framework für plattformübergreifende Desktop-Anwendungen experimentieren möchte, kann mit der Anleitung beginnen. Wer zudem fertige HTML/CSS-Bedienelemente für Electron sucht, sollte einen Blick auf PhotonKit werfen.

PhotonKit - The fastest way to build beautiful Electron apps using simple HTML and CSS

Dabei handelt es sich um eine Sammlung verschiedener Komponenten, die für eine Desktop-App erforderlich sein können. Dazu zählen Header/Footer, Navigationen, Buttons, Tabs, Listen, Tabellen sowie eine Icon-Schriftart. PhotonKit könnte also auch als "Bootstrap für Electron" verstanden werden. Das Projekt steht bei GitHub bereit und die CSS-Komponenten liegen im SASS-Format vor.

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!

201515Aug

Update: Node.js-Snippets im Überblick

Es gibt seit langem wieder ein Update in eigener Sache: Für meine eigenen Node.js-Skripte habe ich eine kleine Übersichtsseite namens Node.js Snippets entwickelt, auf der die Snippets aufgelistet sind. Dort finden sich neben dem eigentlichen Quellcode des Skripts noch Links zur JavaScript-Datei und dem dazugehörigen Gist.

Node.js Snippets Collection

Die Seite stellt eine reine Auflistung dar und versteht sich als fortlaufendes Projekt. Bisher finden sich dort die beiden Skripte SimpleWebServer und AutoReload.

201515Aug

Node.js: Module vergleichen mit NPMCompare

Wer Projekte mit Node.js umsetzt, wird die große Auswahl an fertigen Modulen zu schätzen wissen. Häufig gibt es für eine bestimmte Aufgabe nicht nur ein Modul, sondern gleich mehrere. Welches der vorhandenen Module dann passender für ein Projekt ist, hängt in erster Linie von den Anforderungen ab. Weitere Faktoren könnten beispielsweise Lizenz, letzte Änderungen, Issues, Downloads oder Abhängigkeiten zu anderen Modulen sein. Wenn derartige Faktoren von Modulen verglichen werden sollen, könnte eine Website wie NPMCompare hilfreich sein.

NPMCompare - Easily search and compare between npm packages

Auf der Seite können zwei oder mehrere Node-Module per Suchfunktion in den direkten Vergleich gebracht werden. Anschließend gibt es eine Auflistung verschiedener Bereiche: Versionsnummer, Links, Lizenz, letzte Änderungen, durchschnittliche Veröffentlichung von Versionen, zugehörige Entwickler, Abhängigkeiten, tägliche/wöchentliche/monatliche Downloads, Anzahl der Forks sowie offene Issues und Pull Requests.

201514Aug

Node.js: Seiten automatisch neu laden mit AutoReload

Die Entwicklung einer Webanwendung oder Website beginnt für gewöhnlich in einer lokalen Umgebung. Unabhängig davon, ob serverseitige Skriptsprachen wie PHP, C#, Java oder JavaScript zum Einsatz kommen, müssen das User Interface und HTML-Templates umgesetzt werden. Beim Entwickeln von HTML-Vorlagen stellt das automatische Aktualisieren des Browserfensters eine große Hilfe dar und ist mittlerweile fast selbstverständlich geworden. Dieser Prozess lässt sich auch sehr gut mit Node.js umsetzen.

AutoReload - Browserfenster automatisch aktualisieren

Ich habe dazu das Skript "AutoReload" geschrieben, das einen lokalen Webserver für statische Dateien erstellt und anschließend auf Änderungen von Dateien wartet. Findet eine Dateiänderung statt, wird die entsprechende Seite im Browser neu geladen. AutoReload basiert auf den Modulen connect, connect-livereload, serve-static, tiny-lr und chokidar. Die rund 50 Zeilen Code stehen als Gist bereit. Das Skript wird einfach über die Konsole per Befehl ausgeführt und kann als Argument oder nach dem Start eine Pfadangabe entgegen nehmen, die zum Wurzelverzeichnis der lokalen Website führt.