JavaScript patří mezi nejrozšířenější programovací jazyky. Skutečnost, že jej lze použít pro vývoj backendu i frontendu, z něj udělala miláčka mnoha lidí.
JavaScript má mnoho knihoven a rámců, které rozšiřují jeho případy použití nad rámec vanilkového (prostého) JavaScriptu.
Electron.js je výkonný open-source framework, který dává webovým vývojářům možnost vyvíjet nativní aplikace s jejich stávajícími dovednostmi. Tento článek vás naučí o Electron.js a o tom, jak jej lze použít k podpoře vašeho dalšího úžasného nápadu.
Table of Contents
Electron JS
Electron JS je framework, který mohou vývojáři používat k vytváření desktopových aplikací pomocí HTML, CSS a JavaScriptu. Electron JS byl vytvořen a je spravován GitHubem.
Rámec je směsí Node.JS a Chromium, což uživatelům umožňuje udržovat jednu kódovou základnu JavaScriptu a vyvíjet desktopové aplikace pro více platforem, které mohou fungovat na Windows, macOS a Linux.
Příběh Electron.js začal v lednu 2013. Původní myšlenkou bylo vytvořit multiplatformní textový editor, který by dokázal pracovat s JavaScriptem, HTML a CSS.
Electron.js se původně jmenoval Atom Shell a open source byl vytvořen v roce 2014. Projekt byl později v dubnu 2015 přejmenován na Electron a jeho první API bylo vydáno v roce 2016.
Vlastnosti Electron JS
- Kompatibilní se všemi JavaScriptovými knihovnami a frameworky. Vue.js, Angular a React.js jsou jen příklady frameworků JavaScript, které mohou vývojáři používat společně s Electron JS. Tato kompatibilita usnadňuje využití funkcí/funkcí těchto knihoven a rámců při vytváření aplikace Electron.
- Opakovaně použitelný rámec. Stravování pro různé potřeby zákazníků může být drahé. Výhodou Electron JS je, že jej lze použít pro webové i desktopové aplikace. Jediná kódová základna znamená, že ji lze také použít na různých operačních systémech.
- Má přístup k nativním rozhraním API. Vývojáři pracující na Electron JS mají přístup k nativním API operačních systémů, na kterých pracují. Vývojáři tak mohou vytvářet desktopové aplikace, které mají podobný přístup k funkcím nízké úrovně, jako je zobrazování oznámení.
- Podporuje webové technologie. Electron JS je adaptabilní, protože vývojáři se pro vývoj aplikací nepotřebují učit nový programovací jazyk. Znamená to tedy, že pokud rozumíte určitému jazykovému balíčku, který již používáte k vytváření webových aplikací, můžete jej použít také k vytvoření desktopové aplikace.
- Správa kódu a aplikací. Pro správu aplikací a kódu pro různé operační systémy nepotřebujete udržovat různé týmy. Electron JS vám umožňuje udržovat stejnou kódovou základnu pro operační systémy Linux, Windows a Mac.
- Snadné sestavení/rozmístění. Správce balíčků Electron pomáhá vývojářům zabalit do příslušných balíčků. Pomocí tohoto správce balíčků tak můžete uvolnit desktopovou aplikaci pro Linux, Mac a Windows ze stejné kódové základny.
Architektura Electron JS
Architektura Electronu je velmi podobná architektuře moderního webového prohlížeče, protože zdědí svou víceprocesovou architekturu od Chromia.
Architektura Electronu zahrnuje V8 JavaScript Engine, Node.JS a Libchromiumcontent.
- Node.JS – open-source JavaScript runtime, který běží na V8 JavaScript engine. Node.JS umožňuje vývojářům spouštět JavaScript mimo okno prohlížeče. Node.JS také umožňuje uživatelům spouštět surový kód JavaScript prostřednictvím interaktivního shellu.
- Libchromiumcontent – knihovna pro vykreslování Chromium, která je open source a spravuje ji Google Chrome. Chrome má minimalistické uživatelské rozhraní a jako modul rozložení používá blink a jako modul JavaScriptu V8.
- V8 JavaScript Engine – open-source JavaScript engine napsaný v C++ a JavaScript a vyvinutý společností Google.
#1. Node.js
Abyste mohli začít s Electron JS, musíte mít na místním počítači nainstalovaný Node.js.
Vyberte správnou verzi uzlu v závislosti na operačním systému, který v počítači používáte.
Spuštěním těchto příkazů zkontrolujte, zda byl Node.js správně nainstalován;
node -v
npm -v
Pokud jsou správně nainstalovány, tyto příkazy zobrazí verze uzlu a npm.
#2. Příkazový řádek
Způsob přístupu k příkazovému řádku bude záviset na vašem operačním systému.
- Linux bude záviset na distribuci.
- Windows: PowerShell nebo příkazový řádek.
- macOS: Terminál.
Některé editory kódu, jako je Visual Studio Code, se dodávají s integrovaným terminálem.
#3. Editor kódu
K napsání kódu Electron JS potřebujete editor kódu. Visual Studio Code patří mezi to nejlepší, co můžete vyzkoušet.
Jak nainstalovat Electron JS
Krok 1: Vytvořte projekt node.js.
Začněte pomocí těchto příkazů;
mkdir my-electron-app && cd my-electron-app
npm init
Příkaz npm init vás vyzve k vyplnění některých polí, jako je název aplikace, vstupní bod a popis.
Jako název aplikace můžete vybrat výchozí název složky. Nezapomeňte však nastavit vstupní bod vaší aplikace jako main.js.
Pole jako autor a popis mohou mít libovolnou hodnotu. Po provedení těchto kroků bude váš package.json vypadat nějak takto:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Krok 2: Nainstalujte elektron
Použijte tento příkaz;
npm install --save-dev electron
Krok 3: Přidejte do souboru package.json příkaz „start“.
{
"scripts": {
"start": "electron ."
}
}
Krok 4: Spusťte aplikaci
Tento příkaz použijte ke spuštění aplikace ve vývojovém režimu
npm start
Pracovní proces Electron JS
Budeme pokračovat ve vytváření aplikace z nastavení, které jsme právě provedli výše. Aplikace Electron má dva typy procesů; hlavní a renderer.
Hlavní proces
Hlavní skript je vstupním bodem jakékoli elektronové aplikace. Aplikace poběží v plném prostředí Node.js. Electron vyhledá hlavní skript v souboru package.json, který jste již nakonfigurovali během lešení aplikace.
Vytvořte main.js v kořenové složce pro inicializaci hlavního skriptu. Můžete to udělat ručně nebo použít tento příkaz;
touch main.js
Do souboru main.js můžete přidat následující kód
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Webové stránky v Electronu lze načíst buď ze vzdálené webové adresy nebo z lokálního HTML souboru. Pro demonstrační účely použijeme místní soubor HTML.
V kořenové složce vytvořte soubor index.html. Kód pro index.html je k dispozici vždy, ale můžete jej mít jako svůj startovací kód;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
Proces rendereru
Renderer vykresluje webový obsah. Skripty předběžného načtení jsou dodávány s kódem, který se spustí v procesu rendereru, než se začne načítat obsah webu.
Vytvořte preload.js v kořenové složce a přidejte tento kód;
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Spusťte vývojový server pomocí npm start a toto se zobrazí
Příklady aplikací: Electron JS
#1. Desktopová aplikace Slack
Slack je jedním z nejpopulárnějších nástrojů pro vzdálenou spolupráci. Uživatelé mohou pomocí této aplikace odesílat a přijímat zprávy, volat a sdílet soubory. Slack má webové i desktopové aplikace v operačních systémech Mac, Linux a Windows. Desktopová aplikace Slack využívá engine Chromium a Node.js k vykreslování vysoce kvalitního kódu.
#2. Desktopová aplikace WordPress
WordPress je největší redakční systém. Skutečnost, že můžete spustit web i bez základních kódovacích dovedností, přilákala mnoho uživatelů. WordPress je přístupný přes prohlížeč a prostřednictvím desktopových aplikací na Macu, Linuxu a Windows. Vylepšený desktop WordPress používá Electron JS.
#3. Desktopová aplikace WhatsApp
WhatsApp patří mezi nejoblíbenější aplikace pro zasílání zpráv v moderním světě, protože jej používají více než 2 miliardy lidí. WhatsApp byl původně navržen jako mobilní aplikace, ale nyní se stal platformou pro různá zařízení. WhatsApp desktop využívá Electron JS a je k dispozici na hlavních operačních systémech.
#4. Kód Visual Studio
Visual Studio Code, vlastněné společností Microsoft, patří mezi nejoblíbenější editory kódu. Visual Studio Code podporuje HTML, CSS a kód napsaný v různých programovacích jazycích, jako je JavaScript, Python, PHP, Java a Ruby. Desktopová aplikace vytvořená pomocí Electron JS je k dispozici pro operační systémy Windows, Mac a Linux.
Učební zdroje: Electron JS
#1. Oficiální dokumentace Electronjs
Dokumentaci Electronjs vytváří a udržuje Electronjs.org. Dozvíte se, co je Electron JS, jak nastavit svou první aplikaci Electron a jak vytvořit multiplatformní desktopové aplikace pomocí různých technologií. Dokumentace je vždy aktualizována při každém vylepšení nebo zavedení nové funkce.
#2. Master Electron: Desktopové aplikace s HTML, JavaScriptem a CSS
Master Electron je placený kurz na Udemy, který vám představí Electron JS. Naučíte se vytvářet desktopové aplikace pro různé operační systémy, jako je Mac, Linux a Windows. Master Electron je také perfektní zdroj, pokud chcete porozumět celému procesu Electron API.
#3. Tutorial Electron React
Electron React je placený kurz na Udemy, který učí vývojáře, jak vytvářet aplikace Electron pomocí React.js. React je jednou z nejznámějších knihoven JavaScriptu a byla vytvořena společností Meta (dříve Facebook).
Zabalit se
Electron JS je úžasná knihovna JavaScriptu pro vytváření aplikací pro stolní počítače v moderním světě, kde je třeba přijmout multiplatformní aplikace. Skutečnost, že můžete používat HTML, CSS a JavaScript, znamená, že vývojáři se nemusí učit nové technologické sady, aby vytvořili takové aplikace. Výhodou je také přítomnost velké a vstřícné komunity, protože podporu máte vždy zaručenou.
Můžete také prozkoumat některé nejlepší rámce JavaScriptu a vytvořit moderní aplikaci za kratší dobu.