Desktop App bouwen met Electron
Wij waren benieuwd of we ons dienstenpakket kunnen uitbreiden door webapplicaties ook offline beschikbaar te maken met een Desktop App. In deze blogpost neem ik je mee in mijn onderzoek naar Desktop Apps bouwen met Electron. We hoorden van de grote voordelen die Electron met zich meebrengt voor mensen die voornamelijk webapplicatie bouwen, maar weegt dit op tegen de eventuele nadelen?
Wat is Electron?
Electron is een methode van desktop development waarbij gebruik gemaakt wordt van HTML, CSS en JavaScript binnen een Chromium instantie. De meeste browsers werken al met Chromium. Electron stelt developers in staat om desktop applicaties te maken door middel van front-end technologieën.
Applicaties die ontwikkelt zijn met Electron, kunnen gebruikt worden op MacOs, Windows en Linux. Dat wil zeggen dat er geen extra werk nodig is om een Electron applicatie over te zetten naar een ander besturingssysteem.
Wist je dat jij misschien wel dagelijks in een Electron App werkt? Enkele grote voorbeelden zijn:
Voordelen van Electron
Laten we met de voordelen beginnen.
Voordeel 1
Electron is open-source en mag door iedereen gratis gebruikt worden.
Voordeel 2
Ten opzichte van online webapplicaties is het mogelijk om de applicatie zowel online als offline te gebruiken. Dankzij de ingebouwde offline detectie is het makkelijk om rekening te houden met een verbroken verbinding. Er kunnen gegevens lokaal worden opgeslagen, wat het offline-gebruik ten goede komt. Wanneer er opnieuw een verbinding beschikbaar is, kunnen gegevens eventueel gesynchroniseerd worden met een remote server.
Voordeel 3
Omdat de applicatie op een systeem geïnstalleerd is, kan er gebruik gemaakt worden van componenten van het besturingssysteem zoals keyboard-shortcuts en onderdelen van de hardware. Hiermee kunnen we uitgebreidere applicaties ontwikkelen.
Voordeel 4
Om een Electron-app up-to-date te houden kan het ingebouwde Squirrel-framework gebruikt worden. Dit levert de mogelijkheid voor automatische updates op MacOs en Windows. Voor Linux werkt het wat ingewikkelder omdat Linux-distributies anders omgaan met het installeren van applicaties.
Voordeel 5
Het is mogelijk om een API als back-end te gebruiken. Op deze manier is alleen de front-end verwerkt in Electron. Er zijn [tutorials van Laravel-Electron apps](https://laravelarticle.com/laravel-desktop-application-using-electron-js) beschikbaar.
Nadelen van Electron
Electron is een mooie technologie, maar niet zonder risico’s. Daarmee moeten we altijd rekening houden.
Nadeel 1
Wanneer web-applicaties buiten de sandbox omgeving van een webbrowser draaien kan dit voor problemen zorgen. Doordat Electron lokaal geïnstalleerd staat hebben kwaadwillende actoren mogelijk toegang tot het besturingssysteem. Als jouw applicatie niet ‘lekdicht’ is opgebouwd kunnen ze via jouw applicaties eindgebruikers direct aanvallen.
Nadeel 2
Ik heb met een paar commado’s in een terminal de broncode van WhatsApp Desktop uitgepakt. Hiermee kon ik zo alle broncode en bestanden bekijken. Het is hierna natuurlijk heel eenvoudig om bestanden aan te passen om bijvoorbeeld destructieve requests naar de server te sturen, met alle gevolgen van dien.
De veiligheidsproblemen zijn niet de enige reden waarom Electron een negatieve reputatie heeft. Wie online zoekt, komt al snel meer negatieve verhalen tegen.
Nadeel 3
Het Electron-framework is enorm resource-intensief doordat de Chromium-engine en Node.js standaard gebundeld worden met elke applicatie. Daardoor is een applicatie vaak minimaal 100mb groot. Daarnaast zorgt elk nieuw venster voor een nieuwe instantie van Chromium waardoor het werkgeheugen gebruik snel kan oplopen.
Toch nemen deze nadelen niet weg dat grote bedrijven zoals WhatsApp, Microsoft en Github gebruik maken van deze technologie. Wij snappen nog niet goed waarom…
Conclusie
Zoals je ziet zijn er veel voordelen op het gebied van snelle ontwikkeling. Met Electron transformeer je een webapplicatie erg snel naar (hybride) Desktop App. De voordelen van Electron zijn evident, maar de risico’s zullen we altijd blijven benoemen. Er is meer aandacht nodig dan “een druk op de knop” bij het ontwikkelen van een Desktop App via Electron.
Alternatieven
Tauri
Een veelgenoemd alternatief voor Electron is Tauri. Dit is een framework dat gebruik maakt van Rust in combinatie met CSS, HTML en JavaScript om hetzelfde doel te bereiken als Electron.
Op het moment van schrijven staat Tauri nog in de kinderschoenen en wordt het nog volop ontwikkeld. Er zijn plannen om in de toekomst het gebruik van C, C++, Go en Python te ondersteunen voor de back-end.
Flutter
Flutter is met name gericht op mobile app-development en in mindere mate op desktop. Net als Electron is het met Flutter eenvoudig om met één code-base voor meerdere platforms een applicatie te compileren.
Flutter is ontwikkeld door Google en maakt gebruik van de programmeertaal Dart. Een nadeel ten opzichte van Electron is dat het geen gebruik maakt van front-end technieken als HTML en CSS, waardoor het leren van een nieuwe programmeertaal nodig is.
