Een single-page app in Vue.js met een Node.js-backend die live sensordata zichtbaar maakt en stilstand van apparatuur voorspelt voordat die optreedt. Realtime grafieken via Socket.io en D3.js, voor engineers en teams wereldwijd.
Realtime
Live sensordata gestreamd via Socket.io
Tagup bewaakt industriële apparatuur over de hele wereld, met één missie: stilstand en storingen voorspellen voordat ze optreden. De samenwerking begon toen Jon, de CEO van Tagup, ons open-source Vue.js-werk op GitHub vond. Hij zocht extra handen om hun frontend naar een hoger niveau te tillen.
Tagup had toen al monitoringhardware draaien bij meerdere fabrikanten van apparatuur. Alleen lukte het het team niet goed om al die sensordata zo te tonen dat engineers er echt iets mee konden. Live metingen, organisatiestructuren, de historie van assets en modelvoorspellingen moesten samenkomen in één snelle interface.
Wij kwamen erbij om een responsieve single-page app in Vue.js te bouwen en de bestaande Node.js-backend te ondersteunen. Vanaf dag één was duidelijk dat de MVP snel live moest, zonder in te leveren op stabiliteit. Dat vroeg vanaf het begin om een robuuste realtime infrastructuur, heldere datastructuren en serieuze testdekking.
Het werk viel vanzelf uiteen in twee sporen die elkaar overlapten: de architectuur van de single-page app in Vue.js en de realtime datalaag op basis van Socket.io en D3.js. De frontend bleef de hele tijd onze verantwoordelijkheid. Waar de frontend meer flexibiliteit van de Node.js-backend vroeg, droegen we daar ook aan bij.
Fase 2
We integreerden Socket.io van begin tot eind en bouwden de visualisatielaag op D3.js. Zo kwamen live sensordata, organisatieoverzichten, assetbeheer en historische metingen direct in de UI terecht, op het moment dat ze binnenkwamen. De grafieken werkten continu bij, zonder dat de pagina onder belasting haperde of vastliep.
Realtime · Datavisualisatie
Fase 1
We legden de basis voor een snelle, responsieve single-page app in Vue.js: routing, state, het ophalen van data en de componentpatronen waarop de rest van het platform zou voortbouwen. De architectuur was afgestemd op engineers die uren per dag in de tool werken. Zij springen tussen assets, organisaties en historische overzichten zonder te wachten tot een hele pagina laadt.
Frontend · Architectuur
Tagup vond ons via ons open-source Vue.js-werk op GitHub en vroeg ons hun frontend naar een hoger niveau te tillen. Wij sloten aan als de frontendspecialisten in hun team. We waren verantwoordelijk voor de Vue.js-SPA, koppelden die aan de bestaande Node.js-backend en werkten ook aan die backend waar het product dat nodig had.
We integreerden Socket.io met realtime grafieken die live data rechtstreeks van de sensoren toonden. We bouwden gebruikersorganisaties, schermen voor assetbeheer en historische overzichten per asset. En we brachten zowel de frontend als de backend in een stabiele ontwikkelfase, met goede testdekking, schone code en voorspelbare datastructuren.
Vue.js voor de frontend en Node.js voor de backend. Socket.io vervoert de realtime sensorstromen en D3.js tekent de grafieken waar engineers het grootste deel van hun dag naar kijken. Elke keuze stond in het teken van één eis: de UI moet snel en responsief blijven, ook als er onafgebroken data binnenkomt.
Vue.js 
Node.js 
D3.js Grafieken in D3.js die continu bijwerken zodra er sensordata binnenkomt. Engineers zien tientallen signalen in één oogopslag en houden alle details wanneer ze inzoomen.
Een realtime verbinding van begin tot eind tussen de sensorstromen en de UI. Live data van apparatuur, de status van assets en voorspellingssignalen verschijnen direct, zonder dat iemand hoeft te verversen.
Goede testdekking aan de kant van Vue.js en van Node.js, plus de refactors en het opruimwerk die nodig waren om het platform stabiel en onderhoudbaar te maken. Zo kon het interne team er zelf op voortbouwen.
Met de Vue.js-SPA die wij bouwden, kregen de klanten van Tagup live toegang tot data en voorspellingen over hun apparatuur, in een snelle en responsieve interface. Met een paar klikken wisselen engineers tussen organisaties, duiken ze in afzonderlijke assets en zien ze realtime signalen naast historische metingen. Engineers en teams bij meerdere fabrikanten van apparatuur wereldwijd zijn met het platform aan de slag gegaan. De frontend en de onderliggende Node.js-backend bereikten allebei een stabiele ontwikkelfase, met goede testdekking, schone code en voorspelbare datastructuren waarop het interne team kon voortbouwen.
“BinarCode provides timely, high-quality code and development work. Their team is not only extremely efficient and productive but also easy to work with and highly communicative, overall. They continue to represent some of the strongest development staff on the company's team.”
Jon Garrity, CEO, Tagup