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

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.

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.

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

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 Tailwind handelt es sich um ein neues CSS-Framework, welches einen neuen Ansatz verfolgt. Tailwind stellt ein Set an CSS-Klassen zur Verfügung, die jeweils nur eine CSS-Eigenschaft festlegen. Ein Entwickler braucht keine eigenen CSS-Klassen bzw. eigenen CSS-Code schreiben. Das Styling erfolgt ausschließlich über das Setzen von Klassen. Nachfolgend ein Beispiel für einen Container mit zwei Buttons. Durch das zuweisen mehrer Klassen wird das Design des Buttons bestimmt. Der Ansatz von Tailwind ist dabei nur in Kombination mit einem Framework sinnvoll, das Komponenten unterstützt, da sonst viele Code-Duplikationen auftreten und das Design nicht mehr zentral geändert werden kann.

<div class="flex-auto flex space-x-3">
      <button class="flex items-center justify-center bg-black text-white" type="submit">Ok</button>
      <button class="flex items-center justify-center border border-gray-300" type="button">Cancel</button>
</div>

Tailwind funktioniert in der Mehrheit der Awendungsfälle. Es eignet sich gut, wenn keine Designer vorhanden sind und der Programmierer selbst das Design entwirft, da spezielle Anforderungen mit den vorhandenen Klassen oft nicht umsetzbar sind. Bei komplexeren Designs kann es leider schnell zu einer sehr langen Kette an CSS-Klassen kommen.

Tailwind kann über npm install tailwindcss installiert werden.

Weitere Informationen gibt es unter: tailwindcss.com

Wer noch Cygwin für alte Projekte einsetzt, kann dieses auch mit dem neuen Windows-Terminal zu verwenden. In den Einstellungen von Windows-Terminal kann Cygwin über einen Klick auf den Button "+ Neues Profil hinzufügen" hinzugefügt werden. Als Befehlszeile muss der Pfad zu Cygwin gefolgt von den Parametern -i -l angegeben werden.

Die folgenden Beispiele gehen davon aus, dass Cygwin unter C:\Cygwin64 installiert ist.

Beispiel:

C:\Cygwin64\bin\bash.exe -i -l

Alle weiteren Parameter wie Name und Register-Titel können nach Belieben gewählt werden. Das neue Windows-Terminal kann über den Windows-Store heruntergeladen werden.

Bessere Methode:

Bei der oben vorgestellten Methode wird leider nicht der Ordner übernommen, in dem das Terminal geöffnet wurde. Inzwischen ist das im Explorer ja per Rechtsklick möglich. Um das nachzurüsten, wird das Paket chere benötigt. Es kann über apt-cyg install chere installiert werden, falls apt-cyg bereits vorhanden ist.

Danach kann bei Befehlszeile in den Einstellungen des Windows Terminal folgendes eingetragen werden:

C:\Cygwin64\bin\bash.exe /bin/xhere /bin/bash

Wer sein Bash-Script unter Linux mit einer "grafischen" Oberfläche ausstatten will, hat viele Möglichkeiten. Dialog ermöglicht das Erstellen von Dialogboxen auf der Konsole. Für einen Installer oder ein Konfigurations-Script is das aber ausreichen oder sogar erwünscht. Mit Dialog aufgewertete Skripte sind für den User wesentlich einfacher zu bedienen als reine Konsolenanwendungen. Dialog bietet viele Möglichkeiten, User-Inputs abzufragen oder Informationen anzuzeigen. Dialog kann auch unter WSL oder Cygwin ausgeführt werden. Auf gängigen Linuxdistributionen ist es standardmäßig installiert oder steht als Paket zur Verfügung.

Beispiel:

dialog --textbox "Informationen\n\nHier finden Sie wichtige Informationen zu\nragersweb.de" 0 0
dialog --yesno "Wollen wir weitermachen?" 0 0
dialog --inputbox "Wie heißen Sie?" 0 0 Mustermann
dialog --gauge "Please wait" 10 70 10

Neben Dialog gibt es auch XDialog, welches kompatibel ist, aber auf den X-Server setzt, wodurch GUI-Dialogboxen erstellt werden. Leider wird XDialog nicht mehr aktiv weiterentwickelt. Als Alternative biete sich seit neustem Zenity an. Bei Zenity handelt es sich um ein Gnome-Projekt wodurch die Weiterentwicklung recht sicher ist. Leider hat Zenity nicht so viele Optionen wie Dialog oder XDialog. Es Verfügt aber über die Funktionalität Benachrichtigungen anzuzeigen, was ausgesprochen Praktisch sein kann.

Beispiel:

zenity --question --text "Was soll ich nur machen?"
zenity --password --username
zenity --calendar --text "Geburtstag wählen:"
zenity --list --text "Bitte Option wählen:" --checklist --column "Optionen" --column "Info" 1 Trinken
zenity --notification --window-icon="info" --text="There are system updates necessary!"

Mit Yad existiert ein Fork von Zenity, der mehr Optionen bietet. Zenity Commands sollten auch in Yad funktionieren. Allerding muss hier über den --borders Befehl selbst für das passende Padding gesorgt werden. Yad kann unter Ubuntu über sudo apt-get install yad installiert werden.

yad --title 'Beispiel Fenster' --window-icon=gtk-about --geometry=400x100 --button=gtk-close --text 'Hallo Welt!' --borders 1

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