Ionic of React Native als framework voor een app? Een overweging die zeker niet makkelijk is, menig ontwikkelaars (of opdrachtgevers) hebben zich dan ook even achter de oren gekrabd bij het maken van deze keuze. Ionic en React Native zijn de populairste frameworks voor mobiele apps en het debat is dan ook hevig gaande. Dit is niet gek. Beide frameworks ondersteunen de sterkste programmeertalen en hebben elk hun eigen key features en nadelen. Als specialist in app ontwikkeling hebben wij ontwikkelaars van beide frameworks in huis en ze vertellen je er graag meer over zodat jij straks een betere keuze kunt maken. Ionic of React Native?

*Voordat we in dit artikel dieper ingaan op de kenmerken van beide frameworks is het misschien goed eerst toe te lichten dat Ionic een cross-framework is voor hybride apps. React Native is een cross-framework voor de ontwikkeling van native vergelijkbare apps. Beide frameworks hebben elk hun eigen voordelen, wij hebben ze op een rij gezet.

Benieuwd naar een actueel voorbeeld van een Ionic of een React Native app productie? Bekijk dan één van onze laatste app ontwikkelingen met deze frameworks.

Ionic

Ionic is uitgebracht in 2013 en werkt met HTML, CSS en JavaScript. Ionic is een framework dat is ontworpen voor de ontwikkeling van hybride mobiele apps met Angular en Cordova. Sinds Ionic 4 recentelijk op 23 januari is gereleased hoeft er niet meer perse met Angular en Cordova gewerkt te worden, zo kan je bijvoorbeeld Capacitor gebruiken. Ionic heeft een gemakkelijk uitbreidbaar basisthema met geavanceerde functies zoals interactieve flows, mobiele componenten en typografie. Wat Ionic populair maakt is voornamelijk de eenvoud van het ontwikkelen van mobiele apps in dit framework. ‘Write once and run everywhere” is dan ook een passend motto van Ionic. Als je al enige ervaring hebt met het open source webapplicatie framework Angular dan zal app ontwikkeling met Ionic een relatief gemakkelijke taak zijn. Voornamelijk in structuur en design vertonen de twee frameworks veel overeenkomsten. Het Ionic framework heeft een set van vooraf ontwikkelde componenten voor UI. Dit kan het werk aanzienlijk vereenvoudigen of versnellen. Een van de key features van Ionic is de adaptabiliteit van het framework en het enorme aanbod van (veelal gratis) plugins waardoor third-party solutions minder nodig zijn.

Voordelen:

  • Platform onafhankelijk.
  • Open source en veelal gratis.
  • Code kan worden hergebruikt.
  • Bouwt apps voor iOS, android, Windows, Desktop, Web en PWA.  
  • Een standaard set van componenten die al gestyled en compatibel zijn met elk platform.
  • Vergt relatief minder ontwikkeltijd en daardoor minder budget.
  • Maakt het mogelijk om op een gemakkelijke en efficiënte manier standaard gebruikersfunctionaliteiten van een mobiele app te maken.
  • Werkt op zowel UIWebView (iOS) en WebView (Android).
  • Kan worden getest in elke browser.

Nadelen:

  • Prestaties kunnen minder zijn dan met React Native. Denk aan User Experience, de vloeiendheid van animaties of de app snelheid.
  • Prestatieproblemen bij het gebruik van te veel callbacks naar de native code.
  • De ontwikkeling van geavanceerde interactieve of grafische transities kan ingewikkeld zijn.

"Ik vind het handig dat als je gewend bent met Angular te werken, je direct met Ionic aan de slag kunt. Ionic is eigenlijk net Angular maar dan met Ionic componenten. Dit maakt de ontwikkeling enorm efficiënt." - Raymon Tsung - onze Ionic developer

React Native

React Native is ontwikkeld door Facebook in 2015. Het is dan ook geen verrassing dat delen van de bekende applicaties zoals Facebook, Skype en Instagram in het React Native framework zijn gemaakt. Dit framework werkt voornamelijk met JavaScript en zorgt ervoor dat app ontwikkelaars apps kunnen ontwikkelen voor iOS, Android en Windows. React Native maakt het mogelijk om cross-platform apps te maken die bijna niet te onderscheiden zijn van native apps en worden gekenmerkt door hoge mate van gebruiksvriendelijkheid en responsiveness. Wanneer je een code in React schrijft wordt het vervolgens weergegevens als native UI-component in de mobiele app. Dit is een beetje te vergelijken met het invoeren van een zin in Google Translate. Doordat React is gebaseerd op JavaScript kan de code gedeeld worden op meerdere platformen. Specifieke onderdelen voor iOS of Android zijn gemakkelijk te implementeren in een korte tijd zonder dat de gehele code opnieuw geschreven moet worden.

Voordelen:

  • Goede prestaties, zeer snel en responsive
  • Adaptieve code voor elk platform.
  • Lijkt sterk op een native app. De gebruiker zal niet doorhebben dat het een hybride app is.
  • Hogere personificatie mogelijk doordat het minder met standaard onderdelen werkt
  • Grote ontwikkelaars community (op Github bijvoorbeeld), hierdoor kan het antwoord op eventuele vraagstukken of bottlenecks snel worden gevonden.

Nadelen:

  • Heeft relatief meer ontwikkeltijd nodig dan Ionic.
  • Is initieel ontwikkeld voor iOS, hierdoor kan het zijn dat componenten voor Android meer energie vergen.
  • Kan verbonden zijn aan meer kosten doordat het vaker gecompliceerdere apps zijn.
  • Heeft een mobiel apparaat of emulator nodig om te testen.
  • De code moet herschreven worden voor elk nieuwe platform na de lancering van de app.
  • Doordat React Native gesteund wordt door Facebook zit dit ook gebonden aan stricte licentiereglementen.

"Met react werken is fijn voor het bouwen van user interfaces. Met react maak je components voor dingen zoals een container, button, form, etc. Deze components kun je overal hergebruiken met wat aanpassingen, dus je schrijft nergens code dubbel. React gebruikt een virtual DOM, dit update alleen de components die aangepast moeten worden waardoor de prestatiesnelheid van de applicatie heel hoog is. Het ontwikkelen gaat daardoor heel efficiënt." Max Dobbelsteen - onze React Native developer

Zoals je kunt zien hebben beide frameworks elk hun eigen voordelen. Om het nog iets gemakkelijker te maken (en omdat iedereen van lijstjes houdt) hebben we de voor- en nadelen van Ionic en React Native op een rijtje gezet:

IonicReact Native
ProgrammeertaalHTML, CSS, TypeScript, Angular, JavaScriptJavaScript
CodeOpen source, herbruikbaarOpen source, aanpasbaar voor elk platform
Herbruikbaarheid codeTot 98%Tot 70%
PlatformenAndroid, iOSAndroid, iOS, Windows, Desktop, Web en PWA
ComponentenEenvoud, standaard componentenMeer zelf ontwerpen
UI engineering Custom met ingebouwde UI componentenGedeelde code tegenover de kosten van een native experience
UXGemiddelde prestatiesZeer snel en responsive
OntwikkeltijdMinder tijd nodigMeer tijd nodig
Type appHybrideHybride app met gelijkenissen van een native app

Laat de strijd beginnen: Ionic of React Native

Beide frameworks hebben elk hun eigen voordelen. Het is dan ook lastig om een uiteindelijke winnaar te kiezen. Welk framework het beste past bij een app concept hangt af van een tal van samenkomende factoren zoals het uiteindelijke doel van de app, de complexiteit, het budget, de eindgebruiker, de ontwikkelaar et cetera. Goed marktonderzoek is dus belangrijk alvorens je een ontwikkelaar inschakelt. Op basis hiervan kan blijken dat Ionic danwel React Native beter aansluit bij de wensen van de eindgebruiker. Over het algemeen biedt React Native een betere gebruikerservaring. React is een stabiel framework met een hoge performance en responsiveness. Het is bij uitstek geschikt voor hoogwaardige grote schaal applicaties en vergt vergelijkenderwijs dus ook vaak iets meer budget. Ionic daarentegen is uitermate geschikt voor app ontwikkeling waarbij snelheid en efficiëntie centraal staan tegenover uitstekende prestaties. Het is ideaal voor de ontwikkeling van snelle prototypes en een code kan op meerdere platformen worden geïmplementeerd zonder dat deze herschreven dient te worden.

Tot slot

Kortom: een absolute winnaar is er eigenlijk niet. Wat ons betreft is de keuze voor het framework volledig gebaseerd op de gewenste functionaliteiten, doelen en specificaties van de app en haar doelgroep. Wil je meer weten of ben je benieuwd naar een actueel voorbeeld van succesvolle apps met een Ionic of React Native framework? Neem dan eens een kijkje op onze portfolio pagina van de app ExamenOverzicht. Dit is een innovatieve app met een Ionic framework waarbij de nadruk lag op een efficiënte app voor zowel Android als iOS systemen. Een voorbeeld van een app met een React Native framework is de FruitInBedrijf app die momenteel door ons wordt ontwikkeld. Deze app stelt organisaties in staat om groente en fruit online te bestellen tegen marktprijzen. Deze app moet een uitmuntende look en feel hebben maar op zowel iOS als Android direct implementeerbaar zijn, vandaar onze keuze voor een React Native framework.

NEEM CONTACT OP 

Heb je een vraag of wil je graag meer weten? Neem contact op en ik help je graag verder!

Of bekijk mijn LinkedIn.

CONTACT
Stephanie Stam