Electron, 1. část

01.02.2019 18:54 Michael JavaScript, HTML, CSS

Electron umožňuje tvořit desktopové aplikace pomocí webových technologií. O co jde a jak vytvořit takovou základní aplikaci se podíváme v tomto článku.

Electron, 1. část - Úvod, příklad, výhody a nevýhody
Electron, 2. část - Hlavní a vykreslovací procesy a jejich vzájemná komunikace

Co je Electron?

Electron je Javascriptový framework pro tvorbu multiplatformních desktopových aplikací pomocí HTML, CSS a JS. Umožňuje tvorbu nativních aplikací pro Linux, Windows a macOS. Jde o open-source projekt za kterým stojí GitHub, ale přispívají i další firmy jako třeba Microsoft (logicky) nebo Slack.

Proč ho používat?

Electron používá NodeJS pro práci se systémem a Chromium pro vykreslování rozhraní. Obě části běží jako samostatný proces a navzájem mezi sebou komunikují (o tom více v příštím článku). Uživatel frameworku má tak k dispozici všechno to, co v běžném prohlížeči a navíc celý Node ekosystém. Kromě standardní Node knihovny tedy i hromadu balíčků z npm. Zároveň není třeba řešit podporu napříč prohlížeči a lze pracovat se systémovými notifikacemi, tvořit nativní menu nebo řešit automatické aktualizace.

Vytvářet multiplatformní aplikaci často znamená psát ji pro každý systém v jeho nativním jazyce. V Electronu je aplikace napsaná jednou a následně se zabalená do konečného spouštěcího nebo instalačního balíčku pro konkrétní platformu.

Na druhou stranu, i s tou nejjednodušší aplikací startujete celý prohlížečový engine a ten už si ukousne slušný kus paměti. Tím pádem i výsledný balíček je poměrně velký (obyčejná Hello World aplikace může mít nad 30 MB) a zvláště pokud pracuje s větším množstvím dat, může mít aplikace problémy s výkonem. Úzkým hrdlem bývá DOM a tak je dobré dávat si pozor na množství vykreslovaných prvků.

Ahoj světe!

Ukážeme si vytvoření základní Hello World aplikace. Budeme potřebovat pouze nainstalované Node a npm.

Vytvořme si adresář pro naši aplikaci a v něm prázdný soubor main.js a index.html. V prvním souboru bude obsažená veškerá logika a start aplikace. Ten druhý bude šablona pro rozhraní - v podstatě většina toho, co uživatel uvidí.

V adresáři inicializujeme npm příkazem:

npm init -y

To vytvoří soubor package.json s výchozím nastavením. Je třeba se ujistit, že název souboru v parametru "main" je náš main.js. Takhle bude Electron později vědět, který soubor je hlavní a kde má začít.

Soubor package.json by měl vypadat nějak takto:

{
  "name": "electron-kutaccz",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Dále zbývá nainstalovat Electron příkazem:

npm i electron

Přepneme do main.js, kde Electron vložíme. Budeme z modulu potřebovat části app a BrowserWindow. První spravuje celkový chod aplikace, druhý je objekt okna uživ. rozhraní.

const { app, BrowserWindow } = require('electron')

Můžeme vytvořit první a zároveň jediné okno aplikace. V tomto příkladě má aplikace pouze jedno okno, ale můžeme jich vytvořit libovolné množství. Důležité je neztratit na ně referenci. V ten moment garbage collector instanci smaže a okno se tak zavře.

Pro vytvoření okna je třeba počkat, až bude aplikace připravená. To signalizuje event "ready". Podobně pak zase event "window-all-closed" signalizuje zavření všech oken.

const { app, BrowserWindow } = require('electron')

/**
 * Bez globální reference na okno by ho mohl garbage collector
 * smazat a okno by se zavřelo
 */
let window;

app.on('ready', () => {
  // Vytvoří novou instanci okna
  window = new BrowserWindow({
    width: 800,
    height: 600
  })

  // Načte HTML šablonu pro okno
  window.loadFile('index.html')

  // Otevře v okně vývojářské nástroje
  //window.webContents.openDevTools()

  // Pokud bylo okno zavřeno, vymaže referenci
  window.on('closed', () => window = null)
})

app.on('window-all-closed', () => {
  /**
   * Na macOS je běžné, že aplikace běží na pozadí, dokud nejsou
   * explicitně zavřené pomocí zkratky Cmd + Q
   */
  if (process.platform != 'darwin') {
    app.quit()
  }
})

Teď vytvoříme základní HTML kostru pro šablonu index.html:

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Electron Kutac.cz</title>
</head>

<body>
  <main>
    <h1>Hello World!</h1>
    <p>
      I'm using Electron version
      <script>document.write(process.versions.electron)</script>
      on 
      "<script>document.write(process.platform)</script>"
      platform!
    </p>
  </main>
</body>

</html>

Aplikace je hotová. Pro spuštění nadefinujeme npm skript, který spustí lokálně nainstalovaný Electron v adresáři. Definici přidáme do parametru scripts v package.json:

"scripts": { 
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron ."
}

A skript spustíme příkazem:

npm start

Po dokončení skriptu se otevře okno aplikace, které by mělo vypadat nějak podobně:

Co dál?

Jestli vás Electron trochu zaujal, doporučuju podívat se na boilerplate projekty v seznamu awesome-electron. Najdete tam třeba připravené projekty pro tvorbu Electron aplikací v ClojureScriptu nebo VueJS, Reactu, apod.

V příštím díle se podíváme na práci se soubory a komunikaci mezi hlavním a vykreslovacím procesem.

Co dál s Electronem?

Framework má své nevýhody a asi nikdy nebude moct být tak úzce integrovaný se všemi vlastnostmi daného OS, jako aplikace v nativním jazyce platformy. Přesto jeho popularita roste a staví na něm takové aplikace jako Slack, Visual Studio Code, Postman, Spotify, Skype a další.

GitHub na něm staví svůj textový editor Atom (což je vlastně důvod, proč vůbec Electron vznikl), který býval notorický pro svou šnečí rychlost. Taky kvůli tomu se pracuje na optimalizaci jádra, což by se mohlo pozitivně projevit i na Electronu.

Taky Google se snaží o něco podobného se svým projektem Carlo, který by měl místo ve výsledném balíčku využívat lokální instalaci Chrome.

Další možnou alternativou mohou být do určité míry desktopové PWA. Ty ale mají (alespoň zatím) ještě menší integraci s OS, takže jde o poměrně specifický případ.

Závěrem

Nemyslím, že má Electron ambice konkurovat ryze nativním aplikacím nebo řešením podobným Qt, GTK+, apod. Spíše existuje jako alternativa, zejména Javascriptovým vývojářům, pro potenciálně levnější/rychlejší vývoj na více platforem najednou a nabízí zase trochu jiné možnosti.

Máte s Electronem nebo vývojem desktopových aplikací zkušenosti? Je něco, co byste chtěli doplnit nebo na co se zeptat? Dejte vědět v komentářích.