Cross-platform development kent tegenwoordig heel wat voorstanders. Een enkele codebase, tools en consistent gedrag zijn slechts enkele van de redenen waarom ontwikkelaars cross-platform verkiezen boven native development. Een applicatie bouwen voor Android en iOS met behulp van een enkele programmeertaal is ook sneller en lucratiever vanuit een zakelijk oogpunt.
Er zijn vandaag verschillende frameworks voor cross-platform op de markt: Flutter, React Native, Ionic, Cordova, Xamarin, enz. Maar er zijn slechts twee serieuze opties die je moet overwegen; Flutter en React Native zijn toonaangevende marktspelers in de cross-platform niche.
In dit artikel helpen we je een weloverwogen beslissing te nemen door Flutter en React Native te vergelijken op basis van vier criteria, namelijk:
- De programmeertaal
- De architectuur
- Kant-en-klare widgets en componenten
- Ontwikkelingstools en documentatie
Maar laten we eerst eens kort ingaan op Flutter en React Native.
Wat is Flutter en wat is React Native?
Flutter en React Native zijn frameworks om zowel Android- als iOS-apps met behulp van een enkele programmeertaal te ontwikkelen. Flutter, uitgebracht in 2017, is het geesteskind van Google, terwijl React Native aanvankelijk een Facebook-project was. Het werd open-source gemaakt in 2015.
Flutter is een UI-framework bedoeld voor de snelle ontwikkeling van UI’s op basis van Material Design en Apple Human Interface Guidelines. Het Google Chrome-team bracht de eerste stabiele 1.0-versie uit in 2018. Momenteel is de 1.9-versie beschikbaar.
Apps ontwikkeld met Flutter:
- Alibaba – een e-commerce-app waarmee gebruikers kunnen winkelen met hun smartphones.
- Google Ads – met deze app kunnen gebruikers hun Google-advertentiecampagnestatistieken bekijken op hun smartphone.
- Birch Finance – een fintech-app die gebruikers helpt bij het beheren van hun kredietkaarten.
ReactNative is een framework voor de ontwikkeling van mobiele apps. Het zag voor het eerst het daglicht tijdens een interne Facebook-hackathon van 2013. De eerste openbare versie werd uitgebracht in 2015.
Apps ontwikkeld met React Native
- Facebook – het gerenommeerde sociale medianetwerk heeft enkele componenten die ontwikkeld zijn in React Native.
- Instagram – een sociale media-app van Facebook om afbeeldingen te delen.
- SoundCloud Pulse – een open-source platform voor het delen en verspreiden van muziek.
Laten we nu de SDK’s volgens de vier bovengenoemde criteria met elkaar vergelijken.
Programmeertaal
De programmeertaal die wordt gebruikt is een van de belangrijkste criteria voor het kiezen van framework. De populariteit ervan bepaalt de beschikbaarheid van specialisten op de markt, de grootte van de ontwikkelaarsgemeenschap, de kwaliteit van een eindproduct en de ontwikkelingssnelheid.
Flutter
Flutter is gebaseerd op Dart voor app-ontwikkeling. Deze Java-achtige programmeertaal die is geoptimaliseerd voor het ontwikkelen van client-applicaties voor mobiele, web- en server-side platforms, wordt gekenmerkt door strikte typering, wat het debuggen en onderhoud vereenvoudigt. Dart is een eigentijdse en snel ontwikkelende taal. Het is evenwichtig, integreert veel moderne benaderingen en is tegelijkertijd van onnodige syntaxis die de leesbaarheid kan belemmeren en de leercurve kan vergroten. De laatste versie van Dart is 2.6.
React Native
React Native is gebaseerd op React, een JavaScript-bibliotheek voor de ontwikkeling van gebruikersinterfaces, om applicaties te schrijven. Met React kunt u sneller code schrijven, hoewel dergelijke code moeilijker te debuggen en te onderhouden is. De taal is volwassen en ook erg populair bij webapplicatie. Men beschikt ook over uitgebreide ondersteuningsdocumentatie, en er zijn veel open-source bibliotheken beschikbaar voor praktische problemen.
Dit is absoluut voordelig voor het hele op JavaScript gebaseerde ecosysteem omdat de talentpool aanzienlijk groter is.
Architectuur
De architectuur van het framework is het tweede belangrijke criterium waarop we ons zullen focussen. Het heeft namelijk invloed op het gemak en de snelheid van ontwikkeling, de uitbreidingsmogelijkheden voor bepaalde taken en tenslotte de kwaliteit van het eindproduct.
Flutter
Aangezien Flutter in eerste instantie een framework is voor het ontwikkelen van gebruikersinterfaces, beschikt het over een low-level Skia-engine, welke onder de motorkap ook Google Chrome en Android aandrijft. Via deze engine kan Flutter zijn componenten weergeven aan 60 FPS. Flutter beschikt tevens over zijn eigen widgetbibliotheek. Dat leidt tot hoge prestaties en een naadloze UI-werking, evenals een uniform UI ongeacht de OS-versie. Hierdoor zien applicaties er hetzelfde uit, zowel op nieuwe versies van Android als op oudere versies tot versie 4.4. Bij native development is dit erg moeilijk te realiseren.
React Native
React Native is gebaseerd op een JavaScript-engine die werkt als een brug tussen de JS-code en native OS-componenten. Met deze aanpak lijken applicaties die in React Native zijn geschreven sterk op native apps. Het nadeel is dat een dergelijke aanpak leidt tot prestatieproblemen als gevolg van vertragingen bij het interpreteren van de JavaScript-code terwijl de toepassing actief is.
Development/SDK API
Een goede SDK-architectuur, compleet met kant-en-klare widgets en componenten die de ontwikkeling versnellen, is een erg belangrijke factor bij het kiezen van een framework.
Flutter
Omdat Flutter is gericht op snelle UI-ontwikkeling, wordt de Flutter SDK geleverd met een enorme bibliotheek aan widgets. De SDK biedt kant-en-klare implementaties van de meeste moderne UI-patronen, zoals tabbladnavigatie, zijbalknavigatie en schuifeffecten. De widgetbibliotheek ondersteunt Google Material Design en Apple Human Interface Guidelines. Dat stelt de ontwikkelaar in staat om snel een prototype te maken en een UI te ontwikkelen die er native uitziet op Android en iOS.
De widgetbibliotheek is volledig open-source, wat bij de ontwikkeling bijna onbeperkte mogelijkheden biedt voor het aanpassen en uitbreiden van bestaande functionaliteit zonder gebruik te maken van native componenten.
Het tweede voordeel zijn de uitstekende prestaties bij het weergeven van de gebruikersinterface en verschillende soorten animaties.
React Native
De React Native SDK wordt alleen geleverd met een basisset aan widgets. Om met andere native UI-componenten te werken, wordt van ontwikkelaars verwacht dat ze oplossingen van derden gebruiken. Je kunt veel kant-en-klare componenten vinden in de open-source community. Ontwikkelaars lopen echter altijd het risico problemen te ondervinden bij de integratie ervan, omdat ze native platformcode bevatten. Daarom moet de ontwikkelaar altijd voorbereid zijn op dergelijke problemen en in staat zijn om door de structuur van platformprojecten voor zowel Android als iOS te navigeren.
Zoals hierboven vermeld, maakt ReactNative gebruik van native componenten om de UI te renderen. Hierdoor lijken applicaties zo nauw mogelijk als native apps. Tegelijkertijd kan de release van een nieuwe OS-versie de gebruikersinterface van het programma breken. Deze benadering veroorzaakt ook problemen bij het bouwen van aangepaste componenten, wat betekent dat het gewenste gedrag telkens twee maal moet worden geïmplementeerd, voor Android en iOS.
Ontwikkelingstools en documentatie
Handige ontwikkelomgeving, een eenvoudige leercurve en initiële configuratie zijn enkele van de doorslaggevende factoren bij het kiezen van een software-ontwikkelingskit. Een geweldige SDK moet eenvoudig te bedienen en te leren zijn.
Flutter
De Flutter SDK wordt geleverd met een complete set tools voor het ontwikkelen en debuggen van applicaties, zoals integratie met populaire IDE’s (Intellij IDEA and Visual Studio Code), tools voor het debuggen & monitoren van de prestaties en unit testing. Het beschikt ook over een zogenaamde ‘hot reload’-modus waarmee je een nieuwe code kunt uitvoeren zonder de toepassing opnieuw te starten, wat je erg veel tijd bespaart wanneer je een probleem moet debuggen. Daarnaast is de SDK ook erg eenvoudig in gebruik.
Flutter heeft eersteklas documentatie; daarnaast beschikt het ook over een geweldige starters-toolkit die ontwikkelaars door elk aspect van de installatie en ontwikkeling leidt.
React Native
Net als Flutter beschikt React Native over een ‘hot reload’-functie waarmee de mobiele UI sneller codewijzigingen weergeven. React Native-ontwikkelaars kunnen de web-app-code ook met succes gebruiken voor de ontwikkeling van desktop-apps.
Wat documentatie betreft, heeft React Native een uitgebreide bibliotheek met docs en tutorials die actief wordt ondersteund door de uitgebreide ontwikkelaarsgemeenschap. De configuratie kan echter behoorlijk complex zijn, vooral als je nog niet bekend bent met cross-platform development.
Conclusie
Hoewel Flutter een relatief nieuwe (maar snelgroeiende) ontwikkelaarsgemeenschap heeft in vergelijking met die van React Native, beschikt het wel over uitstekende documentatie en ondersteuning en biedt het een snellere time-to-market.
We hopen dat deze informatie je helpt een bewuste, geïnformeerde keuze te maken en het juiste cross-platform development framework te kiezen voor je project.
