Electron na desktopu

Proč Electron a co přináší

Electron umožňuje vytvářet multiplatformní desktopové aplikace pomocí webových technologií (HTML, CSS, JavaScript). Kombinuje Chromium pro vykreslování UI a Node.js pro přístup k systému. Výsledkem je jednotný vývojový stack, rychlý prototypovací cyklus a rozsáhlý ekosystém knihoven. Elektron však přináší i specifické výzvy – velikost binárek, nároky na paměť a přísné bezpečnostní zásady.

Architektura: main proces, renderer procesy a IPC

• Main proces – startuje aplikaci, spravuje okna (BrowserWindow), menu, systémové API, životní cyklus, auto-update, notifikace a integraci s OS.
• Renderer procesy – jeden či více pro každé okno/záložku; běží na Chromium jádře a vykreslují UI.
• IPC komunikace – oddělení oprávnění vyžaduje bezpečný kanál mezi rendererem a mainem. Používejte ipcMain/ipcRenderer s request–response vzorem, validací zpráv a minimem povolených kanálů.
• Preload skripty – běží v rendereru dříve než UI; slouží k vytvoření bezpečného rozhraní přes contextBridge (tzv. bridging API).

Bezpečnostní model a zásady

• Sandbox – zapínejte sandbox: true a contextIsolation: true; renderer tak neběží s Node API.
• Disable remote – nepoužívejte historické remote API; nahraďte vlastním IPC a contextBridge.
• Content Security Policy – omezte zdroje skriptů, zakazujte unsafe-inline a eval; preferujte bundlery generující hashed či nonce skripty.
• Nahrávání vzdáleného obsahu – upřednostněte lokální soubory (file://) nebo vlastní protocol; pokud musíte načítat web, aktivujte webSecurity, allowRunningInsecureContent: false, partition a redirect blocking.
• Omezená oprávnění – whitelistujte jen nutné metody v contextBridge.exposeInMainWorld. Každý call validujte (schema, typy, rozsahy).
• Bez tajemství v klientovi – API klíče a tokeny nezabudovávejte; používejte backend proxy, OS keychain a krátce žijící tokeny.

Životní cyklus aplikace a správa oken

• Start: app.whenReady() → vytvoření BrowserWindow a načtení UI.
• Quit/close: zachytávejte before-quit/window-all-closed; na macOS respektujte app reactivation vzory.
• Více oken: pro sdílená data používejte shared workers, vlastní store nebo hlavní proces; nespolehejte na globály rendereru.
• BrowserView vs. WebView: BrowserView je first-class API v main procesu; <webview> je izolovaný tag, vyžaduje přísnou konfiguraci.

Integrace s OS: nativní menu, tray, protokoly, asociace souborů

• Menu – Menu/MenuItem s rolemi pro standardní chování (kopírovat, zapsat, okna).
• Tray – systémová ikona, kontextové menu, indikátory stavu.
• Protokoly a deep-linky – registrujte app.setAsDefaultProtocolClient('myapp') pro otevření aplikace z URL.
• Asociace souborů – otevření souboru do aplikace (Windows app.setUserTasks, macOS open-file event).
• Notifikace – new Notification() s nativní integrací a akcemi.

Přístup k systému: dialogy, schránka, obrazovky, napájení

• dialog – otevření/uložení souborů, varování.
• clipboard – práce se schránkou (text, HTML, obrázky).
• screen – informace o monitorech, DPI, dostupném prostoru.
• powerSaveBlocker – zamezení uspání během dlouhých operací.
• desktopCapturer – snímání oken/obrazovek (při respektování oprávnění OS).

Výkon a paměť: strategie optimalizace

• Jednoduché UI – vyhýbejte se nadměrným repaintům, preferujte virtualized lists a memoizaci.
• Lazy loading – dynamicky importujte těžké moduly; code splitting pro rychlý start.
• GPU – nechávejte hardware acceleration zapnuté; vypínejte jen při diagnostice nebo specifických bugu.
• Process model – méně oken = méně rendererů; sdílené webContents zvažujte s ohledem na izolaci.
• Leak detection – profilujte heap snapshots, sledujte detached DOM uzly, uvolňujte BrowserWindow a rušte IPC listnery při destroy.

Balíčkování, podepisování a distribuce

• Bundlery – electron-builder, electron-forge, případně ruční skripty (CLI + asar archiv).
• Artefakty – Windows: NSIS/MSIX; macOS: DMG/PKG, notarization a Gatekeeper; Linux: AppImage/deb/rpm/snap.
• Podepisování – code signing (Windows certifikát, Apple Developer ID), timestamp, správná identita balíčku.
• Auto-update – electron-updater (diferenciální aktualizace), kanály (stable/beta), ověřování podpisů.

Testování: jednotkové, integrační a E2E

• Unit – čistá logika (store, business) pod Jest/Mocha.
• Integration – testy IPC kontraktů, preload API a sandbox chování.
• E2E – automatizace pomocí Playwrightu nebo Spectron náhrad (Spectron je historický); spouštějte electron binárku s testovacím app dir.
• CI/CD – matrix buildy (win/macos/linux), cachování node modulů, podpis v bezpečném prostředí (HSM/Apple Notary API).

Bezpečnostní checklist pro produkci

• contextIsolation: true, nodeIntegration: false, enableRemoteModule: false.
• Výhradně lokální obsah nebo striktní CSP; blokujte navigaci (will-navigate, new-window).
• Preload poskytuje pouze narrow API; validace vstupů a serializace zpráv (Zod/ajv schema).
• Zakázat nevyužitá webPreferences (např. allowpopups, plugins); povolit safeDialogs.
• Automatické aktualizace – jen z podepsaných zdrojů, s ověřením integrit.

Práce s nativními moduly a systémovými API

• Node-API (N-API) – stabilní binární rozhraní pro nativní rozšíření; minimalizuje rebuilding při změně Node verze.
• Prebuilds – distribuujte předkompilované binárky pro hlavní platformy/architektury.
• Alternativy – pokud lze, preferujte WebHID/WebUSB/WebSerial nebo OS služby přes main proces.

Mezinárodní prostředí, přístupnost a UX

• I18n – message catalogs, správa pluralit, dynamické přepínání jazyka.
• A11y – respektujte standardy Chromium (ARIA, role, kontrast); nativní menu poskytuje klávesovou navigaci.
• Platformní konvence – klávesové zkratky, role menu a chování oken (macOS vs. Windows) by měla odpovídat očekávání uživatelů.

Datové úložiště, cache a offline režim

• Bezpečné ukládání – OS keychain/Keytar pro tokeny, sqlite/LevelDB/IndexedDB pro data.
• Persistenční vrstvy – migrační skripty, šifrování citlivých polí, zálohy a conflict resolution pro sync scénáře.
• Cache – řízené využití session a partition pro oddělení profilů/tenatů.

Observabilita: logy, telemetry, crash reporty

• Logy – strukturované logování v main/renderer, rotace a úroveň detailu dle env.
• Crash reports – integrace crashReporter, mapy zdrojů (sourcemaps) a minidump upload.
• Telemetry – explicitní souhlas, možnost opt-out, agregované metriky (start time, cold/warm boot, chyby IPC).

Vývojový workflow: bundlery, moduly a ESM

• Bundling – Vite/ESBuild/Webpack pro renderer; oddělené buildy pro main/preload s cílením na Node runtime.
• ESM – sjednoťte modulární systém; u main procesu zvažte type: module a import mapy.
• Hot reload – bezpečné pouze pro renderer; main reload může zničit stav – používejte řízeně.

Alternativy k Electronu: kdy a proč

• Tauri – WebView + Rust backend; menší footprint, velmi přísný bezpečnostní model. Vhodné pro menší UI a nižší nároky na nativní integraci Chromium.
• NW.js – podobná filozofie jako Electron, ale s jinou integrací Node a webu.
• Native cross-platform – Qt/.NET MAUI/Flutter – pokud prioritou není webový ekosystém, mohou nabídnout lepší výkon a menší nároky.

Typické architektonické vzory v Electron aplikacích

• Command bus přes IPC – centralizace volání do main procesu s autorizací a auditní stopou.
• Store synchronizace – jednostranný state push z main do rendererů (např. RxJS kanály).
• Modulární preload – několik izolovaných mostů (filesystem, shell, updater), každý s vlastním schématem validace.

Časté chyby a anti-patterny

• Povolené nodeIntegration v rendereru bez izolace kontextu.
• Nekontrolovaná navigace a nevalidované zprávy IPC.
• Obrovské renderer bundles bez code splitting, dlouhý time-to-interactive.
• Ukládání tajemství do localStorage nebo do zdrojů aplikace.
• Spoléhání na zastaralé API (remote, nekonfigurované webview).

Roadmapa implementace: od prototypu k produkci

1. PoC – skeleton app, bezpečný preload bridge, základní okno, CSP a bundling.
2. MVP – modulární IPC, logging, základní auto-update, CI buildy pro tři platformy.
3. Hardening – sandbox, code signing, audit IPC, memory/perf profily, crash reporting.
4. Release – kanály, differenční aktualizace, rollback strategie, telemetrické quality gates.

Závěr: kdy je Electron správná volba

Electron exceluje tam, kde chcete rychle doručit plnohodnotný desktop s bohatým UI, sdílet kód s webem a využít obrovský JavaScript ekosystém. Úspěch závisí na disciplinovaném bezpečnostním nastavení, precizním řízení výkonu a pečlivém balíčkování. Pokud tyto aspekty zvládnete, získáte multiplatformní aplikaci s moderním UX, krátkým time-to-market a udržitelnou vývojovou cestou.