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.

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.

Bei tilt.js handelt es sich um eine Java-Script-Bibliothek zum Erstellen von Tilt-Effekten. Diese können auf beliebige HTML-Elemente angewendet werden. Ursprünglich nur für jQuery gibt es inzwischen sowohl eine Vanilla.js als auch eine React-Variante. Mit dem Tilt-Effekten können überraschende Eyecatcher erstellt werden. Ein Beispiel ist über diesem Text zu sehen. Um den Effekt zu Aktiveren ist es notwendig mit der Maus über den Button "Hallo Welt" zu fahren.

NodeGui und React NodeGui sind zwei neue Bindings von Node.js an Qt. React NodeGui setzt dabei auf NodeGui. Mit den beiden Bibliotheken können GUIs für Windows, Linux und MacOs erstellt werden. Man merkt an allen Enden das es sich noch um zwei sehr junge Bibliotheken handelt. Vor allem in React NodeGui sind nur Basics umgesetzt und es existieren nur wenige Komponenten. Die Dokumentation der Verfügbaren Komponenten zum momentanen Zeitpunkt teilweise nicht vorhandenen. Es ist zwar möglich Grids, Tabs oder Dialoge zu erstellen, allerdings existiert noch keinerlei Dokumentation. Bei meinen Tests bin ich auch auf einige Bugs gestoßen. So funktioniert das Auto-Refresh der GUI wärend der Entwicklung nicht zuverlässig und Teilweise ändern Komponenten grundlos ihre Größe, so wurden z. B. Tabs bei jedem Wechsel zu einer anderen Tab etwas größer.

In dem jetzigen Zustand kann man die beiden Bibliotheken für den produktive Einsatz empfehlen. Trotzdem handelt es sich um sehr interessante Projekte.

Da alles komplett im Node.js-Prozess läuft, gibt es keine problematischen Kontextwechsel zwischen Browser und Node-Runtime wie bei Elektron. Auch sind die von NodeGui bzw. React NodeGui erstellten Dist-Packages kleiner als die von Electron oder NW.js.

Weiterführende Informationen gibt es unter: nodegui.org und react.nodegui.org

Bei Next.js handelt es sich um ein React basiertes Framework von Vercel. Next.js bietet bereits "out of the box" viele Funktionen, die man sonst bei einem React Projekt manuell hinzufügen muss:

• JS / Typescript Support
• Datei basiertes Routing
• SSR (Server Side Rendering)
• Code Splitting
• Image Optimierung
• API Routes (keine zusätzlichen Abhängigkeiten benötigt)
• Fast Refresh (kein Neuladen während der Entwicklung notwendig)

Es nimmt dem Entwickler viele Entscheidungen ab. So muss man Babel und Webpack nicht selbst konfigurieren kann aber dennoch eingreifen wenn es notwendig sein solle. Next.js ist kompatibel mit den meisten React.js Bibliotheken. Mit SWR steht Next.js eine mächtige Bibliotheken für Client-Side-Data-Fetching zur Seite. Weitere Informationen gibt es unter: nextjs.org

ragersWeb

Mit der JavaScript-Bibliothek Shine können Schatten-Text-Effekte erstellt werden. Besonders bei großen Texten wirken diese Effekte sehr gut und sind dadurch ein perfekter Blickfang. Die Bibliothek setzt bei der Umsetzung auf die CSS-Eigenschaften boxShadow und textShadow. Werden diese vom Browser nicht unterstützt, wird der Effekt nicht dargestellt. Der Effekt funktioniert bei Texten und Boxen.

Shine kann unter bigspaceship.github.io/shine.js heruntergeladen werden.

Bei WebGLStudio.js handelt es sich um ein komplett im Browser lauffähiges 3D-Toolset zum erstellen und bearbeiten von 3D-Scenen. WebGLStudio.js verfügt über eine eigene auf WebGL basierenden 3D-Engine. Mit den integrierten Shader-Editor ist es möglich Shader mittels Graph-Interface zu erstellen und zu bearbeiten. WebGLStudio bietet ein virtuelles Filesystem, so das Assets einfach im Browserübergreifend verwaltet werden können. Durch dieses System ist auch ein einfaches publizieren der erstellen Inhalte möglich.

Weiter Informationen zu WebGLStudio.js können unter webglstudio.org gefunden werden.

Bei Vibrant.js handelt es sich um eine JavaScript-Bibliothek um markante Farben aus Bildern zu extrahieren. Sie kann z.B. dafür verwendet werden Layout-Farben an ein angezeigtes Bild anzupassen. Vibrant.js funktioniert im Browser als auch unter node.js.

Weitere Informatione und der Download sind unter jariz.github.io/vibrant.js/ zu finden.

Die unter GPLv3 stehende Bibliothek Trianglify erstellt anhand von wenigen Parametern sehr ansehnliche SVG-Hintergründe. Version 2 von Trianglify hat keine Abhängigkeiten mehr. Die erste Version benötigte mit D3 noch eine sehr umfangreiche Bibliothek. Mit einer Größe von 35 kb ist Trianglify jetzt gut geeignet Webseiten mit einem ansprechenden, sich immer ändernden Hintergrund auszustatten.

Zepto eine weitgehend mit jQuery kompatible, minimalistische OpenSource-JavaScript-Bibliothek für moderne Browsers. Dabei ist jedoch keine 100 prozentige Abdeckung der Funktionalität von jQuery gegeben. Der Vorteil von Zepto ist das die Bibliothek mit maximal 10k wesentlich kleiner ist als jQuery, was weitgehend durch die geringere Unterstützung älterer Browser erreicht wird. Zepto kann unter der MIT Lizenz auf zeptojs.com heruntergeladen werden.