Projectoverzicht
Formtastic is een dienst voor het maken van formulieren en enquêtes die wordt gebruikt in zakelijke situaties met hoge eisen aan stabiliteit, snelheid en flexibiliteit van de interface. Naarmate het project groeide, werd duidelijk dat verdere ontwikkeling niet alleen om nieuwere clienttechnologie vroeg, maar ook om gerichte optimalisatie van de serverkant.
Inlogscherm
Hoofdscherm
Formuliereditor
Lijst met sjablonen
Sjablooneditor
Migratie van Django naar Nuxt
Aanvankelijk was de front-end van Formtastic met Django-templates gebouwd. Dat maakte een snelle start mogelijk, maar na verloop van tijd begon die aanpak de productontwikkeling te beperken. De interface werd complexer, wijzigingen vroegen om een backenddeveloper, en de server deed te veel werk aan het renderen van HTML, wat de schaalbaarheid geen goed deed.
Daarom hebben we het systeem architectonisch gescheiden. Django bleef als hoofdbackend en API, terwijl de volledige gebruikersinterface naar een aparte Nuxt-front-end verhuisde. Dat leverde een heldere scheiding van verantwoordelijkheden op en liet de interface zich onafhankelijk van de serverlogica ontwikkelen.
Na de migratie ging de ontwikkelsnelheid van de UI merkbaar omhoog. Het team leverde sneller nieuwe schermen op en verbeterde de gebruikservaring, terwijl de serverbelasting daalde doordat de server geen pagina's meer hoefde te renderen. Nuxt met SSR en SSG leverde bovendien flinke winst op in SEO en laadsnelheid, wat de marketing- en publieke pagina's goed deed.
Parallel daaraan ontwikkelde de serverkant zich verder. Op plekken met verhoogde belasting en strenge prestatie-eisen is een deel van de logica uit Django gehaald en als losse services in Go gebouwd. Dat verlaagde de latency, vereenvoudigde horizontaal schalen en nam knelpunten weg zonder de backend volledig te herbouwen.
Migratie van native apps naar Flutter
De mobiele clients van Formtastic waren oorspronkelijk als twee zelfstandige native applicaties ontwikkeld — voor iOS en voor Android. Naarmate het product groeide werd die aanpak steeds inefficiënter: de ontwikkeling vertraagde, functies verschenen niet gelijktijdig, en twee codebases onderhouden verhoogde de total cost of ownership.
De overstap naar Flutter maakte het mogelijk de mobiele ontwikkeling in één codebase samen te brengen. Dat vereenvoudigde het onderhoud aanzienlijk en maakte het uitbrengen van nieuwe functies voorspelbaar. Updates verschenen voortaan tegelijk op beide platforms, en de interface en het gedrag van de app werden voor alle gebruikers volledig gelijk.
Vanuit zakelijk oogpunt was het effect direct: de ontwikkel- en onderhoudskosten daalden, de time to market versnelde, en het team kreeg de ruimte om hypotheses te toetsen en het product sneller door te ontwikkelen zonder dat de kosten evenredig meegroeiden. Tegelijk kon Flutter hoge prestaties en een goede gebruikservaring vasthouden.
iOS-applicatie
Lijst met documenten
Formuliereditor
Lijst met formulieren
Documenten synchroniseren
Splashscherm
iPad-applicatie
Inlogscherm
Hoofdscherm
Formuliereditor
Formulieren zoeken
Dialoog voor nieuw document
Jarenlang verscheen Formtastic als twee losse native apps — een voor iOS, een voor Android. Elke functie moest twee keer gebouwd worden, releases liepen tussen de platforms uit de pas, en twee codebases onderhouden vrat stilletjes aan onze roadmap.
Nerdy Production heeft alles samengebracht in één Flutter-codebase, zonder het product te verstoren waar onze klanten op vertrouwen. Nu leveren beide apps dezelfde functies op hetzelfde moment, is de ervaring op iPhone en Android identiek, en is onze doorlooptijd naar productie fors gedaald. We onderhouden één codebase in plaats van twee, en het team besteedt zijn energie eindelijk aan nieuwe functies in plaats van aan twee apps gelijk houden.
Spraak naar tekst voor formuliervelden
Lange vrijetekstvelden — inspectienotities, incidentmeldingen, open antwoorden in enquêtes — zijn het traagste onderdeel van een formulier invullen op een telefoon. We voegden spraak naar tekst toe, aangedreven door Whisper, en bouwden het op elke client anders in plaats van één architectuur op beide te forceren.
In de webapp wordt audio in de browser opgenomen en naar een nieuw transcriptie-endpoint op de bestaande Django-backend gestuurd — de kleinere wijziging, omdat Django de authenticatie en opslag voor dat verzoek toch al bezit. In de Flutter-apps zit Whisper rechtstreeks in de binary als GGML-build via FFI, zodat transcriptie op het toestel draait: geen upload, geen heen-en-weer, en het blijft werken zonder enig bereik — handig op een bouwplaats, precies waar veel formulieren van Formtastic worden ingevuld.
Het resultaat is dezelfde functie met twee verschillende afwegingen erachter. De webweg blijft eenvoudig omdat er al een backend was om uit te breiden. De mobiele weg ruilt een groter appbestand en rekenwerk op het toestel in voor dicteren dat offline werkt en nooit audio ergens heen stuurt.
Samenvatting
Formtastic is een voorbeeld van bewuste technologische evolutie van een product. De front-end van Django naar Nuxt verplaatsen vereenvoudigde de ontwikkeling van de webversie en leverde winst op in snelheid en SEO. Gericht Go inzetten op de server loste prestatieproblemen op zonder het platform ingrijpend te veranderen. De overstap van native mobiele apps naar Flutter verlaagde de eigendomskosten en versnelde de productontwikkeling. Daardoor werd het systeem stabieler, flexibeler en beter voorbereid op schalen.
De twee native apps van Formtastic tot één codebase samenvoegen is precies het soort migratie dat we uitvoeren binnen Flutter-appontwikkeling.