Electron.js ist das beliebteste Framework für die Entwicklung von Desktop-Apps. Passt es gut zu Ihrem Projekt? Erfahren Sie mehr über die Funktionen und die Architektur und schauen Sie sich ein Beispielprojekt an (oder programmieren Sie es sogar selbst).
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
Wenn Sie auf der Suche nach wichtigen Informationen zu Electron.js hierher gekommen sind, wird Sie dieser Artikel nicht enttäuschen. Du wirst lernen:
Lass uns anfangen.
Electron.js ist ein Runtime-Framework, das es dem Benutzer ermöglicht erstellen Sie Desktop-Suite-Anwendungen mit HTML5, CSS und JavaScript. Es ist ein Open-Source-Projekt, das von Cheng Zhao, einem Ingenieur bei GitHub, gestartet wurde.
<span class="colorbox1" fs-test-element="box1"><p>Wichtig: Es ist im Grunde eine Mischung aus zwei unglaublich beliebten Technologien: Node.JS und Chromium.</p></span>
Die Reise von Electron.js begann im Januar 2013 mit der Suche nach einem Tool zum Erstellen eines plattformübergreifenden Texteditors, auf dem der Benutzer mit Technologien wie JavaScript, HTML und CSS arbeiten kann.
Es wurde am 15. Juli 2013 gegründet, um die plattformübergreifende Entwicklung für die Erstellung von „Atom“ zu erleichtern. Es war ursprünglich als Atom Shell bekannt. Schauen Sie sich das Bild unten an, um eine genauere Vorstellung von der Entwicklung von Electron.js zu bekommen.
Angenommen, die obige Definition hat Ihre Anfrage zu Electron.js gelöst, lassen Sie uns zu den Funktionen übergehen.
Jede Webanwendung, die Sie geschrieben haben, kann auf Electron.js ausgeführt werden. Ebenso kann jede von Ihnen geschriebene Node.JS -Anwendung diese Technologie nutzen.
Electron JS verwendet Webtechnologien wie einfaches HTML, CSS und JavaScript. Es sind keine Mutterkenntnisse erforderlich, es sei denn, Sie möchten etwas Fortgeschrittenes tun. Es kann für einen einzelnen Browser entworfen werden. Sein Dateisystem gehört zu APIs für Node.js und arbeitet an Linux, Mac OS X, Windows.
Es verwendet das npm-Modul, das häufig für JavaScript verwendet wird. Es besteht aus einem nativen Menü für Dialoge und Benachrichtigungen. Die Windows-Installationsprogramme benötigen keine Konfiguration.
Es bietet auch die Möglichkeit, unter Windows und Mac mit Squirrel automatisch zu aktualisieren und Absturzberichte zu erstellen. Die Absturzberichte werden zur weiteren Analyse an den Remote-Server gesendet. Die Aktivitäten zur Inhaltsverfolgung wie Debugging und Profiling werden von Chromium verwaltet.
Die schwierigen und mühsamen Teile der Erstellung einer Desktop-Anwendung sind die Vereinfachung des Paketierens, der Installation, der Aktualisierung, die Unterstützung nativer Menüs, Benachrichtigungen und Dialoge und letztendlich die Optimierung der App-Absturzberichte.
Electron JS kümmert sich so ziemlich um all diese wichtigen Schritte, sodass sich der Benutzer auf den Kern seiner Anwendung konzentrieren kann.
Wenn wir eine Anwendung für einen Webbrowser schreiben, schreiben wir im Grunde Code, der auf dem Computer einer anderen Person ausgeführt wird. Wir wissen nicht, welche Browser unsere Zielbenutzer verwenden werden. Es kann die neueste Version von Chrome oder eine veraltete Version von Internet Explorer sein.
Daher bleibt uns keine große Wahl, als bei den Technologien, die wir implementieren, und der Art des Codes, den wir entwerfen müssen, konservativ vorzugehen.
Wenn Sie Ihre Anwendungen mit Electron erstellen, sind Sie Verpacken einer bestimmten Version von Chromium und Node.JS, Sie können sich also auf die Funktionen verlassen, die in diesen Versionen verfügbar sind.
Da Sie mit Electron eine Desktop-App mit Webtechnologien erstellen können, wird Ihr derzeitiges Entwicklerteam diese Herausforderung höchstwahrscheinlich bewältigen. Sie können verfügbare Talente gut einsetzen. Das beschleunigt auch die Markteinführungszeit, da Sie Ihren Code nicht an verschiedene Systeme und deren Versionen anpassen müssen.
In den meisten Fällen wird Electron aus geschäftlicher Sicht eine gute Wahl sein. Und technische Entscheidungen sollten immer unter Berücksichtigung der Geschäftsperspektive getroffen werden. Technologische Entscheidungen anhand des Geschäftskontextes zu treffen, ist ein erster Schritt, um die Grenzen zwischen IT und Unternehmen aufzubrechen und einfach bessere Produkte zu entwickeln.
Lassen Sie uns nun etwas Licht in die Architektur von Electron.js werfen. Wenn Sie sagen, dass Electron.js eine Pizza ist und Node.JS die Basis ist, dann ist Chrome der Käse und die V8 JavaScript Engine ist das Topping.
Chrome ist ein von Google entwickelter Open-Source-Webbrowser, der einen Fenstermanager oder eine Shell mit Registerkarten für das Web bereitstellt. Es hat eine minimalistische Benutzeroberfläche und verwendet V8 als JavaScript-Engine und Blink als Layout-Engine. Libchromiumcontent ist Die Rendering-Bibliothek von Chromium, Dies ist eine Open-Source-Grundlage für Googles Browser Chrome.
Node.JS ist eine Open-Source-JavaScript-Laufzeit, die die V8-JavaScript-Engine verwendet. Es ermöglicht Ihnen Führen Sie JavaScript außerhalb des Browsers aus und bietet auch eine interaktive Shell, in der Sie rohen JavaScript-Code ausführen können.
Das Projekt Node.JS wurde ursprünglich 2009 als plattformübergreifende Open-Source-Runtime für die Entwicklung serverseitiger Anwendungen mit JavaScript veröffentlicht. Node.js wird im Paket mit einem Paketmanager namens npm geliefert, dem größten Ökosystem von Open-Source-Bibliotheken.
Die V8 JavaScript Engine ist auch eine von Google entwickelte Open-Source-JavaScript-Engine, die in C ++ und JavaScript geschrieben wurde.
Nachdem wir herausgefunden haben, was Electron JS ist, und seine Architektur sorgfältig analysiert haben, wollen wir verstehen, wie es funktioniert.
<span class="colorbox1" fs-test-element="box1"><p>Was Sie sich merken sollten: Electron-Anwendungen haben zwei obligatorische Prozesse, den Hauptprozess und den Renderprozess.</p></span>
Jeder Prozess hat eine andere Rolle zu erfüllen. Das Bootstrapping der Anwendung wird vom Hauptprozess durchgeführt. Es kann anderen Ereignissen im Lebenszyklus einer Anwendung standhalten, z. B. dem Starten, Beenden, der Vorbereitung auf das Beenden und anderen leichten Aufgaben wie dem Wechsel in den Hintergrund und dem Hervortreten in den Vordergrund.
Andererseits wird der Rendervorgang durch den Hauptprozess ausgelöst. Die Renderprozesse zeigen die Benutzeroberfläche der Anwendung an. Jeder Prozess nutzt die Multiprozessarchitektur von Chromium und läuft auf einem eigenen Thread.
Lassen Sie uns diese Prozesse besprechen, indem wir eine Electron JS-Beispielanwendung schreiben.
Erstellen Sie einen neuen Ordner in Ihrem Dateisystem.
Um eine Basisanwendung zu erstellen, benötigen Sie drei Dateitypen: package.json, main.js und index.html
Um die Datei package.json mit dem Befehl `yarn init` zu erstellen:
Diese JSON-Datei verweist auf die Hauptdatei der App und listet deren Details und Abhängigkeiten auf.
Ändern Sie nun in der Datei package.json die Hauptdatei in die Datei main.js und fügen Sie das folgende Skript hinzu:
Elektron installieren:
Jetzt kann es gestartet werden mit:
Da Sie noch keinen Code hinzugefügt haben, erhalten Sie diesen:
Jetzt ist es an der Zeit, Code in die Dateien einzufügen und eine Anwendung von Hello World zu erstellen.
Fügen Sie der Datei main.js das folgende Skript hinzu:
Diese Datei startet die App und erstellt ein Browserfenster zum Rendern von HTML sowie den Hauptprozess der App. Es ist verantwortlich für die Integration und Interaktion mit der Benutzeroberfläche des Betriebssystems.
Sie können jede JavaScript-Bibliothek wie Angular, React, jQuery usw. für den Renderer-Prozess verwenden.
Erstellen Sie die Datei index.html:
Index.html ist eine Webseite zum Rendern. Dies ist der Renderer-Prozess der App.
Nachdem Sie Ihre ersten Dateien main.js, index.html und package.json erstellt haben, können Sie Ihre App ausprobieren, indem Sie 'yarn start' aus dem Verzeichnis Ihrer Anwendung ausführen.
Wenn Sie Ihre Dateien ausführen, erscheint das App-Fenster und zeigt Hello World an.
Es ist eine einfache Anwendung, und die Anwendung wird beendet, wenn Sie das Fenster schließen. Wenn Sie diese Anwendung erstellen, erhalten Sie eine praktischere Vorstellung davon, was Electron JS ist.
Dies sind die Tools, die Electron.js benötigt, um eine Anwendung zu erstellen.
Am 20. Dezember 2018 wurde Electron Version 4.0.0 veröffentlicht. Schauen Sie sich die offizielle Website an unter electronjs.org. Hier sind einige zukünftige Ideen für Desktop-Apps, die Electron.js verwenden.
Ich hoffe, wir haben Ihnen geholfen zu verstehen, was Electron JS ist, zusammen mit seinen Funktionen, seiner Implementierung und seinen grundlegenden Tools.
Insgesamt kümmert sich Electron.js um die meisten dynamischen Anwendungen, die unsere verwenden Browser als Plattform um ihre zu liefern eingebettete Funktionen und helfen Sie uns, ein breiteres Publikum zu erreichen. Schließlich ist es der Hauptzweck eines Open-Source-Frameworks, die richtigen Anwendungen zu entwickeln und bereitzustellen, die den Benutzern helfen können, ihre Arbeit zu erledigen.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Full-Stack-Softwareentwickler mit 18 Jahren Berufserfahrung.
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Full-Stack-Softwareentwickler mit 18 Jahren Berufserfahrung.
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Read next
Popular this month
previous article in this collection
It's the first one.
