Kompletní průvodce a výukové zdroje

autor:
Tweet
Share
Share
Pin

JavaScript se řadí k nejrozšířenějším programovacím jazykům současnosti. Díky jeho univerzálnosti, kdy je použitelný jak pro backend, tak pro frontend vývoj, si získal oblibu mezi mnoha vývojáři.

JavaScript disponuje rozsáhlou škálou knihoven a frameworků, které značně rozšiřují jeho možnosti nad rámec čistého JavaScriptu.

Electron.js představuje výkonný open-source framework, který umožňuje webovým vývojářům vytvářet nativní aplikace s využitím jejich stávajících dovedností. V tomto článku se blíže seznámíme s Electron.js a prozkoumáme, jak jej lze využít k realizaci vašich inovativních nápadů.

Electron JS

Electron JS je framework, který vývojářům umožňuje vytvářet desktopové aplikace s použitím technologií HTML, CSS a JavaScript. Za vývojem a správou Electron JS stojí společnost GitHub.

Tento framework kombinuje Node.JS a Chromium, což uživatelům dává možnost pracovat s jedinou kódovou bází JavaScriptu a vyvíjet multiplatformní desktopové aplikace, které jsou funkční na operačních systémech Windows, macOS a Linux.

Historie Electron.js se začala psát v lednu roku 2013. Původním záměrem bylo vytvořit multiplatformní textový editor, který by využíval JavaScript, HTML a CSS.

Původně byl Electron.js známý jako Atom Shell a jako open-source projekt byl zpřístupněn v roce 2014. Následně, v dubnu 2015, byl projekt přejmenován na Electron a jeho první API bylo vydáno v roce 2016.

Vlastnosti Electron JS

  • Kompatibilita s JavaScriptovými knihovnami a frameworky: Electron JS je kompatibilní s širokou škálou knihoven a frameworků JavaScript, jako jsou Vue.js, Angular a React.js. Tato kompatibilita umožňuje vývojářům využívat funkčnost těchto nástrojů při vývoji aplikací Electron.
  • Opakovaně použitelný framework: Nároky různých zákazníků se mohou lišit, což může být nákladné. Výhodou Electron JS je, že jej lze využít jak pro webové, tak pro desktopové aplikace. Díky jedné kódové základně je jej možné nasadit na různé operační systémy.
  • Přístup k nativním API: Vývojáři pracující s Electron JS mají přímý přístup k nativním API operačních systémů, což jim umožňuje vytvářet desktopové aplikace s přístupem k funkcím nízké úrovně, jako je například zobrazování notifikací.
  • Podpora webových technologií: Electron JS se vyznačuje vysokou adaptabilitou, jelikož vývojáři nemusí při vývoji aplikací studovat nové programovací jazyky. Pokud tedy ovládáte technologie, které používáte pro tvorbu webových aplikací, můžete je využít i při vývoji desktopových aplikací.
  • Správa kódu a aplikací: Není třeba udržovat oddělené týmy pro správu aplikací a kódu pro různé operační systémy. Electron JS umožňuje používat jednotnou kódovou základnu pro Linux, Windows a Mac.
  • Snadné sestavení a nasazení: Správce balíčků Electron usnadňuje vývojářům balení aplikací do příslušných balíčků. Díky tomuto správci balíčků lze z jediné kódové základny vytvořit desktopovou aplikaci pro Linux, Mac i Windows.

Architektura Electron JS

Architektura Electronu je velmi podobná architektuře moderních webových prohlížečů, protože přebírá 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 prohlížeč. Uživatelům také umožňuje spouštět čistý JavaScript kód prostřednictvím interaktivní konzole.
  • Libchromiumcontent: Knihovna pro vykreslování Chromium, open-source projekt spravovaný společností Google Chrome. Chrome má minimalistické uživatelské rozhraní a jako modul rozložení používá blink a V8 jako modul JavaScriptu.
  • V8 JavaScript Engine: Open-source JavaScript engine napsaný v C++ a JavaScriptu a vyvinutý společností Google.

#1. Node.js

Pro začátek s Electron JS je nezbytné mít na lokálním počítači nainstalované Node.js.

Zvolte správnou verzi Node v závislosti na operačním systému vašeho počítače.

Pomocí těchto příkazů ověřte, zda je Node.js správně nainstalované:

node -v
npm -v

V případě úspěšné instalace tyto příkazy zobrazí verze Node a npm.

#2. Příkazový řádek

Způsob přístupu k příkazovému řádku se liší v závislosti na operačním systému.

  • Linux: Způsob závisí na konkrétní distribuci.
  • Windows: PowerShell nebo příkazový řádek.
  • macOS: Terminál.

Některé editory kódu, jako je Visual Studio Code, mají integrovaný terminál.

#3. Editor kódu

Pro psaní kódu v Electron JS je nutný editor kódu. Mezi oblíbené volby patří Visual Studio Code.

Jak nainstalovat Electron JS

Krok 1: Vytvořte projekt Node.js.

Použijte tyto příkazy:

mkdir my-electron-app && cd my-electron-app
npm init

Příkaz npm init vás vyzve k vyplnění některých polí, například název aplikace, vstupní bod a popis.

Jako název aplikace můžete použít výchozí název složky. Nezapomeňte nastavit vstupní bod aplikace na main.js.

Pole jako autor a popis mohou mít libovolnou hodnotu. Po provedení těchto kroků by měl váš soubor package.json vypadat podobně:

{
"name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Peter Drury",
  "license": "MIT"
}

Krok 2: Nainstalujte Electron.

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.

Pro spuštění aplikace ve vývojovém režimu použijte následující příkaz:

npm start

Pracovní proces Electron JS

Navážeme na vytvoření aplikace z nastavení provedeného výše. Aplikace Electron má dva typy procesů: hlavní a renderer.

Hlavní proces

Hlavní skript je vstupním bodem každé aplikace Electron. Aplikace běží v plnohodnotném prostředí Node.js. Electron hledá hlavní skript v souboru package.json, který jste již nakonfigurovali během vytváření aplikace.

Vytvořte soubor main.js v kořenové složce pro inicializaci hlavního skriptu. Můžete to udělat ručně nebo pomocí tohoto příkazu:

touch main.js

Do souboru main.js vložte 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čítat buď ze vzdálené webové adresy, nebo z lokálního HTML souboru. Pro demonstrační účely použijeme místní HTML soubor.

Vytvořte soubor index.html v kořenové složce. Kód pro index.html je k dispozici, ale můžete jej použí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í obsahují kód, který se spouští v procesu rendereru předtím, než se začne načítat obsah webu.

Vytvořte soubor preload.js v kořenové složce a vložte do něj 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í příkazu npm start, a zobrazí se následující výstup:

Příklady aplikací: Electron JS

#1. Desktopová aplikace Slack

Slack je jeden z nejpopulárnějších nástrojů pro vzdálenou spolupráci. Uživatelé mohou pomocí této aplikace posílat a přijímat zprávy, volat a sdílet soubory. Slack nabízí webové i desktopové aplikace pro operační systémy Mac, Linux a Windows. Desktopová aplikace Slack využívá Chromium a Node.js pro vykreslování kvalitního kódu.

#2. Desktopová aplikace WordPress

WordPress je největší redakční systém. Skutečnost, že umožňuje spuštění webu i bez pokročilých kódovacích znalostí, si získala mnoho uživatelů. WordPress je dostupný přes prohlížeč i prostřednictvím desktopových aplikací na Mac, Linux a Windows. Desktopová aplikace WordPress využívá Electron JS.

#3. Desktopová aplikace WhatsApp

WhatsApp patří k nejoblíbenějším aplikacím pro zasílání zpráv. Používá ho více než 2 miliardy lidí. Ačkoliv byl WhatsApp původně určen pro mobilní telefony, rozšířil se na různá zařízení. Desktopová verze WhatsApp využívá Electron JS a je dostupná pro hlavní operační systémy.

#4. Visual Studio Code

Visual Studio Code, od společnosti 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 jsou JavaScript, Python, PHP, Java a Ruby. Desktopová aplikace, vytvořená s pomocí Electron JS, je dostupná pro 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 zde, co je Electron JS, jak nastavit svou první aplikaci a jak vytvářet multiplatformní desktopové aplikace s využitím různých technologií. Dokumentace je průběžně aktualizována s každým novým vylepšením nebo funkcí.

#2. Master Electron: Desktopové aplikace s HTML, JavaScriptem a CSS

Master Electron je placený kurz na platformě Udemy, který vás seznámí s Electron JS. Naučíte se vytvářet desktopové aplikace pro různé operační systémy jako Mac, Linux a Windows. Master Electron je rovněž ideálním zdrojem pro pochopení celého procesu Electron API.

#3. Tutorial Electron React

Electron React je placený kurz na Udemy, který učí vývojáře, jak vytvářet aplikace Electron s použitím React.js. React je jednou z nejpopulárnějších JavaScriptových knihoven a byla vytvořena společností Meta (dříve Facebook).

Závěrem

Electron JS je výborná JavaScriptová knihovna pro vytváření desktopových aplikací v moderním světě, kde jsou potřeba multiplatformní aplikace. Díky tomu, že můžete používat HTML, CSS a JavaScript, se vývojáři nemusí učit nové technologie, aby takové aplikace vytvořili. Další výhodou je velká a vstřícná komunita, která zaručuje podporu.

Doporučujeme prozkoumat i některé další frameworky JavaScriptu a vytvořit moderní aplikace v kratším čase.