Ben je als klant op zoek naar een single page applicatie waarin snelheid en een optimale gebruikservaring belangrijke voorwaarden zijn? Dan is de kans groot dat jouw toekomstige applicatie in React gebouwd wordt. Hieronder bespreken we wat het precies is en wat de voornaamste voordelen zijn. Ook gaan we dieper in op de zogeheten ‘virtual DOM’. Dit is een slimme techniek die ervoor zorgt dat de laadtijd van je applicatie tot een minimum beperkt blijft. 

Wat is React?

Voordat we ingaan op wat React precies is en wat de voordelen zijn, is het goed om het verschil te benoemen tussen React JS en React Native – deze worden vaak door elkaar gehaald. Met React JS ontwikkel je webapplicaties zoals single page applicaties of mobiele applicaties, terwijl je met React Native, de naam zegt het al, native apps ontwikkelt. In deze blog focussen we ons op React JS.   

React JS is een open source JavaScript library geschikt voor het bouwen van single page applicaties. “React wordt beschouwd als een library en niet als een framework. Uit de ‘bibliotheek’ kun je vrij kiezen welke onderdelen je wilt gebruiken voor je app en kun je zelf je eigen mappenstructuur bouwen. Binnen een standaard framework kan dit niet en wordt dit al voor de programmeur bepaald. Toch bieden frameworks en libraries beiden de vrijheid om functies op maat te maken,” legt Martijn, lead developer binnen beeproger, ons uit. “Of je een library of een framework wilt gebruiken, is een keuze. Bij React bepaal je zelf welke modules je installeert, in plaats van dat je gebruik moet maken van standaard gedefinieerde modules, zoals bijvoorbeeld routing, het opbouwen van formulieren en bijbehorende validatie.”

Voordelen React 

Het laten ontwikkelen van een webapplicatie in deze library heeft een aantal voordelen, hieronder bespreken we er drie.   

1. Snelheid 

Webapplicaties gebouwd met React zijn snel: verschrikkelijk snel, kunnen we gerust stellen. Op de bijzondere techniek achter de snelheid gaan we straks nog verder in onder het kopje: ‘Virtual DOM – de techniek achter snelle applicaties’. 

2. Flexibel en gemakkelijk uit te breiden

Apps ontwikkeld met React zijn geschreven in JavaScript. Binnen React kun je werken met zowel bestaande als nieuwe JavaScript componenten en kunnen veel verschillende plug-ins (ook van derden) gebruikt worden. Het voordeel hieraan is enerzijds dat niet alle functies zelf gebouwd hoeven worden, wat tijd bespaart. Anderzijds zijn de mogelijkheden voor het toevoegen of uitbreiden van functies eindeloos.  

3. Gebruiksvriendelijk 

De combinatie van de hierboven genoemde voordelen: snelheid en flexibiliteit, zorgen ervoor dat je met React een user interface kan ontwikkelen die zeer gebruiksvriendelijk is. Zelfs de meest geavanceerde apps met complexe functies werken snel en zijn eenvoudig in gebruik.

Virtual DOM – de techniek achter snelle applicaties

Zoals hierboven al kort benoemd, zijn webapplicaties gebouwd in React zeer snel en staan ze bekend om hun minimale laadtijd. Webapplicaties worden ontwikkeld aan de hand van een DOM (Document Object Model). Dit kun je het beste kunt zien als de onderliggende boomstructuur met daarin alle elementen waaruit een webapplicatie bestaat. React is zo snel omdat het naast een DOM ook een zogeheten ‘virtual DOM’ gebruikt.  

Dat werkt zo: de ‘virtual DOM’ kun je het beste zien als een lichtgewicht kopie van de echte DOM die opgeslagen staat in het (werk)geheugen van de gebruiker. Wanneer er een verandering plaatsvindt in de applicatie, de gebruiker klikt bijvoorbeeld op een button, moet normaal gesproken de gehele DOM opnieuw gerenderd worden: een rekenintensief proces. Wanneer er gebruik gemaakt wordt van een virtual DOM werkt dat efficiënter. “Bij een statusupdate wordt de virtual DOM (opgeslagen in het geheugen) vliegensvlug vergeleken met de echte DOM en worden alléén de delen gerenderd die noodzakelijk zijn voor de update. Doordat niet steeds de hele DOM gerenderd hoeft te worden, scheelt dit veel tijd,” legt Martijn uit. 

Hieronder wordt de functie van de ‘virtual DOM’ schematisch weergegeven. 

React - virtual DOM

Overweeg je om React te gebruiken voor het ontwikkelen van een applicatie? Onze specialisten helpen je graag, ook als je vragen hebt of twijfelt of het geschikt is voor jouw toekomstige project. Neem gerust contact met ons op of plan een vrijblijvend kennismakingsgesprek in