Ontwikkeling van Alibi met Flutter for Web: ons succesverhaal

Even voorstellen: Alibi

Alibi is een web tool die helpt om drukke werkdagen te plannen. Vul de projecten in waar je aan werkt met een inschatting van hoeveel tijd elke projectfase gaat kosten en wanneer het opgeleverd moet worden, en Alibi doet de rest. Met Alibi krijg je een goed overzicht van het werk dat gedaan moet worden en het plant automatisch je werk voor je in.

Om de tool goed bruikbaar te maken voor de gebruiker, moet er veel data worden ingeladen om een overzicht te geven van alle mogelijke projecten. De juiste interactiviteit is ook belangrijk om alles soepel te laten lopen. Alibi werkt alleen als het voelt alsof Alibi je helpt om je planning te maken, in plaats van dat het voelt alsof je je eigen planning maakt 'in' Alibi.

Omdat de tool zo gefocust is op het invoeren en aanpassen van projecturen, wordt het voornamelijk op desktop gebruikt.

Waarom Flutter?

Omdat de gebruikersinteractie belangrijk is voor Alibi, wilden we een framework gebruiken dat ons in staat stelt om dat goed te doen. We hebben veel ervaring in complexe interacties in Flutter, dus dat maakt het makkelijker voor ons.

Onze klant had een mobiele app in de toekomst op de roadmap staan. Daarom wilden we een overstap naar mobiele apps alvast mogelijk maken. Met Flutter zouden we een groot deel van de widgets en de integratie met de back-end kunnen hergebruiken.

Rond de tijd dat we Alibi aan het ontwikkelen waren, merkten we dat Google veel aandacht gaf aan Flutter Web. Het was vaak onderwerp van keynotes en er kwamen steeds meer features en verbeteringen voor Flutter Web beschikbaar sinds onze laatste experimenten ermee. Dat gaf ons het vertrouwen dat Flutter Web een blijvertje zou zijn en dat we deze app in Flutter konden ontwikkelen.

Performance

Het eerste waar je natuurlijk aan denkt is performance; is Flutter Web snel genoeg? Het korte antwoord is: ja, als je de initiële laadtijd niet erg vindt.

Wanneer je een Flutter Web app voor het eerst bouwt, zal je merken dat het opstarten in de browser best wel langzaam is. Maar dat is niet gek toch? Je installeert de code niet vooraf op het device; nee, de app wordt pas gedownload als je de pagina in je browser laadt. Dit komt er feitelijk op neer dat je een kleine 'installatie' doet wanneer je de app voor het eerst opent.

Maar zodra je die eerste laadtijd voorbij bent, is het eigenlijk heel snel. Animaties en overgangen gaat soepel en interacties zijn precies zoals je gewend bent op het web.

Dus wanneer is de performance van Flutter Web een probleem? Als die eerste paar seconden op je platform heel veel uitmaken, denk ik dat je beter een andere oplossing kan kiezen. In de meeste webshops beslist een consument binnen een paar seconden. Als je pagina te traag laadt, zijn ze weg. Als je probeert om de aandacht van de gebruiker langer vast te houden, is Flutter for Web eigenlijk best een prima optie.

Oh, en weet je nog dat ik zei dat Google veel aandacht geeft aan Flutter for Web? Ze hebben recent aangekondigd dat Web Assembly ondersteund gaat worden, wat de performance zeer ten goede zal komen.

Gebruikersinteractie

Een belangrijke pagina in Alibi is het project overzicht, waar je projecten kan verslepen, in- en uitklappen, projectfases kan uittrekken en door de tijdlijn kan scrollen. Dit moet super 'smooth' werken om de juiste impact te maken, en dat is mogelijk in Flutter.

De grootste uitdaging van het project was om dit view te maken. Er zijn verschillende soorten interactie met een fase (een soort balkje) mogelijk. Wat gebeurt er bijvoorbeeld wanneer:

• Je er met de muis overheen gaat?
• Je erop klikt?
• Je de balk versleept? En sleep je vanaf het midden, of trek je ‘m uit aan de randen?

Met alle soorten animaties van het oppakken, slepen en weer terugplaatsen van de balkjes, maar ook het uittrekken en het verhogen/verlagen van de intensiteit, moet er veel interacties worden afgehandeld op één input item. Gelukkig is dit precies waar Flutter goed in is! En de interacties zien er precies hetzelfde uit op elk device (als je dat wil).

Probeer de interactie zelf eens: Open een web browser, ga naar https://app.alibitoday.com, open een gratis voorbeeld account en voel de magie ✨

Gewijzigde plannen 😱

Na een aantal sprints hadden we een lanceerbaar MVP; super! We wilden zien hoe het product in de markt zou landen en onze vervolgstappen bepalen aan de hand van feedback van échte gebruikers. Dat is wat 'agile' werken zo goed maakt.

Dus de eerste gebruikers gingen onze browser-only versie van de app gebruiken, en raad eens wat we ontdekten? De meeste van onze gebruikers kwamen via mobiel! Oh, oh: onze app was alleen nog maar geschikt voor desktop.

We moesten dus snel het roer omgooien om de Alibi ervaring naar mobile te vertalen. We besloten dat we de Alibi mobiele apps gewoon uit de codebase gingen bouwen die we al hadden en gingen kijken hoe ver we konden komen in de laatste sprint. Tegen elke verwachting in hebben we het voor elkaar gekregen om de hele app om te zetten naar mobile binnen één sprint!

Hoewel dit niet het geval zal zijn voor de meeste apps en we wat hebben moeten toegeven op de interactieve ervaring en de meer complexe pagina's, is het ons gelukt om de Alibi app volledig functioneel in de stores te krijgen.

Dit zou niet mogelijk zijn geweest als we een web framework hadden gekozen.

Conclusie: wat nu?

Natuurlijk is de vraag wat de volgende stap is nu we deze ervaring hebben opgedaan. Voor Alibi is het overduidelijk: Flutter Web was de juiste keuze.

Hoewel het afhangt van de soort app die we hierna zullen bouwen, zou ik niet bang zijn om Flutter Web in een volgend project te gebruiken. Als de initiële laadtijd en dingen zoals SEO geen probleem zijn, is het eigenlijk een heel goede keuze voor ons team en een app die mogelijk ooit ook op mobiel moet draaien.

Flutter web is niet bruikbaar voor elke toepassing, maar in sommige situaties geeft het heel veel gratis extra's!

💪🏼 Waar het in uitblinkt

• Mobiel en web vanuit één codebase
• Super voor het bouwen van een cross-platform UI

🫤 Waar het niet fantastisch is

• Slechte initiële laadtijd
• (Nog) niet SEO-friendly

Ik hoop dat dit een goed inzicht geeft in onze experience met Flutter for Web. Als je vragen hebt over of Flutter geschikt is voor jouw project of de techniek in detail wil bespreken, neem vooral contact op en zal kijken of ik je kan helpen.