Adres
Utrecht, Veenendaal
Werktijden
Maandag tot en met vrijdag: 9.00 tot 17.00 uur
Weekend: 10.00 tot 17.00 uur
Een persoonlijk project: een gedeeld digitaal bord waar kaarten, tekst, afbeeldingen en video synchroon blijven voor iedereen die meekijkt, met een event sourced Node.js backend en daarbovenop een Vue.js applicatielaag.
- TypePersoonlijk project
- Periode2021
- RolSolo full stack gebouwd
- OpgeleverdRealtime collaboratief bord
- Elke wijziging landt op elk ander scherm zodra hij wordt gemaakt, niet pas bij verversen.
- Twee mensen kunnen tegelijk dezelfde kaart bewerken zonder dat iemand werk verliest.
- Het bord is een stroom van wat er is gebeurd in plaats van een rij die wordt overschreven, zodat de staat altijd opnieuw op te bouwen is en nooit half geschreven blijft staan.
Context
Teams gieten hun denkwerk in steeds dezelfde paar vormen: een kaart, een notitie, een afbeelding, een clip. Wat ze meestal kwijtraken is niet de inhoud maar het moment, omdat het bord pas bijwerkt als iemand het herlaadt. Ik heb een bord gebouwd waar dat gat niet bestaat.
De uitdaging
Het interessante probleem is niet het tekenen van kaarten, maar twee mensen die in dezelfde seconde dezelfde kaart aanraken. Last write wins gooit werk weg dat iemand net heeft gedaan, en locking laat het bord dood aanvoelen. Daar komt bij dat een bord dat elke toetsaanslag naar elke client duwt snel duur wordt, in queries en in geheugen, aan beide kanten van de verbinding.
Wat ik deed
- Het bord gemodelleerd als events, in plaats van als rijen die worden overschreven. Elke wijziging is een toegevoegd feit, dus de huidige staat wordt afgeleid en twee bewerkingen zijn twee feiten in plaats van een botsing.
- Gesynchroniseerd over sockets, zodat een wijziging die ergens wordt gemaakt overal wordt toegepast op het moment zelf, zonder polling en zonder herladen.
- Gelijktijdig bewerken veilig gemaakt, door gelijktijdige bewerkingen op één kaart samen te brengen tot één overeengekomen resultaat in plaats van de laatste door te laten.
- De Node.js services eronder gebouwd, en ze afgestemd op het verkeer dat dit oplevert: veel kleine writes en nog veel meer reads, zo opgezet dat client noch server voor elke toetsaanslag betaalt.
- Er een modulaire Vue.js applicatie overheen gelegd, zo gestructureerd dat een nieuw kaarttype een toevoeging is en geen herschrijving. Tekst, afbeeldingen en video zijn op die manier toegevoegd.
Het resultaat
- Een bord dat live blijft voor iedereen die erop werkt, ook bij gelijktijdige bewerkingen.
- Een applicatielaag die nieuwe contenttypes aankan zonder te worden opengebroken.
- Een backend waar de staat opnieuw op te bouwen is uit de eigen historie, dezelfde eigenschap die ik later in event stores in productie heb ingebouwd.
Gebruikte technologieën
- Node.js: De services achter het bord en de socket-verbindingen ernaartoe.
- Event sourcing: De staat van het bord, afgeleid uit een aangevulde stroom wijzigingen.
- JavaScript: De realtime synchronisatielaag die client en server delen.
- Vue.js: De modulaire applicatielaag over de services.
Als je event sourcing overweegt voor iets dat live moet blijven bij gelijktijdig gebruik, het is een gesprek dat ik graag voer.