React voor snelle en degelijke JavaScript applicaties

Waar zijn we tegenwoordig zonder JavaScript? Zonder deze programmeertaal kun je met een browser alleen van pagina naar pagina navigeren. Mét JavaScript daarentegen kan een enkele webpagina een complete webapplicatie bevatten (kijk bijvoorbeeld naar Gmail). JavaScript is de enige programmeertaal die wordt begrepen door je browser, en speelt daarom een cruciale rol in het tot leven brengen van het web. Hierdoor is JavaScript sterk in opkomst: er wordt in vergelijking tot andere talen steeds meer JavaScript geschreven.

Aangezien JavaScript meestal sterk gekoppeld is met zowel de server-zijde als de HTML/CSS voorkant van een website, is het erg moeilijk om een stukje JavaScript code te vervangen. Verschillen tussen browsers, beperkte instrumentatie en beperkingen van de taal zelf maken het de programmeur er niet makkelijker op. Om deze redenen kunnen de onderhoudskosten van JavaScript-code snel oplopen.

 

JavaScript frameworks zoals Backbone.js, AngularJS en Ember.js

Om het de programmeur makkelijker te maken en de kosten voor het ontwikkelen van websites en applicaties te verlagen, zijn er zogenaamde JavaScript frameworks ontwikkeld. Allemaal bieden ze een gestandaardiseerde structuur en werkwijze aan die het werken met, en onderhouden van JavaScript code aanzienlijk versimpelt.

Met de komst van deze frameworks werden de webapplicaties alleen maar complexer, dat in veel gevallen ook performance problemen opleverde. In vergelijking tot een desktopapplicatie heeft een webapplicatie minder resources (processor- & geheugengebruik) tot haar beschikking. Door de nog verder beperkte resources van mobiele internetapparaten komen daar de performance problemen het sterkst tot uiting.

 

React: de ultieme oplossing door en voor Facebook

De webapplicatie van Facebook is voor de meeste mensen geen onbekende, en zoals we allemaal weten ook bijzonder complex. Het is dan ook geen verrassing dat juist Facebook op zoek was naar een manier om haar JavaScript code zo te schrijven dat deze zowel goed performt, als goed onderhoudbaar is.

Daarom ontwikkelde Facebook React, dat ze in 2013 onder een open source licentie uitbrachten. Bekende namen zoals Netflix, Yahoo, Airbnb en Khan Academy, maar natuurlijk ook de developers van Facebook zelf, zagen vrijwel direct de voordelen van deze nieuwe techniek waardoor React snel steeg in populariteit.

 

Wat maakt React zo interessant?

Waarom is React zo populair? Wat doet het beter of anders dan bestaande JavaScript frameworks? Door middel van onderstaande vier punten probeer ik deze vragen te beantwoorden.

 

1. React biedt een duidelijke structuur, en maakt daarmee code herbruikbaar.

Een op React gebaseerde webapplicatie is opgebouwd uit zogenaamde componenten. Componenten bestaan uit een mix van onder andere HTML en JavaScript code, maar ook eventueel weer andere Componenten.

Het is gemakkelijk om een Reactcomponent als losse JavaScript library aan te bieden. Er worden al enorm veel componenten vrij aangeboden: wat je op deze manier kunt (her-)gebruiken hoef je niet zelf te schrijven!

 

2. React probeert niet te veel te doen.

React beperkt zich enkel tot weergave en interactie. Veel frameworks doen veel meer dan dit, wat ze aanzienlijk moeilijker maakt. Dat React zich beperkt tot weergave en interactie zorgt er ook voor dat het gemakkelijk te gebruiken is in een bestaande applicatie, of zelfs in samenwerking met een ander framework!

 

3. React lost een aantal belangrijke browser performance problemen op.

JavaScript zelf is niet zo traag, maar als er met JavaScript aanpassingen gemaakt worden in de pagina die de browser toont dan treedt wel aanzienlijke vertraging op. De browser moet na wijziging aan de pagina deze opnieuw opbouwen (renderen), en dat vertraagt enorm.

React gebruikt een slimme truc, die Virtual-DOM heet, om de wijzigingen aan de pagina tot een minimum te beperken. Vooral bij complexe webapplicaties is het verschil erg goed merkbaar.

 

4. React werkt óók op de server

Van oorsprong is JavaScript een browsertaal. Maar gelukkig is het tegenwoordig ook mogelijk om JavaScript code op de server uit te voeren. React is het eerste JavaScript framework dat het mogelijk maakt om dezelfde code zowel op de server als in de browser te gebruiken.

Het voornaamste voordeel hiervan is dat een pagina vooraf helemaal gerenderd kan worden op de server. Hierdoor wordt deze pagina veel sneller op het scherm van de bezoeker getoond dan een pagina die in de browser moet worden opgebouwd. Een bijkomend voordeel is dat de pagina op de server gecached kan worden, waardoor deze nog sneller uitgeserveerd kan worden.

 

Hoppinger ♥ React!

Bij Hoppinger werken we meer en meer met React. Het heeft een belangrijke plaats in genomen in de gereedschapskist van onze programmeurs. Het helpt ons overzicht te houden en staat ons toe bestaande componenten te hergebruiken. Maar het belangrijkste voordeel van React is de performance van de JavaScript code die we er mee schrijven, een voordeel waar mobiele gebruikers (dat toch het snelst groeiende gebruikerssegment is) het meest van zullen merken.