Gluon.js & Neutralino - Zwei Newcomer vordern Electron und NW.js heraus

Zwei Newcomer vorderen Electron und NW.js bei Erstellen von JavaScript-Desktopaplikationen heraus. Die beiden neuen Tools erzeugen weit kleinere Applikationen als die eingesessenen Konkurrenten. Anwendungen sind nur wenige MB und nicht mehrere Hundert MB groß. So liefern beide keine Chrome-Runtime mit. Dadurch lässt sich schon ca. 60 MB sparen. Gluon setzt einen bereits installierten Chrome oder Firefox voraus. Neutralino setzt auf die in dem jeweiligen Betriebssystem integrierte Browser-Technologien (z.B. gtk-webkit2 unter Linux). Es kann immer noch clientseitiges JavaScript ausgeführt werden, außerdem bieten beide die Möglichkeit ein Backend anzubinden. Diese Funktionalität ist für viele Anwendungsfälle ausreichend, oft wird wahrscheinlich überhaupt keine Backendfunktionalität benötigt, auch wenn solche Anwendungen dann auch als PWA umgesetzt werden könnten, bevorzugen es manche dennoch diese als Desktop-Anwendung zu vertreiben.

Neutralino

Neutralino verzichten auf eine Node.js Runtime. Es kann noch immer auf die integrierten APIs zugegriffen werden. Im Gegensatz zu Gluon stehen über die Neutralion API viele Desktop-Funktionen zur Verfügung. Deswegen kann oft auf ein Backend verzichtet werden. Dennoch kann über IPC/Websockets ein solches angebunden werden. Das Backend kann in beliebiger Technologie umgesetzt werden, solange diese Websockets unterstützt. Es existieren Beispiele für C++ und Node.js. Anwendungen können über das integrierte neu build Befehl für Windows, Linux und MacOS erstellt werden. Teilweise wird auch bereits ARM64 unterstützt.

Gluon

Gluon ist ein noch sehr neues Projekt. Dennoch hat es bereist sehr viel Aufmerksamkeit erzeugt. Als Backend könne Node, Deno oder Bun verwendet werden. Dabei wird die Anbindung an den Client wie bei Neutralino auch über IPC umgesetzt. Leider verfügt Gluon noch über kein integriertes "build"-Kommando. Beide Tools befinden sich momentan noch in einer frühen Entwicklungsphase und sind deswegen nicht für große Anwendungen geeignet. Auch haben sie das Problem, dass der Entwickler nicht weis, in welcher Umgebung seine Anwendung ausgeführt wird. Wer damit leben kann, sollte den beiden Tool auf jeden Fall einmal anschauen.

Vanta.js - Hintergrund Effekte für Webseiten

Vanta.js ist eine JavaScript-Bibliothek, mit der visuelle Effekte für Websites zu erzeugt werden können. Die Bibliothek verwendet WebGL und die THREE.js Bibliothek, welche auf schwachen Geräten langsam laufen. Vanta.js bietet verschiedene Effekte, darunter Partikelanimationen, Wellenanimationen, Nebel und andere. Die Bibliothek ist einfach zu integrieren, wie man am nachfolgenden Beispiel sehen kann:

<script src="three.r134.min.js"></script>
<script src="vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
  el: "#your-element-selector",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

SBB timeTable

SBB timeTable ist ein Haltestellen-Dashboard mit allen Abfahrten einer beliebigen SBB Haltestelle in der Schweiz. Es handelt sich um ein Demo-Projekt zur Technologie-Erprobung, ist aber voll funktionsfähig. Das Projekt wurde mit Preact in TypeScript erstellt und nutzt Pico.css für das Styling. Die Daten werden mittels SWR direkt von einem API-Endpoint von search.ch geladen, sodass neben dem Hosten des statischen Preact-Builds keine Serverkomponenten involviert sind. Die Illustrationen kommen von unDraw.

Die timeTable kann unter aufgerufen werden timetable.ragersweb.de

zx - Ein Werkzeug für einfachere Konsolen-Scripte in Node.js

Bash-Scripte sind schnell geschrieben, allerdings erschwert die gewöhnungsbedürftige Syntax es, komplexere Skripte zu schreiben. JavaScript ist eigentlich eine perfekte, um Scripte zu schreiben (was das Script im Namen ja bereits andeutet), aber die Verwendung der Node.js-Standardbibliothek ist leider nicht intuitiv. Das zx-Paket, das als Open-Source von Google bereitgestellt wird, stellt nützliche Wrapper für child_process bereit und liefert darüber hinaus einiges an sinvollen Funktionen.

zx kann über npm i -g zx global installiert werden, einzige Vorausetztung ist ein installiertes Node/NPM.

Hier ein einfaches Beispiel-Script:

#!/usr/bin/env zx
await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
    $`sleep 1; echo 1`,
    $`sleep 2; echo 2`,
    $`sleep 3; echo 3`,
])

let name = 'foo bar'
await $`mkdir /tmp/${name}`

Es werden folgende Befehle bereitgestellt:
  • $ - Führt angegbenen Befehl über spawn aus
  • cd()
  • fetch()
  • question()
  • sleep() 
  • echo()
  • stdin()
  • within()
  • retry()
  • spinner()- Rendert einen Spinner/Ladeanimation auf der Konsole
  • chalk - Ermöglicht farbige Ausgaben auf der Konsole
  • fs 
  • os 
  • path 
  • glob
  • yaml - Ermöglicht das einlesen von YAML
  • minimist - Einfaches parsen von Argumenten
  • which 
  • filename 
  • dirname 
  • require()

Mehr zu zx unter github.com/google/zx

unDraw - Illustrationen für Jeden

Mit unDraw existiert seit 2017 eine freie Datenbank an Illustrationen zu vielfältigen Themen. Grafiken von unDraw werden auf den Webseiten vieler Open-Source-Projekten eingesetzt. Inzwischen existieren über 1300 Illustrationen. Alle Grafiken können als SVG oder PNG heruntergeladen werden. Sie können auf der Webseite des Projekts über Themen-Keywords gefunden werden. Ein weiteres Herausstellungsmerkmal ist es, dass die Hauptfarbe der Illustrationen beliebig angepasst werden kann. Dadurch ist es einfach möglich, die Bilder an das eigene Corporate Design anzupassen.

Das einzige Problem von unDraw ist sein eigener Erfolg. Die Grafiken sind zwar hübsch, werden aber vielen Usern inzwischen bereits bekannt vorkommen.

NPM-Pakete komfortabler aktuell halten

Mit den beiden Paketen npm-check und npm-check-updates gibt es zwei Tools, die es Entwicklern erleichtern Node.js und Java-/Type-Script Projekte aktuell zu halten. Beide Tools analysieren die package.json bzw. die package-log.json und listen mögliche Updates auf. Im interaktiven Modus können updates Pakete direkt ausgewählt und installiert werden.

Es empfiehlt sich Tools über npx auszuführen und nicht lokal/global zu installieren. Dadurch ist gewährleistet, dass immer die aktuellste Version verwendet wird.

npm-check im Interaktiven Modus:

npx npm-check -u 

npm-check-updates im Interaktiven Modus:

npx npm-check-updates --format group --interactive

npm-check bietet im interaktiven Modus (-u) eine detailliertere Darstellung der Pakete gefällt deswegen besser als npm-check-updates.

PrimeReact - Umfassende Componenten Biblothek für React

React Komponenten Libraries gibt es wie Sand am Meer. Leider fehlen ihnen meist komplexere Komponenten, wie man sie z. B. für Admin-Interfaces wünscht. Für solche Anwendungsfälle will man nicht immer das Rad neu erfinden. PrimeReact ist eine recht unbekannte Komponentenbibliothek von der Firma Prime, obwohl PrimeReact über sehr viele Komponenten verfügt. Diese Komponenten decken auch kompliziertere Falle ab. So gibt es z. B. eine DataTable mit Edit, Pagination und Filterfunktion oder einen Tree-View mit Drag-Drop Support. Bei den Standard-Formularkomponenten gibt es alle erdenklichen Varianten wie Multi-Select, Cascade-Select, Masked-Inputs, Color-Picker, DatePicker Chips. Es existieren auch Komponenten wie die PickList oder eine einfachere OrderList. Aber auch Diagramme sind in die Komponenten-Bibliothek vorhanden (unter anderem: Kuchen, Bar, Line, PolarArena). Durch dieses umfassende Komponenten-Angebot können die meisten Fälle abgedeckt werden, ohne auf zusätzliche Komponenten zurückgreifen zu müssen.

Alle Komponenten sind kostenlos unter der MIT-Lizenz veröffentlicht. Es gibt mehrere kostenlose Themes. Allerdings werden diese nur als CSS angeboten. Will man die zugrundeliegenden SASS-Files, die ein einfaches Anpassen des Designs ermöglichen, so wird man zur Kasse gebeten. Alternativ existiert auch ein ebenfalls kostenpflichtiger PrimeDesigner,mit dem rudimentäre Anpassungen vorgenommen werden können.

Vorteile

  • Viele Business-Komponenten, die anderswo Geld kosten oder die man sich irgendwo zusammensuchen oder selber bauen muss
  • Gute Dokumentation mit vielen Beispielen
  • Einheitliches Konzept über alle Komponenten
  • Die gleichen oder ähnliche Komponenten werden von Prime auch für andere Frameworks wie Vue und Angular angeboten. Dadurch kann auch über Technologie-Grenzen hinweg ein einheitliches Design umgesetzt werden.
  • Es existieren mit PrimeIcons und PrimeFlex noch weitere kostenlose Erweiterungen, mit denen Icons und Layouts umgesetzt werden können

Nachteile:

  • Anpassen des Designs nicht ohne weiteres möglich. Bzw. kostenpflichtig
  • Fast alle Design-Anpassungen an den Komponenten werden per CSS-Klassen umgesetzt. Das ist ungewöhnlich und teilweise auch unübersichtlich
  • Formular-Layouts sind Komplizert und ausladend.
  • Community könnte größer sein

Pico.css - Micro-CSS-Framework für semantisches HTML

Bei Pico.css handelt es sich um ein sehr kleines, responsive CSS-Framwork. Minified und gzipped ist es kleiner als 10 KB und bietet doch einheitliches Design und einen integrierten Darkmode für die meisten HTML-Elemente. Mit "für semantisches HTML" ist gemeint, dass Pico.css ohne grösstenteils ohne Klassen auskommt. Es werden HTML-Komponenten gestylt. Dadurch ist es nicht notwendig, sich für das Standard-Design spezielle Klassennamen einzuprägen. Für Komponenten wie Buttons werden aber dennoch Modified-Klassen wie .primary, .secondary, .contrast oder .outline angeboten. Deswegen bezeichnet sich Pico.css auch nicht komplett Klassenlos.

Natürlich ist es weiterhin möglich, eigene Klassen einzuführen und zu verwenden.

Durch seine Größe und einfache Verwendung ohne Build System ist Pico.css prädestiniert für das Stylen von auf Mikrocontrollern wie dem ESP8266 oder dem ESP32 gehosteten Webinterfaces.

Winget und Chocolaty - Paketmanager für Windows

Unter Linux werden Anwendungen normalerweise mit einem Paketmanager wie apt-get, pacman oder ähnlichen installiert. Seit geraumer Zeit gibt es solche Paketmanager auch für Windows. Paketmanager wie Winget und Chocolaty werden über die Konsole bedient und erhalten fast ausschließlich kostenlose Programme. Von der Bedienung sind beide Paketmanager sehr ähnlich. Sie ermöglichen das Installieren, deinstallieren und upgraden von Programmen. Es können auch mehrere Programme nacheinander ohne weitere Userinteraktion installiert werden.

Winget wird von Microsoft als Open-Source entwickelt, Chocolaty ist unabhängig und wird ebenfalls als Open Source entwickelt. Chocolaty bietet einen größeren Software-Katalog, als Winget, aber beide verfügen über viele bekannteren Programme.

Beispiel Chocolaty:

choco install joplin -y

Beispiel Winget:

winget install Joplin.Joplin --accept-package-agreements

Weitere Alternativen

Ein weiterer Paketmanager ist Scoop. Bei Tests hat Scoop jedoch eine neue Windows-Installation komplett zerstört. Es wurden alle Verknüpfungen durch Keepass ersetzt. Es war nicht mehr möglich, andere Programme als Keepass zu starten. Scoop bietet mit um die 5000 Anwendungen eine große Bibliothek.

Fazit

Beim Neueinrichten eines PCs können Paketmanager viel Zeit ersparen.

NSIS - Nullsoft Scriptable Install System

Mit dem Open-Source-Tool NSIS lassen sich über Script-Dateien, Installer für Windows erstellen. Dabei gibt es unzählige Optionen und Anpassungsmöglichkeiten. Das Erstellen eines rudimentären Installers ist dadurch leider aufwändig. Hat man sich aber einmal alle benötigten Features zusammengesucht stehen die erstellten Installer kommerziellen Lösungen in nichts nach. NSIS wurde von den Machern von Winamp ins Leben gerufen und wird auch bei großen kommerziellen Produkten eingesetzt.

Nachfolgen ein Beispiel-Script zum Erstellen eines Installers:

!include "MUI2.nsh"

Name "ragersComicImporter"
OutFile "ragersComicImporter Setup.exe"

InstallDir "$PROGRAMFILES\ragersComicImporter"
RequestExecutionLevel admin
Unicode True


!define MUI_ABORTWARNING
!define MUI_ICON "..\public\icons\icon.ico"
!define MUI_HEADERIMAGE_RIGHT
!define MUI_WELCOMEFINISHPAGE_BITMAP "..\public\images\Wizard.bmp"

;Pages
!insertmacro MUI_PAGE_WELCOME
!insertmacro MUI_PAGE_LICENSE "..\LICENSES.md"
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES

!insertmacro MUI_LANGUAGE "English"

Section 
    SetOutPath $INSTDIR
    WriteUninstaller $INSTDIR\uninstaller.exe
    # File /r ..\dist\*
    File ..\dist\icon.ico

    CreateShortcut "$SMPROGRAMS\ragersComicImporter.lnk" "$INSTDIR\ragersComicImporter.exe" "$INSTDIR\icon.ico"
    CreateShortcut "$DESKTOP\ragersComicImporter.lnk" "$INSTDIR\ragersComicImporter.exe" "$INSTDIR\icon.ico"

    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "DisplayName" "ragersComicImporter"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "DisplayIcon" "$INSTDIR\icon.ico"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "Publisher" "ragerWorks"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                    "UninstallString" '"$INSTDIR\uninstaller.exe"'

SectionEnd

Section "uninstall"
    Delete "$INSTDIR\uninstaller.exe"
    Delete "$SMPROGRAMS\ragersComicImporter.lnk"
    Delete "$DESKTOP\ragersComicImporter.lnk"

    DeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter"

    RMDir  /r $INSTDIR
SectionEnd