DeskGap, czyli lżejszy Electron. Poznajcie raczkujące środowisko

Ekosystem front-endu zaskakuje praktycznie każdego dnia. Coś, co kiedyś było przeznaczone tylko do tworzenia aplikacji webowych, dziś może być z powodzeniem wykorzystywane także do projektów desktopowych. Dlatego też dzisiaj na tapet wzięliśmy DeskGap.

Paweł Ochota. Senior React Developer w Startup Development House. Doświadczony Front-End Developer z 8-letnim stażem. Programista ze świadomego wyboru, dla którego praca to przede wszystkim pasja. Związany z JavaScriptem od samego początku rewolucji, którą przyniósł HTML5. Uwielbia dzielić się wiedzą o front-endzie na blogu, a także jako mentor w szkole programowania Future Collars.


Pamiętam jakie wrażenie wywarła na mnie informacja o tym, że istnieje możliwość tworzenia aplikacji mobilnych za pomocą JavaScriptu. Praktycznie rozpoczynałem wtedy swoją przygodę z pracą w IT i jako Web developer byłem skupiony wyłącznie na przeglądarkach. Aż tu nagle ktoś wymyślił, że można taką „przeglądarkę” opakować w aplikację natywną i gotowe!

Mowa oczywiście o Phonegapie, z którym mam zarówno miłe wspomnienia, jak i koszmarne flashbacki, gdy trzeba było doprowadzić taką apkę do użyteczności np. na Androidzie 2.3. Tak czy owak była to na swój sposób rewolucja, ponieważ Phonegap znalazł sposób na tworzenie multiplatformowych aplikacji mobilnych z użyciem technologii webowych.

Obecnie nie jest to jedyna możliwość, bo przecież mamy jeszcze coś takiego jak React Native, czy NativeScript. Nawet niektóre systemy operacyjne traktują HTML5 jako platformę tej samej rangi co języki natywne. Mam tu na myśli Tizena, WebOSa i nieco już podstarzałego Blackberry 10. Mam nadzieję, że zauważyliście jak płynnie przeszedłem z mobilek na telewizory. Front-end ma te środowiska już ogarnięte, ale co z tradycyjnymi aplikacjami desktopowymi?

Czym jest DeskGap?

Jeżeli mowa o środowisku desktopowym, niezależnie czy to Windows, MacOS czy Linux, tutaj króluje dość dobrze przyjęty przez społeczność Electron. W dużym skrócie działa on na podobnej zasadzie co PhoneGap dla mobilek. To ogromne niedopowiedzenie, dlatego odsyłam zainteresowanych do tego wpisu. Obok Electrona, przebija się również ciekawa idea Microsoftu, aby wykorzystać React Native do tworzenia apek w ekosystemie Windows. Projekt ten zaczyna zdobywać coraz większą popularność na githubie, więc możliwe, że lada moment stanie się ważnym graczem na rynku aplikacji desktopowych.

Jakiś czas temu pojawiła się jeszcze jedna alternatywa do tworzenia multiplatformowych aplikacji na desktop. Jest nią łudząco podobny z nazwy do PhoneGapa, projekt DeskGap. I nie tylko nazewnictwo upodabnia ten framework (bo tak go określają twórcy) do PhoneGapa.

DeskGap umożliwia budowanie multiplatformowych aplikacji desktopowych z użyciem dobrze znanych front-endowcom technologii takich jak JavaScript, HTML i CSS. To co przede wszystkim odróżnia go od Electrona, to bazowanie na domyślnym silniku renderującym w systemie operacyjnym. Wynikowa paczka jest zatem mniejsza, ponieważ nie zawiera np. silnika Chromium jak to ma miejsce w Electronie. Na tym polu DeskGap także ma konkurencje, np. w postaci electrino, który zastosował identyczne podejście do tematu. Twórcy DeskGapa postanowili jednak nieco się wyróżnić i wykorzystać zalety Node.js poprzez dołączenie go do swojego frameworka. Dzięki temu zabiegowi możliwości potencjalnych aplikacji utworzonych z pomocą DeskGapa znacząco wzrosły.

Szybki start

Pora przejść do praktyki. Aby pokazać jak wykorzystać DeskGapa do tworzenia aplikacji desktopowych, zrobię prostą aplikację losującą prawa Murphy’ego. Ot coś innego niż tylko suchy „Hello world!”, choć wciąż nic skomplikowanego. Do tego zobaczymy czy DeskGap polubi się z Reactem.

Wygenerujmy więc za pomocą CRA prostą aplikację Reactową:

Nazwałem tę aplikację niezbyt oryginalnie, bo deskgap-murphy, ale przynajmniej wiadomo o co chodzi. Pora na główną funkcjonalność, czyli losowanie cytatów. W tym celu zmodyfikujemy App.js i dodamy przycisk do losowania:

W stosunku do boilerplate’a, który wygenerował create-react-app, zmian jest niewiele. To co nas będzie najbardziej interesowało to przycisk „Losuj cytat!” i kontener o klasie App-quotes, do którego trafi wylosowany tekst. Umieszczę moje ulubione cytaty Murphy’ego dotyczące programowania w tablicy quotes:

Wybrane cytaty pochodzą z wikiquotes. Pora na funkcję losującą:

Nic skomplikowanego. Po prostu losujemy liczbę od 1 do maksymalnie długości przekazanej tablicy. Teraz wystarczy tylko obsłużyć kliknięcie w przycisk i wylosowanie początkowego tekstu jako wartości domyślnej. Jak wiemy React reaguje rerenderem na zmianę propsów lub stanu. Nie chce się rozdrabniać na inne komponenty (bo to tylko przykład) więc muszę postawić na stan. Skorzystam z hooka useState i przekażę do niego wynik randomQuotes jako wartość domyślną:

Zmienna quote będzie przechowywała wylosowany cytat, a funkcja setQuote posłuży nam do jej zmiany. Zbierając wszystko do kupy, nasz plik App.js powinien wyglądać mniej więcej tak:

Celowo ukryłem na listingu tablicę quotes żeby nie rozwlekać kodu, a samą tablicę przedstawiłem wcześniej. Pora na doinstalowanie do projektu DeskGapa:

Teraz potrzebujemy pliku, który stanie się punktem wejścia dla DeskGapa i stworzy główne okno aplikacji. W katalogu src tworzę więc plik deskgap.js i umieszczam w nim następujące instrukcje:

Najważniejszym elementem w powyższym kodzie jest obiekt app, który zarządza stanem całej aplikacji. Gdy nastąpi zdarzenie ready tworzę nowe okno przeglądarki z określonymi wielkościami, tytułem i informacją, że należy je pokazać dopiero wtedy, gdy nastąpi zdarzenie ready-to-show. Jest to konieczne żebyśmy nie musieli oglądać procesu wczytywania strony. Następnie z pomocą metody loadURL wczytuję localhosta na porcie 3000, bo jest to domyślna wartość portu, gdy mamy odpaloną apkę z użyciem CRA.

Została nam już tylko kwestia uruchomienia samej aplikacji na desktopie. W tym celu musimy dodać do pliku package.json punkt startowy dla DeskGapa:

oraz polecenie, które go wywoła:

I to tak na prawdę wszystko. Teraz wystarczy w konsoli wpisać yarn deskgap i aplikacja będzie prezentowała się następująco:

Aplikacja deskgap-murphy

Oczywiście musimy mieć w tle uruchomionego yarn start dla Reacta. Aby tego uniknąć, powinniśmy wybudować wersję binarną dla danego systemu operacyjnego. Ten proces jest już nieco bardziej złożony i chciałbym na to poświęcić osobny wpis. Cały projekt wrzuciłem na repozytorium.

Osoby, które pisały już w Electronie na pewno zobaczą podobieństwo instrukcji. Nawet strona główna DeskGapa odsyła do dokumentacji Electrona. I tu zaczynają się pierwsze schody…

Wady DeskGapa

Choć DeskGap sam w sobie jest ciekawym projektem to niestety cierpi na kilka bolączek, które mogą przekreślić jego wybór w profesjonalnych, komercyjnych zastosowaniach. Część z nich spowodowana jest brakiem dojrzałości tej biblioteki, a część posiada podobną genezę jak w przypadku problemów PhoneGapa.

Brak dokumentacji

DeskGap posiada na swojej stronie opis API, ale jest to głównie zbiór linków kierujących do Electrona. Zamysłem twórców było pewnie, aby programiści Electrona mogli łatwo przeskoczyć do ich projektu, ale nie zmienia to faktu, że dokumentacja praktycznie nie istnieje. Jej brak może okazać się najpoważniejszą wadą DeskGapa, ponieważ nikt na poważnie się nim nie zainteresuje, jeżeli wsparcie leży i kwiczy. Nie pozostaje póki co nic innego poza analizowaniem dostępnych linków i przytuleniem issues na githubie, gdzie z pewnością przewinie się sporo pytań.

Różne systemy, różne błędy

Jeżeli będziemy chcieli wspierać szeroką gamę systemów, w tym np. Windowsa w wersji 7, to musimy się liczyć z tym, że domyślnym silnikiem renderującym w siódemce jest Trident. A to oznacza zabawę z IE11 i raczej zapomnienie o najnowszych ficzerach front-endowych. Na Windows 10 dostaniemy Edge więc jest lepiej, a w MacOS będzie to Webkit – to zdecydowanie lepsze. Trzeba jednak pamiętać, że każdy z tych silników ma swoje błędy, jedne większe, inne mniejsze. Tworząc apkę multiplatformową będziemy musieli zabezpieczyć się polyfillami i tworzyć nasze funkcjonalności z głową, nie przeginając także z interfejsem graficznym.

Ekosystem dopiero raczkuje

Jakiś poradnik jak podpiąć zaawansowane biblioteki do DeskGapa? Zapomnijcie, przynajmniej na razie. Na odpowiedzi na Wasze problemy na StackOverflow również możecie sporo poczekać. Sami twórcy opisują dostępne API jako dość ograniczone w stosunku do Electrona. Nie zmienia to jednak faktu, że nie można eksperymentować i w ten sposób zostać pionierem w tworzeniu złożonych aplikacji w DeskGapie. W końcu ktoś tym guru być musi.

Podsumowanie

DeskGap to ciekawa alternatywa dla Electrona jeżeli chodzi o tworzenie aplikacji desktopowych. Dzięki dołączeniu Node.js do projektu, programiści mogą korzystać z dobrodziejstw wielu modułów oferowanych przez to środowisko.

Niestety DeskGap jest jeszcze na wczesnej fazie rozwoju i bez wzięcia tego pod uwagę można się wpakować na niezłą minę. Moim zdaniem jest to interesujący wybór jeżeli celujemy tylko w konkretny system operacyjny, znamy bolączki silnika przeglądarki w tym systemie i nie interesuje nas uczenie się języków natywnych. Uzyskamy w ten sposób lżejszą niż w Electronie, skrojoną dla wybranego systemu aplikację. W innym przypadku development może się mocno wydłużyć i szybciej napiszemy aplikację w Electronie.

Ale nawet przeglądarka Edge migruje na silnik Chrome’a, więc kto wie. Może pewnego dnia będzie to bardziej efektywne rozwiązanie i znajdzie swoje miejsce na rynku.


Artykuł został pierwotnie opublikowany na pawelochota.pl. Zdjęcie główne artykułu pochodzi z unsplash.com.

 

Zapraszamy do dyskusji

Patronujemy

 
 
Polecamy
Wiza sprawia, że mamy mniejszy wybór. Historia Marka Publicewicza