Om onze klanten steeds moderne oplossingen te kunnen bieden is het belangrijk om continu de nieuwste technische ontwikkelingen te volgen en hiermee te experimenteren. Foursites Ontwikkeling noemen we dat. Ik neem je graag mee in de wondere wereld van een front-end developer en geef je mijn top-3 van coolste uitdagingen die tot iets moois hebben geleid.

In het leven van een developer is stilstand achteruitgang. Dat heeft natuurlijk alles te maken met het feit dat de technieken waarmee wij developers werken in hoog tempo doorontwikkeld worden. Sterker nog: ik denk dat er maar weinig werkvelden zijn die sneller bewegen dan het onze.

Wat doen we zoal tijdens Foursites Ontwikkeling?

Doordat zowel onze front-end als back-end developers hier enthousiast aan meedoen, krijg je een verscheidenheid aan ‘proof of concepts’ te zien. Zo kregen we recent van onze back-end developer Nick een demonstratie over het inrichten van een lokale ontwikkelomgeving. Hierbij vlogen termen als ‘vagrant up’ en ‘vagrant destroy’ je om de oren. Op hetzelfde moment werden er op de front-end afdeling naar hartenlust spelletjes geprogrammeerd om zo de javascript skills te upgraden.

Door een deel van onze tijd op deze manier te besteden maken we tegenwoordig behalve de traditionele WordPress thema’s ook websites op basis van het het populaire PHP framework Laravel. Tevens hebben we het JavaScript framework Vue.js omarmd als dé standaard techniek voor het ontwikkelen van (delen van) webapplicaties. Geen slechte score!

Klantvragen

Vaak bepalen we met welke techniek we aan de slag gaan, zonder dat we weten wat we er precies mee willen gaan maken. We beginnen ermee, omdat we ergens over dat onderwerp gelezen of gehoord hebben en het ons inspireerde. Op die manier is naar aanleiding van mijn onderzoek naar Vue.js een digitale variant van het bekende kaartspel UNO ontstaan, maar vaak is het niet zo duidelijk wat voor een project je nu precies wil gaan doen met die techniek.

Gelukkig heeft Foursites een aantal klanten die regelmatig zelf met wilde ideeën komen. Dan komen ze met een bijna kant-en-klare omschrijving van wat ze precies willen en stellen dan de magische vraag aan het eind van het gesprek: “Kunnen jullie dat maken?”

Als iemand die woorden uitspreekt, dan zie je dat bij ons op kantoor direct alle developer-oren gespitst worden. Als je goed luistert dan kun je vrijwel direct de hersenen horen kraken. Daarna is het nog slechts een kwestie van tijd voordat één van deze lieden de handschoen opneemt en aan de slag gaat.

Mijn top 3 van coolste uitdagingen die we op deze manier zijn aangegaan en die tot een succesvolle proof of concept hebben geleid ziet er als volgt uit:

1. De native app

In een eerdere blog heb ik al eens beschreven waarom ik een Progressive Web App (PWA) een uitstekend alternatief vind voor een ‘native app’ (een applicatie specifiek voor iOS- of Android devices). Ik sta, een jaar later, nog steeds achter die woorden, maar soms heeft de klant de wens om de app op te nemen in de App stores van Apple en/of Google. Dat is iets wat echt is voorbehouden aan native apps en daar biedt een PWA dus geen uitkomst.

Toen één van onze klanten vroeg om een native app, zijn we op zoek gegaan naar een techniek waarmee we dit konden doen, zonder afstand te doen van de traditionele webtechnieken HTML, CSS en JavaScript. Dat zijn immers de technieken waar wij webontwikkelaars zo vertrouwd mee zijn.

Uiteindelijk hebben we gekozen voor Cordova als platform. Cordova fungeert als een soort native schil die je om je web app plaatst. Je hebt dan één codebase die je vervolgens kunt omzetten naar zowel een iOS- als een Android app. En zo ligt de wereld van native apps ineens voor ons open.

2. WebSockets

In het verleden hebben we een applicatie gemaakt waarmee je op een groot touchscreen een product kunt samenstellen. Door verschillende eigenschappen van het product aan te passen verandert op de achtergrondfoto het product daadwerkelijk.

Onze klant vroeg of het niet mogelijk was om het product te tonen op het grote touchscreen, maar datzelfde product samen te stellen op bijvoorbeeld een tablet of smartphone. Uiteraard is dit mogelijk! We moesten alleen eerst uitvinden hoe. Het antwoord was: WebSockets. Dit is een techniek waarmee je met meerdere clients, laten we zeggen een groot touchscreen en een smartphone, connectie maakt met een applicatie die draait op een WebSocket server. Zodra één van de clients de data verandert door bijvoorbeeld een formulier in te vullen, dan geeft deze een seintje aan de WebSocket server en deze geeft de verandering direct door aan de overige gekoppelde clients.

Op die manier kun je op je smartphone het product wijzigen en worden deze wijzigingen vrijwel direct getoond op het grote scherm. Proof of concept geslaagd!

3. Smart home apparatuur bedienen

Een van onze klanten verkoopt onder andere rolgordijnen die je met behulp van een afstandsbediening open en dicht kunt doen. Wij hebben een website voor ze gebouwd waarmee de verschillende producten, waaronder deze rolgordijnen, op een touchscreen in de winkel worden getoond. De vraag was of we deze website konden uitbreiden met knoppen waarmee ze de rolgordijnen in hun showroom open en dicht konden doen. Wat?!

De oplossing zat hem in een smart hub, waarmee we de rolgordijnen en de website verbonden. Vervolgens moesten we de smart hub de signalen van de afstandsbediening leren die bij het rolgordijn hoort. Daarna moest een druk op de knop ervoor zorgen dat er vanuit de website een signaal naar de smart hub gestuurd werd, waarna de smart hub weer het juiste signaal naar het rolgordijn stuurde. Resultaat: een rolgordijn dat bediend wordt door een reguliere website.

Toen we dit eenmaal voor elkaar hadden ging ik helemaal los. Aan het eind van de rit bediende ik met diezelfde website niet alleen het rolgordijn, maar zette ik het laatste album van Arcade Fire aan op onze Sonos en zette ik de Philips Hue lampen een standje feller. Mission accomplished!

Ok, mooi. En nu?

Ik wil hier vooral aangeven dat we bij Foursites altijd bezig zijn om onszelf te vernieuwen. Onze diensten houden niet op bij het realiseren van een eenvoudige website of complexe webshop. We kunnen meer, veel meer! En als we het nog niet kunnen, dan vinden we wel een manier.

Challenge accepted!

#sharing is caring