Electron JS használata asztali programkörnyezetben

Az Electron JS (vagy csak simán Electron) pont ezt a célt szolgálja. Segítségével Javascriptben írhatjuk a kódot, majd ezt lefordítva kapunk egy futtatható állományt, mely nem igényel sem internetkapcsolatot, sem pedig külön böngészőt.

Hogy működik pontosan? Mik az előnyei? Biztosan van valami trükk a háttérben

Van bizony, de nem olyan súlyos, mint amennyire elsőre gondolnánk. Miután megírtuk a forráskódot, a fordítás (azaz build) pillanatában az Electron az egészhez hozzácsomagol egy Chromium motort, amely a háttérben értelmezi és végrehajtja a JS funkciókat. A Chromium egy nyílt-forráskódú projekt, amelyből a jól ismert Chrome webböngésző is építkezik. Ez persze nem azt jelenti, hogy ez csak ennyit tud.
Valójában kapunk operációs rendszer specifikus funkciókat is. Ilyen például a Taskbar Customization, amellyel a Windows tálcán megjelenő ikonjára tehetünk rá egy fedőréteget, képfájlok felhasználásával.
Ennek köszönhetően megjeleníthetőek például “x számú új üzenet” buborékok az ikon sarkában.

Valószínűleg már egyértelmű, hogy ha vannak Windows specifikus funkciók, akkor bizony Linux és MacOS specifikusak is, azaz egy Cross-Platform megoldásról beszélhetünk, mely képes minden ma használt operációs rendszeren jól működő, futtatható állományt generálni. Egyértelmű előny, hogy a kódbázis gyakorlatilag ugyanaz mindhárom esetben, hiszen ezzel rengeteg időt meg tudunk spórolni, mivel nem kell minden egyes új funkciót újraírni az adott nyelven, egy konkrét környezetre.
Persze, mint ahogy azt már megszokthattuk a platformfüggetlen technológiáknál, az elérhető maximális teljesítmény alacsonyabb, de szerencsére nem minden esetben kell kihasználnunk az utolsó MHz-et is a hardverünkön és gyakran optimálisabb megoldásokat is kapunk egy-egy problémára egy ilyen csomagban, mint amilyeneket magunktól írnánk elsőre.

Hogyan tudom használni az Electron JS-t?

Itt kicsit ködössé válhat a helyzet az elején, mert többféle releaset választhatunk, a git repoból klónozott kész állományok teljesen máshogy néznek ki mint amihez szoktunk, de valójában elkezdhetjük nagyon egyszerűen is, nem kell hozzá giten és npm-en kívül semmi.

Először klónozzuk az electron-quick-start repót:

Aztán a mappán belülről tegyük fel a szükséges csomagokat és indítsuk el a projektet:

Itt rögtön kapunk egy ablakot egy Hello World példával, ami pontosan úgy néz ki, mintha egy rendes asztali program lenne, pedig tudjuk, hogy a háttérben böngészőmotor fut.

Ha megnézzük a forráskódot, találkozhatunk néhány olyan kifejezéssel, amellyel valószínűleg máshol még nem, a JS-en belül.

Nézzük a main.js-t.
Az egész egy BrowserWindow Object létrehozásával kezdődik, ezen belül fog futni minden amit látunk:

Ezzel egy 800x600-as felbontású ablakot hozunk létre. A preload.js az a fájlunk lesz, ami legelőször fut le.
Ezután a megjelenített tartalmat kell betölteni:

Itt elsőre úgy tűnik, hogy nincs nagy csoda, szabványos HTML szintaxis van ebben a fájlban, azzal a Hello World + 3 verzió stringgel amit már láttunk az indításnál.
Annyi érdekesség azonban esetleg lehet benne, hogy a verziók utólag kerülnek be az ezeknek fenntartott span elemekbe, ezt csinálja a preload.js. Ha belenézünk, találunk benne egy process objectet, amiben a chrome, nodejs és electron verziók is megtalálhatóak. Ha kiírjuk konzolra, akkor ennél sokkal többet is találhatunk benne.

Például a getSystemMemoryInfo függvény visszaadja a rendszermemória állapotát egy objectben, egész pontosan így:

Ez értelemszerűen bájtban van, látszik, hogy nagyjából 28GB lapozófájl (jelenleg windowson fut, így ez nem a hagyományos, linuxos értelemben vett swap) és kb 17GB tényleges ram le van foglalva.
Ezen kívül például lekérhetünk rendszerverziót a getSystemVersion metódussal. Windows 10 esetében egy ehhez hasonló stringet fogunk visszakapni: 10.0.19044
Ennek persze csak akkor van értelme, ha tudjuk a platformot. A process.platform ezt is megadja, ez esetben “win32”.

Összességében tehát az Electron sokkal többet tud, mint azt elsőre gondolnánk, valós alternatíva lehet ha asztali környezetben szeretnénk fejleszteni és már van egy alapvető Javascript tudásunk.