Native Desktop-Apps mit Javascript, HTML und CSS schreiben? Mit dem von Github entwickelten Framework Electron ist das kein Problem. So klappt der Einstieg.

Native Desktop-Apps für Windows, MacOS und Linux zu entwickeln, ist mit dem Framework Electron und Kenntnissen im Bereich der Webentwicklung denkbar einfach. Umgesetzt wird das mit dem Webbrowser Chromium sowie dem Javascript-Framework Node.js.

Mehrere bekannte Desktop-Anwendungen basieren bereits auf Electron. Darunter beispielsweise Discord und Skype oder auch Editoren wie Atom oder Visual-Studio-Code von Microsoft.

Electron installieren

Bevor du Electron installieren kannst, benötigst du NPM, einen Paketmanager für Javascript, sowie das Javascrpt-Framework Node.js.

Hast du beides heruntergeladen, kann Electron installiert werden. Dafür brauchst du den folgenden Befehl des vorher installierten Paketmanagers.

npm install electron --save-dev

Den vollständigen Installations-Guide findest du hier.

So machst du die ersten Schritte mit Electron

Um jetzt mit deinem Projekt richtig loszulegen, navigierst du mit der Konsole nur noch zum gewünschten Verzeichnis und führst npm init aus.

Die grundlegende Dateistruktur deiner App sollte nun wie folgt aussehen:

deine-app/
  ├── package.json
  ├── main.js
  └── index.html

Die Datei package.json beinhaltet Informationen zum Namen der App, der Version sowie dem Start-Script.

Deine erste Electron-App

In der Dokumentation findest du Code-Schnipsel, mit denen du deine erste einfache App zum Laufen kriegst.

Die Github-Seite von Electron stellt dir zusätzlich eine interaktive Demo-App zur Verfügung. Sie wurde ebenfalls mithilfe von Electron entwickelt, veranschaulicht dir die Umsetzung einiger grundlegender Features und hilft dir, eine erste Idee vom Aufbau und den Möglichkeiten des Frameworks zu bekommen.

Die Electron-Demo-App veranschaulicht die ersten Schritte mithilfe von ausführbaren Code-Schnipseln. (Screenshot: t3n.de)
Die Electron-Demo-App veranschaulicht die ersten Schritte mithilfe von ausführbaren Code-Schnipseln. (Screenshot: t3n.de)

Die Demo ist mit Code-Schnipseln zu den Themen Fenster, Menüs, native Benutzeroberfläche, Kommunikation, System sowie Medien gespickt. Alle Schnipsel lassen sich dabei direkt ausführen und zeigen das Ergebnis des Codes. Zusätzlich ist zu jedem Thema die entsprechende Seite der Electron-Dokumentation verlinkt, die weiter ins Detail geht.

Die Vorteile von Electron

  • Schreibe eine Desktop-App mit Web-Technologien: Chromium, Node.js, Javascript, HTML und CSS
  • Electron-Apps lassen sich auf Windows, MacOS und Linux ausführen
  • Electron ist ein Open-Source-Projekt
  • Gute Dokumentation und Demo-App vereinfachen den Einstieg
  • Mehrere bekannte Electron-Apps wie Slack, Skype, Discord, Figma und weitere zeigen, wie vielfältig die Möglichkeiten sind

Passend zum Thema: