React native vs flutter

React Native is ontwikkeld door Facebook en is al sinds 2015 open source beschikbaar. Inmiddels is het een volwassenen en stabiele tool. De beta-versie van Flutter is gereleased in februari 2018 door Google. Sindsdien is de community groeiend, maar nog steeds beperkt. Dat als introductie, maar wat is er nu echt belangrijk bij een vergelijking van React Native vs. Flutter?

React Native en Flutter verschillen van elkaar qua programmeertaal, de manier waarop native componenten toegankelijk zijn, de documentatie, de testmogelijkheden en de manier waarop de export naar IOS & Android plaatsvindt. Laten we die elementen verder bekijken.

Twijfel je nog tussen hybrid of cross platform app-development? Lees dan ons blog over native. vs. hybrid vs. cross platform app-development.

Programmeertaal

React Native maakt gebruik van JavaScript, een veel gebruikte programmeertaal. Verder gebruikt React Native zoals de naam als zegt het framework React. Omdat dit veruit het meest gebruikte webdevelopment framework is, zal voor veel developers de stap naar React Native klein zijn. Verder zijn er genoeg tutorials te vinden en is het makkelijk om code te hergebruiken.

Flutter daarentegen werkt met de in 2011 door Google geïntroduceerde taal Dart. Deze relatief nieuwe programmeertaal wordt amper gebruikt. Door object oriented concepts is de taal makkelijk te leren voor developers die bekend zijn met Java, PHP of C#. Als de complexiteit van de apps toeneemt, is het echter nodig om meer over Dart te leren. Daarnaast wordt Dart door relatief weinig IDEs & text editors ondersteund.

Community

React Native heeft een grote community. Veel developers hebben ermee gewerkt en veel grote spelers op de markt gebruiken React Native, zoals Instagram, Facebook en Skype. De community deelt veel informatie met elkaar via GitHub en meetings. Deze grote community heeft als voordeel dat je als app-eigenaar makkelijk een developer kan vinden, en dat je als developer makkelijk informatie kan vinden. Het framework is hierdoor ook volledig battle-tested en voor bijna elke bug kun je op het internet een oplossing vinden.

De community van Flutter is al enkele jaren groeiende, maar nog niet erg groot om veelvoorkomende problemen op te lossen. Dat wil zeggen dat het lastiger is developers te vinden met veel ervaring met dit framework en het ook lastiger is om support te vinden in de community. Wel zijn er (online) meetups en andere events. Een ander nadeel van een kleine community is dat er relatief weinig extensies en plug-ins beschikbaar zijn. Ontwikkelaars van extensies en plug-ins gaan immers eerder aan de slag met veel gebruikte frameworks.

Hoe kom je aan native componenten?

De kern van React Native bevat UI rendering en API’s. Met die API’s kan React Native native modules bereiken. Veel van deze modules zijn van derden. Dat geeft veel mogelijkheden, maar kan ook leiden tot instabiliteit. Gelukkig is React Native al geruime tijd beschikbaar waardoor de meeste API’s stabiel zijn. Daar komt bij dat het werken met de native componenten betekent dat de apps gemaakt met React Native overeenkomen met de standaarden van de verschillende besturingssystemen (iOS/Android).

Flutter is widget-based. In plaats van met native componenten, werkt Flutter met een canvas-based rendering engine. Elke widget wordt uitgerust met een canvas waarop de widget zichzelf kan tekenen. Dit wordt samengesteld tot een scène die vervolgens gepresenteerd wordt als een pixelmatrix. In feite is de engine een volledige Software Development Kit (SDK) met componenten van UI rendering, API’s, navigatie, testmogelijkheden en veel bibliotheken. Ook zijn er widgets voor Material Design. Zo heeft Flutter alles al in zich om met hybrid app-development aan de slag te gaan.

Documentatie

Voor vragen over React Native kun je vaak terecht bij de community, bijvoorbeeld via GitHub. Flutter heeft dit minder, maar daar staat tegenover dat Google wel uitgebreide documentatie aanbiedt, in de vorm van een getting-started-guide. Ook is er goede documentatie van livegang en CI/CD-support.

Handig is ook de CLI-tool Flutter Doctor die je door de setup loodst en het CI/CD-systeem Code Magic. Sinds 2019 heeft React Native echter ook een Doctor Command die onder andere kan helpen met trouble shooting en het automatisch oplossen van errors. Verder is er ook voor dit framework uitgebreide documentatie beschikbaar.

Testen

React Native maakt voor testen gebruik van tools van derden en API’s om dit mogelijk te maken, terwijl Flutter test tools ingebouwd heeft. JavaScript heeft weinig testing frameworks voor units en daarom zul je bij React Native tools van derden als Appium of Detox nodig hebben.

Flutter daarentegen heeft ingebouwde mogelijkheden voor het testen van zowel units als widgets en integraties. Ook over de testmogelijkheden is documentatie beschikbaar.

En hoe werkt ‘ie?

Nadat je je app ontwikkeld hebt, moet hij uiteraard naar IOS en Android gepusht worden. React Native maakt hiervoor gebruik van de JavaScript Bridge API. Deze ‘mapt’ de JavaScript code naar native code. De Bridge wordt aangeroepen met een bepaalde functie en zorgt ervoor dat dit doorgestuurd wordt naar de bijbehorende functies op Android en iOS zonder compilation stap. Hierin zit een korte vertraging. Flutter heeft als hybrid app geen Bridge nodig. De app zal daardoor iets sneller functioneren.

React Native vs. Flutter?

Met React Native snel aan de slag kun je over het algemeen snel aan de slag en er is een grote community om op terug te vallen. Dat is handig zowel als je een nieuwe developer zoekt, als wanneer je als developer vragen hebt. Het framework is stabiel bijvoorbeeld qua API’s. Het is volwassen en betrouwbaar en wordt door veel grote spelers gebruikt.

Flutter heeft voordelen op het gebied van documentatie en de canvas-rendering-engine en testmogelijkheden, maar dat weegt niet op tegen de nadelen van het gebruik van Dart en de kleine community. Voorlopig zijn er nog teveel obstakels om Flutter een goed alternatief te laten zijn voor React Native.

Meer weten?

Social Brothers heeft veel expertise op het gebied van app development. Wil je meer weten over app development of wil je een app laten bouwen voor jouw organisatie? Neem dan contact op. Wij helpen je graag verder.