• 4 minuten

Expert talks | To Flutter or not to Flutter?

Flutter vs. React Native

Wil jij jouw app ontwerpen met React Native of ga je liever voor het nieuwere en hippere Flutter? Aan beide lijken voor- en nadelen verbonden te zijn, dus welke moet je dan kiezen? Hieronder leggen wij deze 2 frameworks uitgebreidt naast elkaar, zodat we kunnen bepalen welke voor ons als winnaar uit de strijd komt.

Wat zijn het?

React Native en Flutter zijn twee van de meest populaire frameworks om mobiele apps te ontwikkelen die op meerdere platformen werken.

Terwijl React Native reeds voor lange tijd het populairste framework is voor cross platform mobiele ontwikkeling, is Flutter een inhaalsbeweging aan het maken sinds haar ontstaan in 2017. Flutter is nu een van de belangrijkste concurrenten van React Native, en er wordt voorspeld dat het framework in de toekomst nog meer zal groeien.

React Native

Laten we beginnen met het oude vertrouwde. Wat is React Native? We kunnen eerst eens kijken naar hoe Google het beschrijft:

React Native is een open-source mobile application framework gemaakt door Facebook. Het wordt gebruikt om applicaties voor Android, iOS, Web and UWP te ontwikkelen, door developers React en native platform mogelijkheden te laten gebruiken.

Zoals de naam al doet vermoeden, maakt React Native gebruik van React. Front-end developers zijn meestal al bekend met React of kennen op zijn minst een beetje Javascript. Dit maakt React Native een tool die een stuk makkelijker te leren en onder de knie te krijgen is, omdat het veel functies deelt met React en veel Javascript principes gebruikt.

Nadat we React Native wat verder onder de loep namen, concluderen wij:

Voordelen van React Native:

  • Het is vergelijkbaar met React.
  • Veel gebruikt in de programmeerwereld.
  • Veel documentatie beschikbaar.
  • Gebruikt Javascript, dus je hoeft geen nieuwe taal te leren.
  • Veel 3rd party component libraries.

Nadelen van React Native:

  • Javascript Bridge.
  • Niet veel ingebouwde componenten.
  • Langzamere ontwikkeltijd.
  • Geen Hot-Reload.

Flutter

Als je de laatste jaren de trends op het gebied van Native Development hebt gevolgd, heb je waarschijnlijk al gehoord van dit nieuwe snufje. Flutter is Google's antwoord op React Native en het belooft op te leveren.

Flutter is een open-source UI-software development kit ontwikkeld door Google. Het wordt gebruikt om toepassingen te ontwikkelen voor Android, iOS, Windows, Mac, Linux, Google Fuchsia en voor het internet. De eerste versie van Flutter was bekend onder de codenaam "Sky" en liep op het Android besturingssysteem.

Flutter gebruikt een programmeertaal genaamd Dart. Dit is een taal die lijkt op een mix van Java en C#. Ook al wordt het buiten Google niet veel gebruikt, heeft de developer community die ermee werkt er tal van positieve dingen over te zeggen.

Voordelen van Flutter:

  • Dart Bridge.
  • Eenvoudige project configuratie.
  • Betere Native component ondersteuning.
  • Hot Reload.
  • Prachtige build automation tooling.
  • Geweldige prestaties.
  • Dezelfde App Ui op oudere apparaten.

Nadelen van Flutter:

  • Dart programmeertaal*
  • Minder componenten van derden.
  • Apps kunnen niet kleiner zijn dan 4MB.

De strijd

1. Gemak van het leren

Zoals hierboven vermeld gebruikt React Native JavaScript, dat momenteel tot de meest gebruikte programmeertalen behoort. Flutter gebruikt echter Dart, een nieuwere programmeertaal.

Terwijl JavaScript algemeen geaccepteerd en geadopteerd is na jaren van gebruik, is Dart extreem eenvoudig om code in te schrijven en heeft het dus een lage leercurve.

Verdict: React Native is hier de winnaar omdat het een veel hogere adoptiegraad heeft.

2. Prestaties

React Native gebruikt Javascript om via een brug verbinding te maken met native componenten. Dit heeft een grote invloed op de ontwikkeltijd en de prestaties.

Flutter vermijdt de noodzaak van een brug en, omdat het is samengesteld uit ARM-code, zullen haar prestaties nooit een probleem vormen.

Verdict: Flutter is hier een duidelijke winnaar, met betere ontwikkeltijden en app-prestaties.

3. Native componenten

React Native geeft je de keuze uit externe UI kits, zoals de React Native Material Kit. Ook ondersteunt het componenten in iOS-stijl. Dit betekent dat de eindgebruiker een zeer Native-achtige look en feel heeft binnen de app.

Flutter maakt gebruik van een eigen platform, en interactieve widgets. Deze widgets zijn ingebouwde UI componenten die native componenten vervangen. Dit zorgt ervoor dat zowel Android als Iphone gebruikers exact dezelfde UI hebben, wat een persoonlijker gevoel kan geven.

Verdict: Ex aequo. Beide platformen hebben hun pro's en contra's. React Native zal je een meer Native-achtig gevoel geven, terwijl Flutter je meer flexibiliteit geeft.

4. Hot reloading

Hot reloading wordt gebruikt om een app draaiende te houden terwijl je er wijzigingen in aanbrengt. Dit zorgt voor een snelle ontwikkelingstijd, zonder de noodzaak om je app telkens te ontrollen.

Hoewel React Native de laatste tijd ook hot reloading toepast (dit was vroeger niet het geval), is het nog steeds niet zo snel als dat van Flutter, dat bijna ogenblikkelijk is.

Verdict: Flutter is de winnaar hier, omdat het snellere hot reloading heeft.

Conclusie

React Native en Flutter hebben beide hun voor- en nadelen, zoals we hierboven al aangaven. Maar toch komt Flutter voor ons als winnaar uit de strijd, ook al is er misschien een leercurve aan verbonden. Niet alleen heeft het enorm veel voordelen, maar een aantal experts in de industrie hebben reeds voorspeld dat Flutter de toekomst is van mobile app development. Gezien de vergelijking hierboven, is het duidelijk dat Flutter zeer sterk is toegetreden tot de cross-platform mobile development race. Laten we de toekomst (nog) niet voorspellen, maar afwachten en kijken!

End of story.
Je bent mogelijk ook geïnteresseerd in:
Expert talks | Defensive CSS: beter voorkomen dan genezen
  • 3 minuten
Expert talks | Defensive CSS: beter voorkomen dan genezen Lees meer | Expert talks | Defensive CSS: beter voorkomen dan genezen
Expert talks | React type checking: wat is het en waarom heb je het nodig?
  • 5 minuten
Expert talks | React type checking: wat is het en waarom heb je het nodig? Lees meer | Expert talks | React type checking: wat is het en waarom heb je het nodig?
Expert Talks | Het belang van accessible websites
  • 3 minuten
Expert Talks | Het belang van accessible websites Lees meer | Expert Talks | Het belang van accessible websites

Let’s be friends, vertel ons over jouw project