Ngage Media heeft een netwerk van grote digitale schermen in heel Nederland. Je weet wel van die grote schermen op stations, pleinen en in de stad. Al deze schermen zitten natuurlijk bomvol met slimme hardware om alle informatie over de schermen te meten om de prestaties van het scherm te verbeteren en monitoren.

Al deze data word ergens weggeschreven in een database en dit moest overzichtelijk, simpel en gebruiksvriendelijk worden vertoond 

Samen met Ngage hebben we een ‘Screen control’ dashboard ontworpen waarin alle scherminformatie visueel getoond wordt en ze gemakkelijk kunnen zien of alles in orde is.

Techniek keuze en motivatie: Anne Klapwijk

Het dashboard is ontwikkeld als Single Page Application (SPA). Het meest opvallende verschil tussen reguliere websites en single page applications is het beperkte aantal page refreshes. Middels AJAX - een manier om met backend servers te communiceren zonder een volledige page refresh - wordt via de door Dharma Media ontwikkelde API nieuwe data ingeladen. Doordat je niet meer de volledige pagina hoeft te verversen kan je een betere gebruikerservaring bieden.

Voor de front-end hebben we gebruik gemaakt van React, een (Open Source) JavaScript library ontwikkeld door Facebook voor het maken van snelle webapplicaties en apps met een goede gebruikerservaring.

React is in korte tijd erg populair geworden en wordt gebruikt door bekende bedrijven, zoals Airbnb, Dropbox, Whatsapp en Salesforce. Ook de Nederlandse bedrijven Wehkamp en Blendle maken gebruik van React.

Een van de innovaties waar React om bekend staat die bijdragen aan het verbeteren van de performance van een webapplicatie is de virtual DOM. In React is er voor elk HTML element (DOM object) een overeenkomstig "virtual DOM object". Het aanpassen van HTML elementen in de browser is traag. Het aanpassen van een virtuele HTML pagina is veel sneller omdat er niets op het scherm getekend wordt. Dit kan je vergelijken met het bewerken van een blueprint in tegenstelling tot een echte auto. Nadat de virtual DOM is bijgewerkt wordt deze vergeleken met een snapshot van de virtual DOM van vlak voor de update. Door het vergelijken van de twee versies zoekt React het exact uit welke elementen aangepast zijn. Alleen de aangepaste elementen worden in de echte DOM, in de HTML bijgewerkt en getekend in de browser.

Een ander voordeel van React, naast performance, is het gebruik van componenten. Hiermee kan een applicatie heel modulair worden opgebouwd. User Interface onderdelen/ componenten kunnen afzonderlijk van elkaar worden ontwikkeld en door de hele applicatie worden hergebruikt. Ook zijn er Open Source componenten waar je gebruik van kan maken wat resulteert in een snellere en goedkopere ontwikkeling van de applicatie. Voor het dashboard hebben we o.a. gebruik gemaakt van de componenten van Material UI (voor het implementeren van Google's Material design) en React Vis (voor de data visualisaties). In de toekomst is het dashboard makkelijk uit te breiden door het toevoegen van componenten.

Voor het beheren van de data in de front-end hebben we gebruik gemaakt van Redux. Bij een gebruikersinteractie, bijvoorbeeld het klikken op een button, wordt er een "action" naar redux gestuurd samen met de bijbehorende data. Acties omschrijven wat er gebeurd is, maar niet hoe de applicatie daarop reageert, dat is de taak van de reducers. Op elke actie kunnen reducers reageren door nieuwe data op te slaan en door te geven aan de React componenten. De React componenten kunnen hier vervolgens op reageren door nieuwe data te tonen en/of hun layout aan te passen. De werking van Redux wordt heel mooi uitgelegd door Lin Clark: A cartoon intro to Redux.

Redux workflow

Uitdagingen: Luca Gobbo

De door Dharma Media ontwikkelde API van het dashboard haalt uit verschillende bronnen informatie op, een externe API ontwikkeld door KITT, een externe database en een eigen database. De API voegt deze verschillende bronnen samen en zal daarna op basis van de gebruiker die ingelogd zijn de correcte informatie tonen.

Dit allemaal gerealiseerd met “Server Side Swift”. Swift is een programmeertaal ontwikkeld door Apple en initieel bedoeld voor het bouwen van apps voor de iPhone en Mac. Sinds een tijdje is Swift open source en kan ook deze worden gedraaid op Linux, dit maakt het mogelijk om Swift te gebruiken voor een maken van een API.

Waarom Swift?

Swift voor de server staat pas in zijn kinderschoenen maar is nu in bepaalde gevallen een stuk sneller dan de huidige alternatieven, de geheugen kosten van Swift liggen zeer laag waardoor het ideaal is om in de cloud te draaien. Swift is een moderne programmeertaal met veel verschillende features, denk hieraan Generics, UnitTests, Type inference, hierdoor is het onderhoud en uitbreidbaarheid van de programmeercode makkelijk en hoog.

Resultaat

Ngage copy.png

Wil je meer weten? of ben je benieuwd wat wij nog meer doen?
Neem dan vooral contact op met ons, in de chat, per Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken. of per telefoon.