The holy grail of tech specs?

Moet het nog gezegd worden? Wij zijn Flutterfans! We schreven eerder al waarom we binnen RMDY voor Flutter kiezen en welke voordelen we allemaal zien. In dit artikel gaan we dieper in op de technische aspecten en waarom die Flutter als development platform zo enorm tof en interessant maken. Van het efficiënte cross-platformaspect en de technische capaciteiten tot een digitale speelomgeving van developers: onze Flutter expert Yannick doet alles uit de doeken!

1) One cross-platform to rule them all

We schreven het eerder al: cross-platform = 1 toolkit = 1 codebase voor verschillende platformen. In Flutter schrijf je met dezelfde code (Dart) voor zowel iOS, Android, web als desktop (Mac, Windows, Unix). En die uitgebreide combo is op z’n minst fenomenaal te noemen.

Hoe dat precies kan?

Flutter is technisch gezien opgesplitst in laagjes. Wil je een ander platform aanspreken, pas je enkel de onderste laag aan naargelang het device of besturingssysteem (OS) en al de rest kan je hergebruiken. En dat terwijl er voor de developer niets verandert: het is in Flutter exact dezelfde werkwijze om voor Android of iOS te developen. Dat is een deel van de kracht: als Flutter developer kan je vanuit 1 codebase enorm veel soorten output genereren.

Eén codebase en dus ook maar één keer de business logica implementeren en features testen voor alle platformen. Je kan er bijna met gesloten ogen op vertrouwen dat je geschreven code voor het ene platform hetzelfde werkt op een ander platform; zolang je geen OS-specifieke integraties hebt. Features moet je dus ook maar één keer implementeren en bugs maar één keer onderzoeken en oplossen.

Is er een foutje tijdens je test op iOS? Dan is die er hoogstwaarschijnlijk ook in je Android app. Bij native development zou je dat twee keer apart moeten zoeken en testen, of zou het niet eens een fout geven in Android. 

En wat dan met die OS-specifieke integraties?

Elk platform / besturingssysteem (OS) heeft nog specifieke features zoals locatie, contacten, delen, … Zo is het vragen om locatiegegevens in Android anders dan in iOS of een webbrowser. Dat stukje code verschilt en moet je apart schrijven. Gelukkig komt dat zelden voor, gezien de Flutter community of Google vaak zelf die code al geschreven heeft en je het dus simpelweg kan hergebruiken via een plugin.

Dat maakt het enorm tof om in Flutter te ontwikkelen: met minimale effort kan je van pakweg een iOS applicatie ook een Android applicatie maken.

En de reden dat dat allemaal relatief gemakkelijk kan, is Flutter’s eigen rendering engine Skia. De engine, die hergebruikt werd van Google Chrome, vormt je code om in de pixels die op het scherm getoond worden. Als developer kom je daar niet mee in aanraking, maar ‘t is goed om te weten dat er een ijzersterke rendering engine achterzit die zijn stabiliteit reeds bewezen heeft.

Je leest het goed: platformspecifieke kennis is eigenlijk niet (vaak) meer nodig. Waar je vroeger native mobile developers had die doorgroeide naar Flutter developers, zijn er nu ook Flutter developers zonder die specifieke native kennis.

2) Waarom Flutter zo goed werkt

Een scherm is een canvas

In Flutter is je scherm een wit canvas waarop je kan beginnen tekenen. Er zijn namelijk geen native componenten aanwezig, wel zijn ze allemaal “nagemaakt”. Zo ‘schrijf’ je bijvoorbeeld: “ik wil een button” – en pas bij de compilatie maakt Flutter een Android/iOS-uitziende button. Omdat het achterliggend een Flutterknop is en geen native knop, gaat die op elke verschillende versies van besturingssystemen correct ingevuld worden bij de compilatie; zelfs op hele oude besturingssystemen. Een ander voordeel is dat je je niet moet houden aan de brand guidelines van Android of iOS, als je wil kies je zelf hoe de app eruitziet. Een volledig custom user interface maken? Kan. Laat die creativiteit maar komen! 

Voordelen:

• niet afhankelijk van de native componenten, dus ook geen last van bugs in die componenten
• niet afhankelijk van die native componenten dus ook geen last van het feit dat nieuwe componenten niet bestaan op oudere versies van een besturingssysteem
• De Skia rendering engine van Flutter is enorm performant waardoor Flutter apps ook vlot draaien op oudere toestellen (indien beslist wordt om dat te doen natuurlijk).

Nadelen:

• nieuwe componenten in een nieuwe versie van het operating system moeten opnieuw ontwikkeld worden. Daarvoor kan je gelukkig op de Flutter community rekenen, of zelf aan de slag gaan.

Volledige toegang tot native apps

Een app geschreven in Flutter is basically telkens een native app die een Flutter app inlaadt. Hierdoor heb je de vrijheid om alle combinaties te maken:

• een volledige Flutter app
• een Flutter app met bepaalde native componenten
• een native app met bepaalde Flutter componenten

Dat is mogelijk door het gebruik van Platform Channels: hiermee krijg je eigenlijk toegang tot het native gedeelte van de apps. Zoals je eerder kon lezen, bestaan er voor de gebruikelijke functionaliteiten (toegang tot contactpersonen, locatiegegevens, delen met andere apps, …) plugins die vrij te gebruiken zijn. Die zijn er dankzij andere developers of bedrijven die de moeite namen om de integratie met het onderliggende besturingssysteem te schrijven. Al deze plugins kan je vinden op pub.dev. Bestaat er toch een bepaalde functionaliteit nog niet? Dan kan een native developer die gemakkelijk zelf ontwikkelen en toevoegen aan de Dart plugins – als je het lief vraagt. 😉

3) Ultimate developer experience

Oké, dus Flutter is technisch sterk en qua uitvoering efficiënt en multi-purpose. Maar hoe zit dat voor de developers die ermee werken?

Wel, we hebben goed nieuws want developen in Flutter is supertof: “Het is gemakkelijker, sneller in ontwikkeling en je moet geen eeuwen wachten op een build. Het is gewoon echt plezant.” ,aldus Yannick.

Hot reload

Dankzij de ‘hot reload’ in Flutter, wordt de user interface (UI) automatisch geüpdatet met de laatste wijzigingen, terwijl je de code nog aan het aanpassen bent. Het grote voordeel hierbij is dat ook de state bijgehouden wordt.

Eenvoudig voorbeeld: in het ‘Flutter counter’-voorbeeld kan je de teller een beetje verhogen, vervolgens een aanpassing maken aan het scherm en de counter op de huidige waarde laten staan. Dat zorgt ervoor dat je in je app bijvoorbeeld makkelijk een kleur of lettertype kan aanpassen, en je niet telkens weer een nieuwe build moet maken om het verschil te zien. Dit kan enkele seconden tot meerdere tientallen seconden besparen per aanpassing die je doet. Simpel gezegd: je volgt ‘live’ het resultaat van je code. En werkelijk elke developer zal bevestigen dat dit heerlijk is om te werken.

Naast grote tijdswinst kan je ook design nog bijstellen tijdens development. Ziet een rand van 2 pixels er beter uit dan 4 pixels? Toch maar de animatie 3 seconden laten duren in plaats van vijf? Zo’n instante view van je codeerwerk zorgt voor extra vrijheid in het proces.

En hoe kan dit dan technisch?

Flutter werkt met twee verschillende compilers: Ahead-of-Time (AoT) en Just-in-Time (JiT). Tijdens development wordt de JiT compiler gebruikt die telkens opnieuw compileert wat aangepast is. Maak je een release build voor de applicatie? Dan compileert de AoT alles op voorhand zodat de app performant is. Vergelijk het met een soort autosave op je lokale schijf en een finale save in een cloudomgeving.

Aandachtige lezers beseffen dat je hierdoor enorm snel proof of concepts kan maken. Zo snel resultaat zien van je codeerwerk is zelden mogelijk geweest.

Minimal effort, great output

Als developer is het ook gewoon leuk en productief dat je weet dat je met kennis van 1 framework en taal verschillende applicaties kan ontwikkelen voor een heel aantal platformen. Flutter programmeer je in Dart; een relatief gemakkelijke programmeertaal om aan te leren. Het heeft dan geen gigantisch uitgebreide features zoals pakweg C#, maar Dart is een pak moderner en evolueert elke dag. Kan je Java, Kotlin of Swift? Dan ben je op twee dagen ingewerkt in Dart. Minimale effort dus, voor een heel groot resultaat. Dat geeft een krachtig gevoel, want plots kan je ook webapplicaties schrijven terwijl je voorheen een native iOS developer was.

Open source

Heel de Flutter codebase is open source, alsook de meeste third party packages. Daardoor is er een gigantische bron aan informatie en inspiratie beschikbaar. Twijfel je over de beste manier om iets te implementeren? Dan kan je altijd in de Flutter codebase zelf rondneuzen hoe het daar juist gedaan wordt. Heb je een issue of werkt iets niet zoals verwacht? Dan duik je zelf even in de code. Het allerleukste is natuurlijk als je zelf iets optimaliseert en je code wordt opgenomen in de Flutter codebase!

Kies je IDE

Als developer kan je zelf kiezen welke IDE (integrated development environment) je gebruikt: er is officiële ondersteuning voor Android Studio en Visual Studio Code.

One big family

De Flutter community is heel open en inclusief. Op Stack Overflow zijn er altijd veel antwoorden te vinden en ondanks het een redelijk jong framework is, is er al een enorm grote collectie blogartikels, YouTube-video’s en meer. Google doet erg zijn best om de community te helpen door zelf veel content aan te leveren (vb. “widget of the week”, video’s), Google Developer Experts aan te duiden en veel conferenties en events te sponsoren. Binnen de community wordt er ook gelet op gedrag; zo zijn er geen “domme vragen” die de grond worden ingeboord en is iedereen hulpvaardig.

Je leest het: leuk om in te developen en testen, geweldige community en veel mogelijkheden. En ook het resultaat mag er steeds wezen 😉

Ben jij ook overtuigd van de kracht van Flutter? Of toch dat duwtje in de rug nog nodig?
We nemen je graag mee in ons onderbouwd enthousiasme!

Stuur ons een mailtje en
let’s talk