Desktop aplikace v javascriptu

Od doby, kdy Brendan Eich vytvořil svou první verzi javascriptu, uběhlo již více než 21 let. Přesněji řečeno, na podzim bude slavit dvaadvacáté narozeniny. V té době se jednalo o jazyk, který měl být "lehčí" variantou Javy a proto i zvolený název se nese v duchu snahy, se svést na popularitě Javy.

V roce 1995 byl svět naprosto rozdílný. Alespoň co se IT technologií týče. V té době neexistovaly sociální sítě a o mobilních telefonech jste si mohli nechat leda tak zdát. Byli jste rádi, že jste sehnali Dooma na disketách a pomocí ladění konvenční paměti, ho nakonec rozeběhli. Bavíme se o době, kdy počítače hrály naprostou jinou roli a byly spíše výsadou několika nadšenců.

Asi nikdo by tenkrát nevsadil na to, že se javascript dostane do fáze, ve které ho známe dnes. Z nechtěného dítěte v podobě věcí jako jQuery, po pubertu v podobě Node.js až k dospělosti v podobě cloud lambda functions a serverless architektury.

Dnešní článek bude pojednávat o tom, jak lze javascript využít pro desktop aplikace.

Kdy je dobré přemýšlet o javascriptu na desktopu?

Pokud se rozhodnete, že javascript zvolíte pro desktop aplikaci, měli byste si dobře rozmyslet, zda je to pro vaši budoucí aplikaci vhodná technologie.

Abych se vyhnul obecným pravidlům, kdy ano a kdy ne, zkusím popsat důvody, proč jsme se touto cestou rozhodli jít my.

Zkusme si to v rychlosti shrnout....

Pracuji na projektu multitenantní cloud aplikace s webovým a mobilním klientem. Cílem aplikace je sbírání dat z různých bluetooth zařízení a tyto data ukládat zpět do cloudu. Na straně serveru je javascript v podobě node.js, express či graphql a na straně klienta je to React pro web a React Native pro mobilní aplikaci. Zjednodušeně řečeno, vše je javascript (v našem případě s pomocí Typescriptu).

Existují dva hlavní důvody, proč je nutné napsat desktop aplikaci. 

Prvním důvodem je to, že v případě komunikace Android vs Bluetooth LE se často dostanete do neřešitelných problémů v podobě různých verzí Androidu, různých výrobců jednotlivých zařízení a také v podobě toho, že zjistíte, že s určitým BT zařízením nejste schopni komunikovat, protože to prostě a jednoduše nejde. Existuje zde ještě možnost komunikace přes novou verzi Chrome, který Bluetooth LE sice umí, ale je to zatím tak nestabilní, že na produkční nasazení je příliš brzy.

Druhý důvod je ten, že existují zákazníci, kteří požadují desktop aplikaci, protože mobilní verze je pro ně nevhodná.

Cílová aplikace by tedy měla mít následující vlastnosti:

1. Možnost komunikace s Bluetooth LE
2. Komunikace s cloud serverem
3. Automatické aktualizace celé aplikace v podobě centrálního řízení z cloudu
4. Aplikace by měla být multiplatformní (Windows, Linux, Mac OS)

Dá se říci, že se jedná o vcelku jednoduchou aplikaci.

Jak už jsem zmínil výše, zbytek systému je napsán v javascriptu, takže jsem se dostal na rozcestí, zda jít doprava či doleva. Na jedné straně by bylo možné napsat aplikaci v Jave, ve které jsem kdysi už jednu aplikaci psal a mám s tím zkušenosti. Na straně druhé, jít cestou javascriptu, díky kterému by nebylo nutné zavádět další technologii či jazyk.

Jak už článek napovídá, volba padla na javascript a to přesně z těchto důvodů:

1. Díky jednotnému jazyku se snižuje komplexita systému
2. Možnost sdílení kódu mezi jednotlivými částmi systému
3. Využití stejného paradigmatu jako v případě webu a mobilní aplikace
4. Jednoduchá distribuce a aktualizace, například pomocí Code Push
5. Aplikace může být multiplatformní

Zkráceně řečeno, pro potřeby naší aplikace je javascript dobrou volbou.

V čem tedy takovou aplikaci přesně napsat?

Pokud se podíváte, jaké máte možnosti, tak vám nakonec zbydou dvě varianty. Electron a NW.js.

Volba padla na Electron a to čistě z pragmatických důvodů. Vím, že by pro naše potřeby bylo možné jí i druhou cestou a to vlastně i z toho důvodu, že Electron je jen abstrakce nad NW.js.

Nicméně Electron je populárnější a jsou v něm napsány aplikace, které již znám. Za všechny můžu zmínit třeba Visual Studio Code, Atom či Slack. Dobrá reference, která zajišťuje to, že projekt za měsíc "neumře" :)

Jak Electron funguje?

Electron je rozdělen na dvě hlavní části. První částí je main process, který běží pod samotným Node.js a renderer fáze, která běží pod Chromiem.

Velice zjednodušeně je to tak, že při spuštění aplikace se pustí main proces, který otevře okno, ve kterém je renderer část.

Main process

Hlavní a spouštěcí proces beží pod Node.js, které vám umožňuje přistupovat k samotnému "železu" hostitele. Tedy máte možnost pracovat s file systémem či třeba s právě zmíněným bluetooth adaptérem.

V main procesu dále nastavujete například velikost okna či modifikujete samotné menu.

Renderer část

K renderer části se toho moc psát nemusí. Jedná se v podstatě o webovou stránku. Tedy máte možnost použít vše, na co jste zvyklý z webových aplikací. V našem případě byla volba jasná a tou je React + Redux. Takže díky tomu, nejen, že člověk píše stejným způsobem, ale také má možnost vetšinu svého kódu sdílet. Díky různým responsivním CSS frameworkům jako je Bootstrap, je možné i prvky správně pozicovat. V tomto případě je možná i lepší variantou jít do čistého CSS flexboxu a tím pozicovat prvky tak, jak je člověk zvyklý z jiných jazyků, ve kterých se běžně desktop aplikace píší.

Co se týče samotného Reduxu, tak jeho State může být uložen v localStore či přímo na disku ve vlastním souboru. To může pomáhat tomu, aby bylo možné, napsat aplikaci s offline variantou.

Komunikace mezi main a renderer

Electron má pro komunikaci mezi těmito procesy vlastní řešení. Tím řešením je ipcMain a ipcRenderer. A jak už bývá zvykem, tato komunikace může být synchronní i asynchronní.

Jednoduchá ukázka komunikace mezi main a renderer:

// main process
import {ipcMain} from 'electron';
ipcMain.on('hello', () => console.log('Hello world'));

// renderer
import {ipcRenderer} from 'electron';
ipcRenderer.send('hello');

Zprávy můžete samozřejme posílat obousměrně a tím zajistit kompletní integraci.

Závěr

Co se týče samotného stacku, který jsme pro desktop aplikaci zvolili, tak je vcelku jednoduchý a vlastně stejný jako v případě webu. Tedy: Typescript, Webpack, React a Redux.

I přes to, že jde o vcelku moderní způsob, tak je neodiskutovatelné, že pro produkční nasazení se jedná o naprosto relevantní variantu. Jádro samotné aplikace totiž leží v renderer části, která je dnes a denně testována stovkami miliónů uživatelů. Proto není důvod se bát toho, že by javascript nebyl na desktopu použitelný. Osobně se domnívám, že existuje velké množství aplikací, které mohou být v javascriptu napsány.

O tom, jak to bude v budoucnu, se nechme překvapit. Nicméně jedno je jisté, desktop aplikací v javascriptu bude jen přibývat. A to je dobře :)