Přeskočit na hlavní obsah

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 :)

Komentáře

  1. Pěkný článek, jen u toho posledního odstavce doufám, že nemáš pravdu.

    OdpovědětVymazat

Okomentovat

Populární příspěvky z tohoto blogu

Jak si v IT vydělat hodně peněz?

Na začátek by bylo dobré, abych objasnil samotný titulek, který může na někoho působit jako červený hadr. Článek nebude o obecných pravidlech, ale bude vyprávět můj vlastní příběh, na kterém vám zkusím ukázat, jak se dá docílit úspěchu, či alespoň správně nastartovat svojí vlastní kariéru v IT.

I když se z názvu článku dá dedukovat, že se vše bude točit kolem peněz, není tomu tak. Alespoň ze dvou třetin určitě ne. Ale to už předbíhám, pojďme to raději vzít hezky popořadě...

Kdybychom měli mluvit o roce 2017 jako o přelomové době, nejspíše to nebude pravda. I když pro někoho to může být rok plný úspěchů a štěstí v podobě narození zdravých dětí, svatby či první velké lásky, tak z pohledu lidstva se jedná o rok, který jen kopíruje předešlé a v oblasti technologií nás posouvá stejným tempem jako rok předtím.

Jsem naprosto přesvědčen o tom, že i když se současná doba tak nenazývá, tak prožíváme dobu, která jednou bude označena za revoluční, a to zejména díky vynálezu internetu, který je s…

Jak by se firmy neměly chovat k programátorům?

Každý, kdo pracuje v IT oboru, se jistě již setkal s různými „geniálními nápady“, od kterých si firma slibovala zlepšení produktivity či snížení nákladů. Ať už je to zavedení agilních principů, striktní kontrola práce či zavedení nové a skvělé metodiky, o které si „šéf“ přečetl včera na internetu. Jsou z toho skutečně tak nadšení i samotní vývojáři? A bude nový nápad fungovat?
K napsání tohoto článku mě navedly různé programátorské diskuze, kde si lidé stěžovali na firmu, kde pracují. Příklady, které zde uvedu, jsou z reálné praxe. Ať už jsem je zažil jako řadový programátor, či jako šéf týmu.
I když je poptávka po programátorech tak vysoká, že Vás headhunteři nahánějí i ve chvílích, kdy o to opravdu nestojíte, tak i přes to je mnoho lidí, kteří se bojí opustit svoje současné zaměstnání.
Čeho se nejčastěji bojíme? Je to samozřejmě nejistota, kterou si často omlouváme větami jako: „Tady mám své pohodlí, co když to jinde mít nebudu?“ nebo „I když mě to v práci štve a nebaví, tak mě ale…

Jak jsem technologicky postavil startup

Tento příběh pojednává o technologiích, nástrojích a vůbec o všem, co jsem potřeboval k tomu, abych byl schopen, postavit startup na zelené louce.

Každý správný příběh začíná stejně: "Jednou jsem...."

Kapitola první: Nápad
Jednou jsem se setkal s člověkem, který měl nápad na produkt, který se v průmyslu zatím nevyskytuje. I přes prvotní skepsi, kdy jsem si říkal: "Tohle už přeci dávno v průmyslu existuje, ne?", jsem došel ke zjištění, že nikoli.

Tím jsem se dostal ke svému prvnímu poučení. Průmysl je technologicky dost zabržděný. Osobně se domnívám, že těch důvodů, proč tomu tak je, je několik. Za prvé je to fakt, že většina lidí, kteří se pohybují v tomto odvětví jsou často konzervativní a za správné považují pouze léty osvědčené věci. Druhým důvodem je to, že jakákoli změna znamená riziko. Ať už z pohledu finanční ztráty tak i z pohledu stability výroby. No a třetím a nejzásadnějším důvodem je to, že ač zde máme spousty technologických vymožeností, narážíme na to,…