Das Hauptgeheimnis für die Entwicklung guter Elektronenanwendungen

Einige hassen Elektronenanwendungen sehr . Dass die Anwendung den Chromium-Browser enthält, scheint, gelinde gesagt, seltsam. Dieses Gefühl wird während der Arbeit mit solchen Anwendungen verstärkt. Sie verbrauchen viel Speicher, werden langsam geladen und reagieren nicht besonders schnell auf Benutzerinteraktionen. Es ist nicht einfach, eine gute Webanwendung zu entwickeln. Warum werden Webtechnologien in die Desktop-Umgebung gezogen? Immerhin gibt es das Gefühl, dass sie in dieser Umgebung eine Reihe von Problemen verursachen?

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er nicht die Rolle des Verteidigers von Electron spielen wird, obwohl alles vom Erfolg dieser Plattform spricht. Es stimmt, niemand wird die Exzesse, die Elektronenanwendungen inhärent sind, diskontieren. Ist es bei der Entwicklung solcher Anwendungen möglich, zwei Fliegen mit einer Klappe auf einmal zu töten?


Einige der Probleme von Electron (große Dateien, langsames Laden) sind ein Erbe der Technologien, auf denen diese Plattform basiert. Sie müssen auf niedrigem Niveau angegangen werden. Schwerwiegendere Probleme (Speicherverbrauch, Langsamkeit der Schnittstellen) können auf der Ebene gelöst werden, auf der Elektronenanwendungen entwickelt werden. Die Lösung dieser Probleme ist jedoch nicht einfach. Was ist, wenn es ein Geheimnis gibt, von dem Sie wissen, dass Sie diese Mängel im automatischen Modus minimieren können?

Wenn Sie Programmcode lesen möchten, können Sie sofort in dieses Repository schauen. Hier ist das Projekt, das in diesem Material berücksichtigt wird.

Die Essenz des Geheimnisses

Das Geheimnis für die Entwicklung hochwertiger Elektronenanwendungen besteht darin, den Großteil der Berechnungen auf dem lokalen System im Hintergrund durchzuführen. Je weniger Sie sich auf Cloud-Services verlassen und je mehr Arbeit Sie in Hintergrundprozesse investieren, desto mehr können Sie die folgenden positiven Effekte feststellen:

• Sofortiges Laden von Daten. Anwendungsbenutzer müssen niemals auf das Herunterladen von Daten über das Netzwerk warten. Die Daten werden aus dem lokalen Speicher heruntergeladen. Dies gibt der Anwendung sofort einen spürbaren Leistungsschub.
• Geringe Caching-Anforderungen. Die Client-Anwendung muss sich nicht besonders um das Caching kümmern. Dies liegt daran, dass alle benötigten Daten lokal verfügbar sind. Damit eine Webanwendung ein angemessenes Leistungsniveau erreicht, muss sie normalerweise eine beeindruckende Datenmenge in ihren lokalen Status laden. Dies ist einer der Gründe für den sehr hohen Speicherverbrauch von Elektronenanwendungen.

Ich spreche hier nicht von anderen Vorteilen der lokalen Datenspeicherung, zum Beispiel von der Möglichkeit, ohne Verbindung zu einem Netzwerk zu arbeiten.

Sehen Sie sich an, wie viel Speicher meine Electron-Anwendung verbraucht - der persönliche Finanzmanager von Actual . Dieses Programm speichert alle seine Daten lokal. Die Datensynchronisation zwischen verschiedenen Geräten ist eine optionale Funktion, die die Hauptfunktionalität nicht beeinträchtigt. Ich nehme an, da diese Anwendung für die Arbeit mit großen Datenmengen ausgelegt ist, sprechen die Zahlen zum Speicherverbrauch für sich.


Tatsächlicher Speicherverbrauch

Eine Anwendung, die keine aktiven Aktionen ausführt, belegt insgesamt 239,1 MB Speicher. Dieser Indikator kann mehr sein, es hängt davon ab, was genau in der Anwendung passiert, aber es ist möglich, nur die angegebene Nummer als Basis zu verwenden. Das ist nicht perfekt, aber nicht so schlimm. Zumindest - besser als die 1371 MB Speicher, die auf meinem Slack-Computer benötigt werden. Ich muss sagen, dass Slack ein atypisches Beispiel für eine Elektronenanwendung ist, die durch spezifische Probleme gekennzeichnet ist. Aufgrund von Slack gab es eine gewisse Sensation um Electron. Andere Anwendungen wie Notion oder Airtable belegen ungefähr 400-600 MB Speicher. Und das bedeutet, dass meine Bewerbung in dieser Hinsicht gut gewinnt und sie haben.

Ich muss sagen, dass ich vor jeder Optimierung die Zahl von 239,1 MB erhalten habe. Ich plane, einige der äußerst wichtigen und speicherintensiven Teile der Anwendung in Rust neu zu schreiben. Dies sollte den Speicherbedarf der Anwendung erheblich reduzieren.

Der Hintergrundserver kann seinen eigenen Speicherverbrauch optimieren, indem nur die Daten in den Speicher geladen werden, die zu einem bestimmten Zeitpunkt benötigt werden. Es ist am besten, so etwas wie SQLite für die Datenspeicherung zu verwenden. Dieses DBMS ist bereits ernsthaft für die Lösung solcher Probleme optimiert (ernsthaft - verwenden Sie einfach SQLite). Darüber hinaus sollte beachtet werden, dass die Benutzeroberfläche der Anwendung durch das Verschieben verschiedener Berechnungen in Hintergrundprozesse so schnell wie möglich auf Benutzereinflüsse reagieren kann.

Es stellte sich heraus, dass die Verwendung eines Hintergrundservers in einer Electron-Anwendung dem Entwickler interessante Möglichkeiten bietet. Im nächsten Abschnitt werden wir über all die unglaublichen Dinge sprechen, die mit seiner Verwendung getan werden können.

Selbst wenn Ihre Anwendung stark an Cloud-Daten gebunden ist, benötigen Sie möglicherweise einen Hintergrundprozess, wenn Sie mit der Node.js-API arbeiten möchten. Die Interaktion mit diesen APIs ist nur über Hintergrundprozesse möglich. Unabhängig von Ihrer Electron-Anwendung glaube ich, dass das Kennenlernen des Projekts, das wir jetzt untersuchen werden, Ihnen einige nützliche Ideen geben kann.

Beispielanwendung für Elektronen mit Server

Ich habe die Beispielanwendung " Elektron mit Server" erstellt , um anhand dieses Beispiels alles zu zeigen, was konfiguriert werden muss, um wirklich lokale Elektronenanwendungen zu entwickeln. Ich habe dies getan, um Programmierer durch die Erstellung ähnlicher Projekte zu fesseln. Ich würde gerne ein ähnliches Projekt zu einer Zeit treffen, als ich gerade anfing, mit Electron zu arbeiten.

Technische Informationen zur Anwendung finden Sie in der README . Hier ein allgemeiner Überblick über das Projekt:

• Es wird der übliche Node.js-Prozess erstellt, mit dem Servercode im Hintergrund ausgeführt wird.
• Darin wird mithilfe von Node- IPC ein IPC-Kanal erstellt, der die direkte Interaktion zwischen dem Backend und der Benutzeroberfläche der Anwendung organisiert.
• Wenn das Projekt im Entwicklungsmodus gestartet wird, wird der Server nicht als Hintergrundprozess gestartet. Sie können über ein separates Browserfenster damit interagieren. Dies dient zu Debugging-Zwecken.

Lassen Sie uns nun etwas langsamer fahren und uns den letzten Punkt auf dieser Liste genauer ansehen. Können Sie im Entwicklungsmodus über ein separates Browserfenster mit dem Server interagieren?


Client- und Serverteile der Anwendung

Ja, das ist es. Nachdem ich gelernt hatte, wie man Hintergrundprozesse startet, stellte ich zunächst fest, dass mir die Werkzeuge des Chromium-Entwicklers zur Verfügung stehen. Und zweitens - ich habe festgestellt, dass ich sie zum Debuggen zum Debuggen von Node.js Code verwenden kann. Daher spreche ich über die Tatsache, dass Sie über einen Browser mit Node.js interagieren können. Auf diese Weise können Sie das umfangreiche Chromium-basierte Browser-Entwickler-Toolkit zum Debuggen von Servercode verwenden.

Schauen wir uns nun alle interessanten Dinge an, die wir dank der Anwendung des obigen Anwendungsstartschemas tun können.

Konsole verwenden

Ich habe Befehle zum Protokollieren von Anforderungen und Antworten zur Datei server-ipc.js . Ich kann sie über die Browserkonsole erkunden.


Debuggen von Node.js-Anwendungen in der Browserkonsole

Schrittweise Codeausführung

Wenn Sie die Serverseite der Anwendung mit einem Browser debuggen, können Sie die schrittweise Codeausführung verwenden. Das soll nicht heißen, dass es etwas absolut Fantastisches ist. Es ist jedoch sehr praktisch, dass diese Funktion immer verfügbar ist und keine zusätzlichen Programme erfordert.


Schrittweise Codeausführung

Profilerstellung

Vielleicht ist das mein Lieblingswerkzeug. Dies ist ein brillantes Standardtool zur Untersuchung der Codeleistung, mit dem Sie die Serverseite der Anwendung profilieren können.


Untersuchung der Servercode-Leistung

Mit den Tools des Browser-Entwicklers können Sie sogar untersuchen, was passiert, wenn der Hintergrundprozess gestartet wird (dies ist höchstwahrscheinlich der schwierigste Teil beim Starten der Anwendung).

Starten Sie dazu einfach die Aufzeichnung der Indikatoren und laden Sie das Fenster neu. Durch einen Neustart wird der Server neu gestartet. Dies führt uns zum nächsten Schritt.

Neustart des Servers mit der Tastenkombination Cmd + R oder Strg + R.

Eine weitere Option zum Debuggen von Servercode in einem Browser besteht darin, dass der Server neu gestartet wird, da das Debuggen von Servern in einem Browserfenster durchgeführt wird. Durch einfaches Neuladen des Fensterinhalts wird der Server neu gestartet. Es reicht aus, die Tastenkombination Cmd+R (oder für Windows Ctrl+R ) zu verwenden, und Ihnen stehen die neuesten Änderungen am Servercode zur Verfügung. In diesem Fall werden die Front-End-Daten gespeichert. Dies bedeutet, dass Sie weiterhin mit dem Client-Teil der Anwendung arbeiten können. Nach dem Neustart des Servers funktioniert der Client-Teil jedoch bereits mit der neuen Version des Server-Codes. Dies erinnert an einen „heißen“ Ersatzcode auf einem laufenden Server.

Die folgende Abbildung zeigt, wie ich beim Ändern des Servercodes die Seite durch Drücken von Cmd+R geladen habe Cmd+R Danach arbeitete ich weiter mit dem Client, der jetzt mit der neuen Version des Servers interagiert.


Neustart des Servers

Untersuchung der laufenden Serverseite der Anwendung und des Hot-Swap-Codes

Normalerweise füge ich beim Debuggen des Servers einfach den Befehl console.log() an den richtigen Stellen im Code hinzu und starte ihn neu. Manchmal, in besonders schwierigen Fällen, ist es jedoch äußerst nützlich, sich anzusehen, was auf einem laufenden Server geschieht, anstatt ihn neu zu starten. Es ist möglich, dass Sie nicht nur in den Server „schauen“, sondern auch etwas daran ändern, um zu sehen, wie sich dies auf das Problem auswirkt.

In der Konsole können Sie den Befehl Node.js require . Dies bedeutet, dass Sie mit seiner Hilfe alle Servermodule verbinden und mit ihnen in der Konsole arbeiten können.

Angenommen, wir müssen mit dem server-handler.js . Führen Sie dazu einfach den Befehl let handlers = require('./server-handlers') in der Konsole aus.

Erstellen wir ein System zum Speichern des Serverstatus. In unserem Fall ist dies eine Liste aller Daten, die an die Funktion make-factorial werden (der Serverstatus der realen Anwendung ist viel komplizierter):

 handlers._history = [] handlers['make-factorial'] = async ({ num }) => {  handlers._history.push(num) } 

Sie können handlers._history Status des Servers von der Konsole aus handlers._history indem Sie das entsprechende Modul anschließen und handlers._history handlers._history . Falls gewünscht, können wir während der Programmausführung sogar die make-factorial Implementierung vollständig ersetzen!


Serverstatusforschung

Zusammenfassung

Schauen Sie sich das Beispiel- Repository für Elektronen mit Servern an, um die Details der Projektimplementierung zu erfahren und den Code der Serverseite der Electron-Anwendung anzuzeigen.

Wenn Sie Visual Studio Code verwenden, sind Sie möglicherweise an eine qualitativ hochwertige Integration von Entwicklertools in den Node.js-Server gewöhnt. Mit diesem Ansatz können Sie den Server unabhängig von der Electron-Anwendung selbst starten. Danach können Sie Electron mitteilen, dass Sie eine Verbindung zu dem Prozess herstellen müssen, der VS Code gehört. Ich bevorzuge jedoch die Verwendung vorhandener Tools zur Elektronenentwicklung.

Dies bedeutet, dass der Programmierer die Möglichkeit hat, Code-Bearbeitungstools von Drittanbietern zu verwenden und gleichzeitig vollen Zugriff auf alle Browser-Entwicklertools zu haben.

In den letzten Jahren habe ich die Actual- Anwendung entwickelt und verwende ständig das, worüber ich gerade gesprochen habe. Und ich möchte sagen, dass mir das alles wirklich gefällt. Vielleicht ist die Arbeit am Node.js-Teil dieser Anwendung zur Quelle der angenehmsten Programmiererfahrung geworden, die ich je erlebt habe.

Darüber hinaus ist es sehr wichtig, dass die oben beschriebenen Prinzipien uns bei der Entwicklung wirklich lokaler Anwendungen helfen. Wir haben bereits alle dafür notwendigen Technologien. Die Hauptsache ist, sie richtig zu verwenden.

Liebe Leser! Wie stehen Sie zu elektronenbasierten Apps?