TapTapes refactor 2023

Dit jaar stond het werk bij TapTapes in het teken van refactoren van code. Refactoren is het herschrijven van code met als doel de leesbaarheid en werking te verbeteren.

Refactor

In 2022 is de backend van TapTapes volledig herontwikkeld. In het proces hiernaartoe is de API meerdere keren gewijzigd en geïmplementeerd in de frontend. Stukken van deze wijzigingen zijn echter niet altijd opgeruimd, waardoor de code rommelig en onoverzichtelijk begon te worden. Daarnaast was de frontend geschreven met versie 1 van de Quasar library, terwijl versie 2 al enige tijd beschikbaar is. Versie 1 zou slechts enkele maanden ondersteund blijven, waardoor een update noodzakelijk werd.

De JavaScript code van de frontend is tot nu toe geschreven in CoffeeScript, een variant van JavaScript met extra syntax voor betere leesbaarheid. CoffeeScript is echter al enige tijd achterhaald en bovendien qua functionaliteit ingehaald door JavaScript zelf. Het herschrijven van CoffeeScript naar plain JavaScript ging redelijk soepel. CoffeeScript wordt op de achtergrond zelf gecompileerd naar JavaScript, waardoor de talen redelijk overeen komen. Door over te stappen naar JavaScript kon ik verschillende developer tools van mijn editor aanzetten, waarna ontwikkelen significant sneller ging. Deze tools konden voorheen niet aan omdat ze geen CoffeeScript ondersteunen.

Tegelijk met de migratie van CoffeeScript naar JavaScript ben ik begonnen met de frontend omschrijven naar versie 2 van Quasar Framework. Een groot verschil in deze library is het gebruik van Vue3 in plaats van Vue2. Vue3 introduceert een nieuwe structuur voor de Single File Components. In de nieuwe structuur kunnen functions, data- en computed-variables bij elkaar worden gezet, waardoor het duidelijker is welke code bij elkaar hoort.

Na de migratie naar Quasar v2 en Vue3 heb ik de ESLint configuratie aangepast. ESLint is een developer tool die schone en moderne code forceert. Deze tool kon eerder niet worden geactiveerd door het gebruik van CoffeeScript. Met ESLint in combinatie met de opkomende tool Github Copilot werd de code steeds overzichtelijker en makkelijker te lezen. Oude ongebruikte stukken code van oude API’s werd verwijderd waardoor de frontend een stuk stabieler is geworden.

Het refactoren van de code heeft een flinke tijd gekost. Het was een redelijk saaie taak maar was nodig voor de stabiliteit, leesbaarheid en toekomstbestendigheid van het systeem. Nieuwe functies zijn nu makkelijker te ontwikkelen doordat de app een standaard structuur volgt.

Content protection

Na de grote refactor van de frontend ben ik aan de slag gegaan enkele elementen van de User Interface te verbeteren.

Een belangrijk selling-point van het product van TapTapes is de mogelijkheid tot content protection. De NFC strips van TapTapes hebben een speciale chip, die aan kan tonen of de verpakking geopend is geweest. De app kan verschillende content laten zien aan de hand van deze status, waaronder een preview film als de verpakking dicht is, en de volledige film na het openen van de tape.

Het was in de frontend echter onduidelijk wat de status van de chip was, waardoor deze functie over het algemeen werd uitgeschakeld. Doormiddel van een nieuwe dynamic action bar kon deze informatie beter worden gecommuniceerd. De action bar laat knoppen zien afhankelijk van de beschikbare ruimte en is hierdoor responsive.

Ook andere view criteria varianten zijn verbeterd. Geocaching (tonen van content op een bepaalde locatie) is nu makkelijker te configureren, en gebruikt bovendien alleen de locatie wanneer dit voor de tape nodig is.

Media player

Ook de media player heeft weer een update gekregen. Om de app meer een media-player functie te geven is een fullscreen overlay toegevoegd aan de player controls. Deze fullscreen overlay gebruikt de kleuren van de tape, en zorgt hierdoor voor een rustigere interface.

Toekomst

Helaas moet ik de komende tijd een pauze nemen in het ontwikkelen aan TapTapes. Ik zal de komende tijd gaan focussen op het schrijven van mijn Master Scriptie (binnen de opleiding een Supportive Narrative), en het ondersteunende project wat daarbij hoort. Ook andere projecten beginnen meer tijd in beslag te nemen.

Het werk wat ik de laatste jaren in TapTapes heb gestoken is zeker geen verloren tijd geweest. Door de samenwerking met Peter heb ik een hoop nieuwe technologieën leren kennen, die ik vervolgens heb kunnen toepassen in andere projecten. Het werken aan een live systeem en product heeft mij inzicht gegeven in de processen om een project uit te geven. Dit inzicht kan ik toepassen in eigen projecten zoals de NichePlayer en de Digitale Kaartenkist.

Ik wil Peter bedanken voor de fijne samenwerking de afgelopen jaren, en ben benieuwd wat de toekomst gaat brengen voor TapTapes.