Bij Oberon kiezen we voor React (dit is waarom)
Goede en handige webapplicaties maken het leven van de moderne mens een stuk makkelijker. Ze automatiseren normaliter tijdrovende processen met behulp van digitale platformen als reserveringssystemen, evenementenplatformen, webshops en een intra- of extranet. Webapplicaties staan bovendien niet op je computer. Je opent ze met een webbrowser, waardoor je met de juiste credentials altijd, overal en op elk apparaat toegang hebt.
Er zijn verschillende manieren, technologieën en tools voor het ontwikkelen van kwalitatief hoogwaardige en gebruiksvriendelijke webapplicaties. Bij Oberon gebruiken we React Web voor het ontwikkelen van websites, webapplicaties en apps, terwijl React Native uitkomst biedt bij het maken van mobiele applicaties. React zorgt ervoor dat ontwikkelprocessen en ontwikkelomgevingen sneller, flexibeler, makkelijker uitbreidbaar en gebruiksvriendelijker worden.
Op deze pagina leggen we uit wat React is en hoe de technologie je helpt bij het maken van betere websites en apps. Lees verder om erachter te komen welke voordelen het gebruiken van React en React Native met zich meebrengt en waarom Oberon voor deze technologieën kiest.
Meer lezen over React en React Native?
Wat is React?
React is een JavaScript-library voor het bouwen van gebruikersinterfaces. Meta ontwikkelde React in 2011 vanuit de behoefte om de code van grote webapplicaties beter beheersbaar te maken. Het was in eerste instantie een intern project voor het Facebook- en Instagramplatform. In 2013 introduceerde Meta React bij het grote publiek en werd het een opensourceproject. Inmiddels maken meer dan een miljoen websites gebruik van React. Voorbeelden zijn:
- Netflix
- Airbnb
- De website van The New York Times
- De webversie van WhatsApp
In de kern houdt React zich voornamelijk bezig met het bepalen van welke onderdelen van de interface van een applicatie geüpdatet moeten worden. Vervolgens heeft React twee 'smaken', een voor websites en webapplicaties en een voor mobiele applicaties. De eerste, ReactDOM, is bedoeld voor website-ontwikkeling en wordt eigenlijk gewoon React genoemd. De tweede is React Native. Deze versie is speciaal ontworpen voor het ontwikkelen van mobiele apps.
React wordt tegenwoordig onderhouden door Facebook en Instagram, samen met een gemeenschap van onafhankelijke softwareontwikkelaars en bedrijven.
JavaScript, een programmeertaal en -omgeving die zich in de loop der tijd snel heeft ontwikkeld tot de meest gebruikte ter wereld, vormt de basis van React. Ontwikkelen doe je met een inzichtelijke en gebruiksvriendelijke interface. Er is een grote community rondom React die modules (genaamd ‘packages’) bouwt die je in combinatie met React kan gebruiken. Deze community bestaat voor een groot deel uit professionals en veel van de packages zijn van hoge kwaliteit. Zo heb je als ontwikkelaar meer controle over wat je wil gebruiken. Je bouwt in React ook probleemloos een eigen mappenstructuur, een verschil met traditionele frameworks waarmee dit meestal niet mogelijk is. Met React bepaal je ook zelf welke modules je installeert in plaats van dat je gebruik moet maken van reeds gedefinieerde standaardmodules.
React en Native React voor webontwikkeling: de voordelen en mogelijkheden
React gebruiken als primaire tool voor webontwikkeling opent een wereld aan mogelijkheden en gaat gepaard met diverse interessante voordelen. Tijd om die eens nader te bekijken.
Meer snelheid dankzij server side rendering
Bij een SPA (single page application) wordt de opmaak van de pagina als HTML ingelezen en komt de data apart van de server vanuit een API. Het voordeel is dat je, nadat de app is ingeladen, heel snel en interactief binnen de applicatie kunt rondklikken en navigeren. Dit werkt op zich mooi, maar heeft ook een belangrijk nadeel: het tonen van de pagina wordt wat vertraagd doordat het inladen in het begin lang duurt. De applicatie moet tenslotte eerst de HTML en data inlezen, waarna de browser die informatie combineert tot een volledige pagina.
Dit is voor websites en online-platformen een no-go. Daarom gebruiken we bij dit soort applicaties server-side rendering (SSR) en static site generation (SSG). In het geval van SSR wordt de HTML op de server gegenereerd als een gebruiker de pagina bezoekt, terwijl bij SSG vantevoren de HTML gegenereerd en klaargezet wordt op de server (sneller, maar minder dynamisch). Omdat de applicatie nu wel direct een HTML-pagina inlaadt, zal een gebruiker sneller resultaat op het scherm zien. Vervolgens gaat de webapp verder als SPA en heb je weer de voordelen van het snel rondklikken.
Geoptimaliseerd voor zoekmachines
Een nadeel van populaire webapplicaties als SPA's (single page applications) is dat ze SEO-technisch niet optimaal zijn. Zoekmachines halen pagina's op op basis van URL's; de pagina's achter die URL's worden één voor één geïndexeerd. Een SPA heeft echter maar één pagina. De rest van de applicatie wordt gegenereerd met behulp van JavaScript in de browser. De zoekmachine ziet dus vooral de eerste pagina van een SPA. Die bevat buiten de opstartcode voor de SPA geen informatie, waardoor een zoekmachine er helemaal niets aan heeft.
React lost dit voor je op, wederom door gebruik te maken van de kracht van server side rendering. Als een zoekmachine een URL uit de applicatie ophaalt, bouwt de server de pagina netjes op. Dezelfde JavaScript-code die in de browser draait om pagina's op te bouwen, draait dus ook op de server. Het maakt voor de gebruikerservaring dus voortaan niet meer uit of de applicatie een pagina genereert op de server of in een browser.
Perfecte samenwerking met Redux
Een ander sterk punt van React is dat de technologie heel goed samenwerkt met Redux. Zo goed zelfs dat de twee, hoewel Redux feitelijk een op zichzelf staand framework is, als één geheel worden gezien.
Als er iets verandert op een pagina, bijvoorbeeld omdat je data hebt ingeladen of omdat een gebruiker ergens op heeft geklikt, past de applicatiecode alleen de onderliggende data aan. Redux zorgt er vervolgens voor dat deze aanpassingen worden doorgegeven aan de gebruikersinterface (UI). React fungeert binnen deze architectuur als UI en hertekend alleen de delen van de pagina die veranderd zijn. Zo wordt de precieze 'state' van de applicatie maar op één plek bijgehouden, namelijk in Redux. De UI past zich daar automatisch op aan. Het grote voordeel voor de gebruiker? Een veel snellere website en een vloeiende gebruikerservaring.
In één keer ontwikkelen voor iOS en Android
Het ontwikkelen van mobiele apps is een uitdaging op zich. Zo moet je er bijvoorbeeld voor zorgen dat er zowel een versie voor iOS als eentje voor Android komt. Er bestaan hybride systemen (denk bijvoorbeeld aan PhoneGap) voor het ontwikkelen van mobiele apps, maar die hebben we bij Oberon eigenlijk altijd gemeden. Dergelijke platforms verschillen niet veel van lokale websites met een app-schilletje eromheen. Ze zijn slecht aanpasbaar aan het specifieke besturingssysteem en traag in de bediening.
Om die reden koos Oberon er tot dusver altijd voor om losse 'native' apps te ontwikkelen voor iOS en Android. Dit betekende wel altijd dubbel werk, aangezien je alleen het design (grotendeels) kunt delen. Werken met React Native is een ander verhaal. Deze technologie zet de JavaScript-code om naar 'native' iOS- en Android-componenten. Daarnaast is het mogelijk om vanuit React eigen native-componenten te gebruiken voor onderdelen waarin React niet voorziet. Denk bijvoorbeeld aan het uitlezen van een camera of andere hardware.
Op die manier krijgen apps de kracht van native, terwijl je ze toch maar één keer hoeft te ontwikkelen. En dit voordeel van maar een keer schrijven zet zich natuurlijk voort in het onderhoud van de app. Ook alle aanpassingen hoef je maar één keer door te voeren. Zo ontwikkel en onderhoud je kwaliteitsapps tegen een veel lager kostenplaatje.
Een sterke combinatie
Het combineren van React en React Native leidt weer tot extra voordelen. Je kunt bijvoorbeeld op een eenduidige manier ontwikkelen, waardoor het bouwen van een applicatie een stuk makkelijker wordt. Alle code wordt op dezelfde manier opgezet in dezelfde programmeertaal, namelijk JavaScript (officieel: ECMAScript 6). Daarnaast hergebruik je probleemloos de code die de bedrijfslogica regelt. Zowel de website als de bijbehorende app draaien probleemloos op dezelfde code. Alleen de code van de gebruikersinterface is echt anders.
Tegenwoordig werken we ook vaak met gedeelde code. Via React Native Web kunnen we de code van de app namelijk ook voor het web inzetten. Dit werkt dan wel echt als een SPA (zonder SSR en SSG) en zetten we veelal alleen in voor ingelogde onderdelen, zoals "mijn-omgevingen". Dan hebben we een volledig gedeelde codebase die voor zowel Android, iOS als web werkt.
Dit levert werken met React Oberon op
React levert Oberon de tools en handvatten die we nodig hebben om krachtige websites en applicaties te maken. Ontwikkelaars krijgen de mogelijkheid om een nette, prima onderhoudbare code te schrijven die een prettige gebruikerservaring koppelt aan uitstekende SEO-mogelijkheden. Daarnaast is React snel, flexibel (je kunt werken met bestaande en nieuwe JavaScript-componenten en verschillende plug-ins van derden gebruiken) en gemakkelijk uit te breiden.
React Native gebruiken we bij Oberon voor het ontwikkelen van iOS- en Android-apps. Je krijgt namelijk de mogelijkheden en gebruikerservaring van native apps zonder dat je de overhead hebt die hoort bij het bouwen van 2 aparte apps. Heb je al enige ervaring met het ontwikkelen van mobiele applicaties? Dan is het ook nog eens verrassend makkelijk om met React Native te (leren) werken.
Meer weten?
Wil je de voordelen van React en React Native ontdekken? Dan helpt Oberon je graag verder. Wij vertalen de kracht van de technologie naar applicaties die jouw business naar een hoger niveau tillen. Grote namen als Facebook, Tesla, Instagram, Netflix en het filmfestival IDFA gingen je al voor bij het gebruiken van React.
Benieuwd naar de mogelijkheden? Neem dan gerust vrijblijvend 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.