Razendsnel ontwikkelen voor web en mobiel met React Native for Web
Je hebt vast al eens gehoord van React en React Native: bekende en veelgebruikte frameworks die het makkelijk maken om snel applicaties en platformen te ontwikkelen. Om die reden zijn deze frameworks inmiddels een begrip in de techwereld en worden gebruikt worden door innovatieve spelers als Meta, Uber en Netflix. React Native for Web (RNfW) is een nieuwe variant op React Native waarmee je op basis van een bestaande app ook makkelijk een webversie van hetzelfde product of platform maakt.
Omdat markten en klantbehoeften door de voortschrijdende digitalisering sneller dan ooit veranderen, streven veel bedrijven naar een hogere ontwikkelsnelheid en kortere time-to-market voor nieuwe applicaties. Met React Native for Web kan je op basis van één codebase een applicatie maken voor iOS, Android én het web, waardoor het ideaal is voor snelle ontwikkeltrajecten.
Maar hoe werkt React Native for Web precies? Wat zijn de belangrijkste redenen om de technologie te gebruiken? Wat is zijn de verschillen tussen React, React Native en RNfW? En voor welke toepassingen is RNfW wel of juist minder geschikt? Je leest het in dit artikel.
Wat is React Native for Web?
React Native for Web is een framework waarmee je zowel mobiele applicaties en platformen als webversies van deze producten ontwikkelt door gebruik te maken van slechts één broncode (volledig geschreven in Javascript). Gewoonlijk programmeert men een applicatie of webplatform met verschillende programmeertalen en frameworks, afhankelijk van de toepassing. Je gebruikt bijvoorbeeld Kotlin voor Android, Swift voor iOS en React.js voor de webversie.
React Native, zonder “for Web”, maakt het mogelijk om met slechts één framework geschreven in één programmeertaal een native app te maken voor verschillende platformen. React Native is een technologie die uit de koker van Meta komt. De techgigant ontwikkelde React Native in 2013 om Facebook te bouwen en stelde de technologie in 2015 beschikbaar aan het grotere publiek.
RNfW is een doorontwikkeling van React Native. Het vertaalt React Native code terug naar een vorm die voor het web geschikt is. Van de drie varianten is dit de enige waarmee je voor alle platformen kunt ontwikkelen.
| Framework | Web | iOS apps | Android apps |
|---|---|---|---|
| React.js | ✓ | ||
| React Native | ✓ | ✓ | |
| RNfW | ✓ | ✓ | ✓ |
De hoofdredenen om te kiezen voor React Native for Web
Er zijn een aantal redenen om te kiezen voor RNfW. Hieronder zetten we de belangrijkste voordelen onder elkaar:
- Tijdsbesparing — In plaats van drie verschillende versies van een applicatie of platform te bouwen, voor iOS, Android en het web, elk op basis van een andere programmeertaal en andere frameworks, kan je nu één product ontwikkelen dat bruikbaar is op alle kanalen. Hierdoor hoef je slechts één code te schrijven waarbij alle componenten herbruikbaar zijn tussen de platformen, wat de ontwikkeltijd aanzienlijk verkort.
- Parallelle functionaliteiten — Nieuwe functionaliteiten of wijzigingen in bestaande functionaliteiten worden automatisch toegevoegd aan alle versies van de applicatie. Dat scheelt weer veel extra ontwikkelwerk en -tijd.
- Consistentie tussen platformen — Het design en de interactie zijn consistent tussen de platformen. Dat maakt het makkelijk voor gebruikers die wisselen van platform. Bovendien hoeven eventuele problemen slechts één keer te worden opgelost.
- Kleinere ontwikkelteams — Door de mogelijkheid om met één codebase voor verschillende platformen te werken, heb je geen aparte iOS-, Android- en webdevelopers nodig. Dit verkleint ook de kans op vertraging binnen een project of ontwikkeltraject, bijvoorbeeld omdat de gespecialiseerde iOS-developer langdurig ziek wordt of op wereldreis gaat.
- Minder debugging en optimalisatie — Doordat je de technologie op meerdere platforms inzet, is er minder debugging en optimalisatie nodig. Eén app om te bouwen betekent slechts één backlog, uniforme versie-updates en één set bugs die je moet verhelpen.
Wanneer is React Native for Web waardevol en wanneer niet?
Hoewel React Native for Web veel voordelen heeft, is het geen silver bullet die voor alle toepassingen werkt. De technologie is bijvoorbeeld niet geschikt voor zeer specifieke native-toepassingen als VR en AR. Daarnaast is RNfW niet ideaal voor websites met uitgebreide SEO- en performance-wensen. Denk bijvoorbeeld aan webshops, waarbij een snelle laadtijd van groot belang is. RNfW voegt immers een extra laag toe die een klein beetje vertraging kan veroorzaken.
RNfW leent zich daarentegen wel uitstekend voor mijn-omgevingen. Dit zijn selfservice portalen die een bedrijf of instelling aan klanten of burgers aanbiedt, waarin mensen zelf zaken kunnen regelen of toegang hebben tot exclusieve diensten of producten. In mijn-omgevingen is het vooral van belang dat het platform via alle kanalen en op alle apparaten een vergelijkbare gebruikerservaring biedt. SEO speelt geen rol, aangezien de gebruiker een afgeschermde omgeving achter een login bezoekt.
Daarnaast is RNfW ideaal voor organisaties die tegen een betaalbare prijs een mobiele versie én webversie van een applicatie of platform willen hebben. Omdat je sneller en met minder developers kunt ontwikkelen, zijn de kosten een stuk lager dan wanneer je drie aparte versies bouwt. Ook als het gewenst is om snel live te gaan met een “minimum viable product” is RNfW vaak een logische keuze.
Het is wel belangrijk om vooraf een goede financiële afweging te maken. Hoe belangrijk is het voor jouw business dat je drie versies van een applicatie of platform hebt? Bouwen met React Native for Web is namelijk duurder dan het ontwikkelen van alleen een applicatie met React Native of dan alleen web met React. Later RNfW toevoegen aan een bestaande app is daarentegen weer een stuk duurder dan van meet af aan gebruikmaken van deze technologie.
React versus React Native (for Web): de technische werking
React.js is een JavaScript-framework dat snel en schaalbaar is. React maakt het mogelijk om snel websites en web-apps te ontwikkelen, mede dankzij een actieve open source community. Deze stelt ontwikkelaars in staat om gebruik te maken van veel kant-en-klare packages en code libraries van hoge kwaliteit.
React Native bevat de meeste features en voordelen van React, maar in plaats van componenten die je op een website gebruikt, bevat RN componenten waarmee je een app kunt bouwen. Deze componenten zijn te gebruiken voor iOS en Android apps, maar niet zonder meer voor webprojecten.
RNfW “vertaalt” deze app-specifieke componenten weer terug naar HTML-elementen (componenten die voor het web geschikt zijn). Je bouwt dus feitelijk een native app en vertaalt die vervolgens terug naar het web. Eventuele features die alleen native werken, vervallen dan of moeten vervangen worden door vergelijkbare web-gebaseerde functionaliteit. RNfW is dus bedoeld om volledig cross-platform te ontwikkelen, wat niet mogelijk is met React.js of React Native alleen.
De uitdagingen met React Native for Web
Een uitdaging die om de hoek komt kijken bij het werken met RNfW is dat niet alle packages ondersteuning bieden voor gebruik op het web. Dit is op te lossen door gebruik te maken van “mocked packages.” Deze vervangen (deels) de oorspronkelijke functionaliteit of vangen het ontbreken van de functionaliteit op. Soms is een drop-in replacement beschikbaar waarmee zonder meerwerk de native functionaliteit vervangen kan worden door een equivalente web-implementatie.
Daarnaast zijn er een aantal tools en mechanismen om stukken van de gedeelde code toch specifiek voor een platform (te weten iOS, Android of web) te maken. Met behulp van een platform-check kun je in de code een uitzondering maken. Daarnaast is het mogelijk om een bestand conditioneel aan de codebase toe te voegen, op basis van de extensie. Zo zouden we de bestanden Button.tsx en Button.web.tsx kunnen maken als de wens bestaat om de button in de webversie een ander uiterlijk of andere functionaliteit te geven. Het is aan te raden om dit soort uitzonderingen beperkt toe te passen: het delen van code tussen platformen is juist het doel van RNfW. Maar met name op het gebied van gebruiksvriendelijkheid kan een klein verschil in uiterlijk of functioneren wel een groot effect hebben.
Een ander aspect is styling: sommige dingen zullen er op een mobiele applicatie voor iOS of Android net wat anders uitzien dan op het web. Dit kan leiden tot extra overhead, maar is te ondervangen door in de beginfase een goed plan te maken voor de architectuur van de applicatie, de UX en de requirements van de verschillende platformen.
Voorbeelden uit de praktijk
Er zijn verschillende best case examples te noemen die het succes van React Native for Web illustreren. Een goed voorbeeld is Uber. Dit is een bedrijf dat snel nieuwe dingen moet kunnen neerzetten en streeft naar snelheid en een unieke, uniforme en gebruiksvriendelijke ervaring via verschillende kanalen en op diverse apparaten. Bovendien doen ze alles met een relatief klein team. RNfW is een technologie die deze wensen faciliteert en daardoor mede aan de basis staat van Ubers succes.
Ook de “Ik Ben app” van telecomaanbieder Ben is een prima voorbeeld van RNfW in actie. Ben werkt met een klein team voor applicatieontwikkeling. Met RNfW is Ben erin geslaagd om snel, met relatief weinig mensen en tegen lage kosten de verschillen in uiterlijk en functionaliteit tussen de website en mobiele applicatie weg te nemen. Het resultaat? De klant kan rekenen op een gebruiksvriendelijke en uniforme ervaring op elk scherm.
Meer weten?
Bij Oberon kiezen we meestal voor React en React Native (for Web) bij het ontwikkelen van websites, webapplicaties en (mobiele) apps. De technologie maakt het mogelijk om op een elegante en gestroomlijnde manier applicaties te ontwikkelen, laat je werken met een heldere en nette codebase en levert eindproducten met een natuurlijke en gebruiksvriendelijke look en feel op.
Wil je ook kennismaken met de kracht van React Native for Web? En zoek je een partner die alle ins en outs van de technologie kent? Neem dan gerust contact met ons op door te bellen naar +31 (0)20 344 94 80 of te mailen naar contact@oberon.nl. Je kunt ook het contactformulier op onze website invullen.