Desktop apps met HTML, CSS en javascript

Als webdeveloper ben ik altijd gefascineerd geweest in de desktop programma’s/applicaties die ik elke dag gebruik. Bij een echte webapplicatie gebeuren alle/meeste berekeningen door de webserver. Hierdoor heb ik mij ook goed geïnformeerd over het scalen en onderhouden van webserver. Zou het echter niet interessant zijn om applicaties te kunnen programmeren in ‘web’-talen maar die draaien als programma op een computer?

Electron – cross platform dekstop applicaties

Als IDE gebruik ik Atom, en na een kleine fout te vinden in een extra module, ben ik op onderzoek gegaan. Atom is een open source programma dus iedereen kan de broncode bekijken en aanpassen. Ik ontdekte dat Atom geschreven was in HTML, CSS en Javascript. Na wat debugging, had ik de fout gevonden en heb ik die op GitHub gerapporteerd. Een dag later was de bug gefixed door de auteur.

Een paar dagen later bleef ik met de grote vraag zitten... Hoe speelden ze het klaar om met webtechnologieën een desktop applicatie te maken? Het is belangrijk om als webontwikkelaar zowel breed als specifiek te gaan en daarom ging ik op onderzoek. Zo ontdekte ik Electron.

Electron logo
Electron logo

Electron is een open source bibliotheek ontwikkeld door GitHub om desktop applicaties te maken in HTML, CSS en Javascript. Het doet dit door Chromium en Node.Js te combineren en te compileren als Mac, Windows of Linux programma/applicatie.

Node.js, Javascript webserver

Simpel gezegd wordt een Node.js server opgestart en een geïntegreerde Chromium browser surft naar die lokale Node.js server. Gelijkaardig aan een lokale server zoals MAMP, WAMP, XAMPP maar alles in 1 applicatie gecompileerd.
 

nodejs logo 2017
nodejs logo


Node.js maakt gebruik van de V8 Javascript Engine. Net zoals dat er verschillende motoren zitten in auto’s met elk hun voor- en nadelen, zijn er ook verschillende Javascript Engines met hun voor- en nadelen. Motoren van een wagen zorgen ervoor dat de auto voorruit gaat. Javascript Engines interpreteren de code geschreven door een developer/programmeur.

Node.js is speciaal omdat het volledig vanop de grond geschreven is om niet-blokkerend, asynchroon te zijn. Dit betekent dat er een verzoek bezig kan zijn, maar dat de gebruiker wel verder kan werken. Als we kijken naar de meeste websites, dan klikt een bezoeker op een knop, en dan wacht die tot de volgende pagina geladen is. Asynchroon betekent dat de aanvraag voor de nieuwe pagina in de achtergrond gebeurd.

Chromium zoals in Google Chrome

De naam verraadt het eigenlijk al een beetje. Chromium is het open-source browser project van Google... Google Chrome, de populair browser om op het internet te surfen is de niet open-source variant.
 

Chromium Material Icon
Chromium


Chromium gebruikt Webkit en dit is een layout-engine die onder andere ook gebruikt wordt door Safari (standaard Mac browser). Vroeger gebruikte Google Chrome ook deze layout-engine. Een layout-engine is simpel gezegd hoe de browser een webpagina zal tonen.

Misschien heb je al verschillen gemerkt door naar dezelfde website te surfen in Safari, Internet Explorer, Chrome en/of Firefox. Of nog erger, kreeg je de boodschap dat een website enkel werkt met bepaalde browsers... Het laatste is trouwens een ideale manier om mensen aan te zetten om je website te verlaten en nooit terug te komen.

Applicaties met Electron en mijn SEO app

Node.js is de lokale server en Chromium is de browser en die worden gepropt in 1 applicatie. De grote vraag blijft: Waarom Electron gebruiken?

Electron zorgt ervoor dat webdevelopers gemakkelijk een overgang kunnen maken naar desktop applicaties. Deze applicaties draaien op de computer zelf en kunnen in principe zonder internet toegang werken.

Als nieuwsgierige ontwikkelaar kon ik het niet laten om een applicatie te schrijven met Electron. Ik doopte de applicatie ‘SPASH’ ... Simple Page Analytics Starts here. Door mijn interesse in On-Page SEO heb ik er een applicatie rond geschreven. De applicatie voert een paar simpele SEO controles uit op een webpagina.

 

spash beta screenshot
Desktop applicatie gemaakt met HTML, CSS en javascript


Wel handig is dat je een concurrerende webpagina ook kan analyseren en de resultaten naast elkaar kan zien. Bovendien kan je de resultaten gemakkelijk in PDF formaat opslaan. Bekijk de video hieronder om SPASH in actie te zien.

Deze applicatie kan ook merendeel in pure HTML, CSS en Javascript gemaakt zijn, maar ik vind het belangrijk om nieuwe technologieën ook eens te testen met kleine projectjes.

Deze applicatie heb ik gemaakt en gecompileerd voor Mac. Neem gerust contact op met mij en ik stuur je een link om de applicatie te downloaden.