Super efficiënt apps ontwikkelen dankzij Flutter: Google’s framework combineert het beste van 2 werelden

Wat is het beste app development framework? Wat is het verschil tussen Hybrid, Native of Webapp development? Samen met de klant bekijken we bij Dutch Coding Company altijd welk framework het beste aansluit bij de specifieke wensen. Steeds vaker komen wij hierbij op Flutter uit, het nieuwe framework van Google gemaakt om razendsnel apps van topkwaliteit te maken. In dit artikel gaan we in op de verschillende frameworks met hun voor- en nadelen.

Image by Filip Smid from eMan
Flutter is Google’s new mobile app toolkit for crafting beautiful native interfaces on iOS and Android in record time.

Door Menno Renkens, App Developer bij Dutch Coding Company.


Categorieën 🎨

De keuze is groot binnen App Development. Er zijn diverse frameworks waarmee je apps kunt ontwikkelen, allemaal met hun eigen voor- en nadelen. Grofweg kun je alle frameworks onderverdelen in 3 categorieën: Native App Development, Hybrid App Development en (Progressive) Web App Development. Wat zijn hun eigenschappen?

1 — Native App development

Wanneer je voor de hoogste kwaliteit app gaat, dan kies je doorgaans voor een zogenaamde native app. Met de term native wordt bedoeld dat de code van de app direct door het besturingssysteem begrepen kan worden, zonder tussenstappen. Logischerwijs is daardoor het grootste voordeel dat de app razendsnel is. De opstarttijd is kleiner en de app draait erg soepel. Haperingen zullen niet of veel minder voorkomen. Zeker bij complexere apps met veel animaties wordt dit goed zichtbaar. (Met telefoons die ieder jaar krachtiger worden verliest dit argument aan sterkte, maar momenteel is het nog zeker relevant!)

Tot voor kort was het grootste nadeel van het ontwikkelen van native apps dat je de app voor ieder besturingssysteem opnieuw moest bouwen, waar deze ieder hun eigen programmeertaal hanteren. Voor Android moest de app in Java of Kotlin geschreven worden, en voor iOS in Swift of Objective-C. In dat geval heb je dubbele ontwikkelingskosten, waar er 2 apps gebouwd en onderhouden moeten worden. (Dit nadeel vervalt echter met Flutter. Keep reading!)

2 — Hybrid App development

Bij hybrid apps (ook wel cross-platform apps genoemd) hebben als voordeel dat er maar één app ontwikkeld hoeft te worden voor alle platformen (zoals iOS en Android) waarop het uitgebracht wordt. Dat betekent dat de ontwikkelingstijd (en dus de kosten) drastisch verminderen. Afhankelijk van het framework waarop ontwikkeld wordt en indien goed uitgevoerd zijn ze visueel niet te onderscheiden van een native app.

De nadelen verschillen per framework. Bij veel frameworks (waaronder het populaire React Native) is het grootse nadeel de mindere performance. De apps die hiermee gemaakt zijn bevatten dezelfde code voor ieder besturingssysteem. Deze kan niet direct door de besturingssystemen gelezen worden. Dat betekent dat het tijdens het draaien van de app continu vertalingen moeten plaatsvinden, waarbij de code van de app omgezet wordt in begrijpelijke instructies voor het betreffende besturingssysteem. Dit zorgt logischerwijs voor slechtere prestaties.

3 — Progressive Web Apps

Progressive Web Apps gaan nog een stap verder dan Hybrid Apps. Je kunt dezelfde code gebruiken voor zowel je website, als je app. Het gaat weer een stapje verder dan responsive apps (die ervoor zorgen dat je website mooi schaalt op alle mogelijke schermafmetingen), door functionaliteiten van echte apps toe te voegen: ze kunnen als normale app op je telefoon geopend worden, werken ook offline, kunnen optimaal van je telefoon gebruik maken (GPS, Bluetooth, Camera etc.) en werken tegenwoordig ook prima met push-notificaties.

Daarnaast kunnen Web-technologieën gebruikt worden voor de ontwikkeling, zoals HTML, CSS en JavaScript . Bij de meeste developers zijn deze technologieën al bekend, wat betekent dat ze geen nieuwe programmeertalen hoeven te leren die besturingssysteem-afhankelijk zijn (zoals bij native apps). Het voordeel is dat de ontwikkelingstijd (en dus de kosten) drastisch verkleint kunnen worden. Indien goed uitgevoerd zijn ze visueel niet te onderscheiden van een native app.

Tot voor kort werkte Progressive Web Apps alleen op Android. Je kon ze zowel via de Play Store downloaden als via de browser. In het laatste geval krijgt de gebruiker van je website de vraag of hij jouw app wil toevoegen. Als hij hiermee akkoord gaat dan wordt de app geïnstalleerd en direct geopend, zonder tussenkomst van de Play Store. Als hij dat niet wilt, dan kan hij gewoon verder browsen op de mobiele website.

Apple staat pas sinds April ook Progressive Web Apps toe op iOS. Ze staan bekend om hun strenge beleid voor apps, waarbij de kwaliteitseisen erg hoog zijn. Met deze nieuwe vorm van apps hebben ze daar minder controle op, waar installatie buiten de officiële App Store kan gaan (namelijk via Safari). Ze limiteren deze apps op verschillende vlakken:

  • Gelimiteerde opslag.
  • Beperkt tot geen toegang tot device features zoals Bluetooth, FaceID, TouchID en GPS.
  • Geen ondersteuning voor push notificaties en Siri.

Tenslotte is bij zowel Android als iOS het nadeel is dat ze trager zijn dan native apps. De Progressive Web Apps zijn al jarenlang ‘veelbelovend’ en in ontwikkeling, maar na al die tijd nog steeds te beperkt in veruit de meeste gevallen.


Wat is Flutter? 🔥

Tot welke categorie behoort Flutter? Met Flutter maak je een hybrid app met alle voordelen van een native app. Je schrijft alle code in één programmeertaal, maar deze wordt van tevoren (voordat de app in de App Store of Play Store gezet wordt) eenmalig omgezet in code die direct begrepen wordt door het betreffende besturingssysteem. Dat betekent dat er tijdens het gebruik van de app geen omzettingen meer gedaan hoeven worden, wat resulteert in een razendsnelle app.

Ook al schrijf je met Flutter maar één app voor zowel Android als iOS, dat betekent zeker niet dat deze apps identiek eruit hoeven te zien. Je kunt ervoor kiezen om ze bewust hetzelfde eruit te laten zien, of je kunt ervoor kiezen om je meer aan de richtlijnen te houden van het betreffende platform. Zo hebben zowel Apple (Apple Human Interface Guidelines ) als Google (Material Design Guidelines) hun eigen design guidelines waar rekening mee gehouden kan worden. Enorm veel iOS- en Android-componenten zijn in Flutter out-of-the-box beschikbaar. Mocht je kiezen voor verschillende designs per platform, dan vervalt Flutters voordeel om de app maar éénmalig te schrijven gelukkig niet: het is eenvoudig om per platform een anders design te implementeren. De developers kunnen voor beide designs de achterliggende logica hergebruiken. Dit is het moeilijkste deel van een app, en hoeft nog steeds maar 1 keer geschreven te worden.


Andere app development frameworks 🔍

Natuurlijk zijn er ook alternatieve app development frameworks. Wat zijn hun kwaliteiten? En waarom verkiezen wij alsnog Flutter boven deze gevestigde namen?

Native App Development

Natuurlijk is het ook mogelijk native te ontwikkelen. Dat betekent zoals gezegd dat je een aparte app maakt voor ieder platform, geschreven in de platform-specifieke taal. Het enige voordeel ten opzichte van niet-native apps is dat je altijd de volledige beschikbaarheid hebt over iedere mogelijke functionaliteit van het platform. Het kan namelijk zo zijn dat een nieuwe functionaliteit nog niet ondersteund wordt door Flutter. Dit is gelukkig altijd op te lossen: Flutter staat je toe om, indien nodig, platform specifieke code toe te voegen aan je app. Dat kan voor iOS bijvoorbeeld Swift-code zijn, en voor Android Kotlin-code. Dit zal doorgaans niet nodig zijn, maar het is fijn om te weten dat je nooit gelimiteerd wordt

React Native

De voornaamste directe concurrent van Flutter lijkt het framework React Native te zijn, wat open-source is en vooral ontwikkeld wordt door Facebook. Het is momenteel het populairste framework voor het ontwikkelen van hybrid apps. Populaire apps van grote bedrijven hebben hun apps op React Native gebouwd, zoals Skype, Tesla en Instagram. Er zijn echter ook grote bedrijven die onlangs besloten hebben om ermee te stoppen, waaronder AirBnb en Udacity.

Een voordeel is dat je bij React Native (net als bij Progressive Web Apps) gebruikt maakt van Web-Technologieën. Voor de meeste developers betekent dit dat ze geen nieuwe programmeertaal hoeven te leren. Met de term native in de naam wordt gedoeld op de looks (die niet te onderscheiden zijn van een native-app) en helaas niet op de performance. Flutter- en native-apps zullen vloeiender draaien, waar bij React Native de code pas tijdens het gebruiken van de app wordt omgezet in code die het besturingssysteem begrijpt.

Xamarin

Microsoft’s Xamarin komt waarschijnlijk het dichtste bij Flutter qua aanpak. Ook hier gaat het om een hybrid app waarbij de code voor het uitbrengen van de app omgezet wordt in code die begrepen kan worden door het specifieke platform. Toch zijn developers soms wat minder tevreden over Xamarin. Updates blijken vaker dan gewenst functionaliteiten van de app kapot te maken. Ook is de community relatief klein en inactief vergeleken met concurrenten, wat doorgaans geen goed teken is. Daarnaast geeft hergebruik van code voor verschillende platformen (met verschillende UI’s) meer overhead dan gewenst. Als gevolg van bovenstaande zijn de Xamarin apps gemiddeld groter en langzamer dan Flutter apps.

Algemeen

Er zijn ook dingen die Flutter anders doet dan al haar concurrenten. Een van de belangrijkste voorbeelden is de manier waarop Widgets (UI elementen) getekend worden. De concurrenten maken gebruik van de zogenaamde OEM(Original Equipment Manufacturer) widgets, waar Flutter er bewust voor gekozen heeft dit niet te doen. Wanneer je deze OEM Widgets gebruikt, kies je ervoor om een widget te gebruiken die specifiek is voor die versie van het besturingssysteem en/of de fabrikant. Het nadeel is dat bijvoorbeeld een default button er anders uitziet in verschillende Android of iOS versies, waar het design bij iedere versie kan veranderen. Gevolg: je app ziet er verschillend uit op verschillende apparaten.

Flutter apps zijn consistent: ze zien er altijd hetzelfde uit. Ongeacht de versie van het platform of de fabrikant. Dit komt doordat Flutter al zijn widgets zelf tekent, in plaats van gebruik te maken van OEM Widgets. Er zijn geen uitzonderingen, wat erg fijn is voor de developers. Het is vervelend om te horen wanneer een app op specifieke apparaten niet werken. Het is soms moeilijk op te lossen, en bovendien ben je veel tijd kwijt met testen op verschillende apparaten.

Ondanks dat Flutter geen gebruik maakt van OEM Widgets, is de ‘bibliotheek’ met beschikbare Android- en iOS-widgets (die gebruik maken van de laatste platform-specifieke design-guidelines) enorm groot. Mocht je custom design willen in je app dan is dit net zo makkelijk te maken met Flutter.


Flutter’s Toekomst 🔮

Op 4 december 2018 is Flutter 1.0 gereleased! Alhoewel Flutter daarvoor nog niet officieel uit was, was het door Google in mei van dit jaar (2018) al wel production-ready verklaard. Er zijn al een aantal grote bedrijven die de overstap naar Flutter reeds met succes gemaakt hebben, wat aangeeft hoeveel vertrouwen er nu al is in Flutter en haar toekomst. Voorbeelden van grote & veelgebruikte apps die op Flutter draaien zijn die van Alibaba (s’werelds grootste online handelsbedrijf), de Broadway musical Hamilton en natuurlijk apps van Google zelf (bijvoorbeeld Google Ads).

Waar Flutter tot deze week nog in de beta-fase was, waren er nog kleine kinderziektes. We moesten bij updates gedurende deze fase meer tijd inruimen voor aanpassingen, om zo te voorkomen dat kleine bugs in de app sluipen. Met de release van versie 1.0.0 is ook dat verleden tijd. Deze versie is stabiel en de laatste problemen zijn weggehaald. Doordat dit nieuwe krachtige framework al lange tijd production ready was voor de release is Flutter nog steeds gloednieuw aan de ene kant, maar volwassen aan de andere kant. De verwachting is dat het de komende tijd alleen maar in populariteit gaat toenemen.


Samenvatting ⚖

Bij Dutch Coding Company hebben we ervaring met het maken van Apps in alle genoemde categorieën. Flutter belooft de hoogste kwaliteit Android & iOS apps in recordtijd en dat blijkt inderdaad mogelijk. Waar de keuze voor het framework vroeger een lastige kostenafweging kon zijn, ligt de keuze voor Flutter nu in veel gevallen voor de hand.

De wereld van (App) Development is continu in beweging. Wij zetten in op Flutter en dat framework zullen wij de komende jaren blijven ondersteunen. Wel blijft belangrijk om de ontwikkelingen van concurrenten en nieuwkomers goed in de gaten te houden. Wij verwachten dat Flutter in de komende jaren uitgroeit tot een van de belangrijkste App Development Platforms om de volgende redenen:

  • Flutter slaagt er als eerste in om het beste van verschillende werelden te combineren: native performance vanuit één codebase, met de minste consessies.
  • Flutter werd al enorm populair vóór de officiële release en wordt ontwikkeld door Google. Wij verwachten zeker dat dit doorzet.
  • De performance en animaties in Flutter zijn geweldig. Apps zijn vloeiend en snel, ook op oudere telefoons.
  • Dart is eenvoudig te leren en te gebruiken. Dit in combinatie met de kracht van Flutter zorgt ervoor dat we onze apps inmiddels sneller kunnen ontwikkelen dan op ieder ander framework.

Daarom kiezen wij voor Flutter.


Dutch Coding Company is een web & app projectstudio. Wij ontwikkelen kwalitatieve apps op maat voor iPhone en Android. Als technische partner maken en onderhouden wij apps voor bedrijven, netwerken, evenementen en innovatieve startups. Ons motto: web & app met striking impact.

Klaar om een succesvolle app te laten maken? Wij helpen je graag. https://dutchcodingcompany.com/contact of hi@dcc.team.

Vrijblijvend technisch advies over je app? Mail of bel Menno Renkens
+31 (0)40 74 40 889 of menno@dcc.team. Hij is de auteur van dit artikel en specialist op het gebied van app development.