Belachelijk snelle webapplicaties met ReactJS

Martijn van de Polder

11 mei 2017

Websites en webapplicaties zijn pas nuttig als ze ook echt iets voor je doen. Daarvoor schrijven we bij Enrise met name back-end code die diverse ingewikkelde processen combineert en automatiseert. Maar back-end code draait alleen aan de serverzijde, terwijl de gebruiker aan de browserzijde snel resultaat wil. De introductie van NodeJS heeft hier verandering in gebracht. Zowel op front-end als back-end is Javascript nu in te zetten om de brug tussen browser en server te slaan, maar bouwen èn onderhouden van twee verschillende ecosystemen is lastig. Tot Facebook met de Javascript bibliotheek React kwam.

Logica in de browser

In de afgelopen jaren is Javascript een belangrijker onderdeel geworden van websites en applicaties. De ondersteuning voor Javascript door browsers heeft het voor ontwikkelaars steeds makkelijker gemaakt om applicaties te schrijven die minder afhankelijk zijn van de serverzijde.

Doordat je processen in de browser kunt uitvoeren, is je applicatie sneller en prettiger in het gebruik. Maar door de toegenomen complexiteit van applicaties is ontwikkelen in Javascript ook complexer geworden en lastiger te beheren. Frameworks zoals AngularJS of NodeJS brengen met gestandaardiseerde structuren orde in de chaos en maken het werken met Javascript een stuk prettiger.

Complexiteit versimpeld met hulp van Facebook

Orde brengt ook met zich mee dat je applicaties nog meer kunt laten doen met Javascript: het is namelijk door de heldere structuren goed te onderhouden, dus wat extra code toevoegen kost geen moeite. Maar de performance lijdt eronder, want veel scripts laden kost ook meer tijd. Dat merk je vooral op apparaten met beperkte kracht, zoals eenvoudige smartphones.

Facebook loopt hier vanwege zijn omvang snel tegenaan en bedacht een manier om de framework-voordelen te combineren met een goede gebruikerservaring. Dat werd React, een Javascriptlibrary speciaal voor het ontwikkelen van front-end-applicaties; sites en apps die in je browser fijn en snel zijn in het gebruik.

React is als framework beschikbaar gesteld aan de open source gemeenschap, met het gevolg dat steeds meer ontwikkelaars enthousiast aan de slag gaan met deze bibliotheek en de populariteit ervan enorm toeneemt.

De kracht van ReactJS

Als je voor je webapplicatie aan de slag wilt met React, dan is dat hoogswaarschijnlijk doordat:

  • React ieder component ook design-wise z’n eigen verantwoordelijkheid geeft. Daardoor beïnvloeden de componenten elkaar niet, wat ervoor zorgt dat je het werk beter kunt verspreiden over je collega’s. Zo kun je de realisatie van een component in een geïsoleerde omgeving ontwikkelen.
  • Binnen React kun je werken met bestaande en nieuwe Javascript-componenten. Dankzij de componenten kun je ze ook weer elders in de applicatie gebruiken of zelfs uitwisselen met anderen, waardoor je niet alles zelf hoeft te bouwen.
  • Je een betere gebruikerservaring wilt bieden door niet meer volledige pagina’s te verversen.
  • React kan behalve in de browser (front-end) ook aan de serverzijde (back-end) worden toegepast. We noemen dat isomorphic webapplications. Daardoor kan rendering van de weergave op serverniveau al worden voorbereid, wat resulteert in supersnelle laadtijden.

Het lijkt alsof React hiermee het zaligmakende antwoord is op alles. Dat is natuurlijk niet zo. Maar wat React heel goed doet ten opzichte van andere frameworks, is de focus op de eindgebruiker en de interactie met je applicatie. Het is er dus niet alleen voor de Javascript developer, maar vooral voor de gebruiker van je applicatie.

React in de praktijk toegepast

Bij Enrise hebben we React omarmd en al meerdere keren toegepast. We vragen er zelfs specifiek om in onze webdeveloper-vacatures. Het blijkt een uitstekende keuze voor webapplicaties waarbij zowel performance, beheersbaarheid en ontwikkelsnelheid essentieel zijn. We pasten React al toe in onder andere de Superguide van Veronica. Het combineert de ontwikkeling van front-end en back-end, wat resulteerde in een korte ontwikkeltijd voor ons en de klant. Voor de eindgebruiker is het een supersnelle site om 40.000 films en series te raadplegen.

Razendsnelle Superguide van Veronica

React draagt er ook aan bij dat onze front-endontwikkelaars en back-endontwikkelaars een beetje naar elkaar toegroeien. Dat zeg ik voorzichtig, omdat het niet zo is dat React er voor zorgt dat er geen onderscheid meer is in die twee. Ieder zijn vak. Een API bouwen blijft nu eenmaal wat anders dan het stylen van een gebruikersflow. Wat ik bedoel is dat de interesse voor React als framework van twee kanten lijkt te komen; zowel front-enders als back-enders zien mogelijkheden voor toepassingen en willen ermee werken.

Structuur en performance

Moet je nu elke site of applicatie bouwen met React? Nee natuurlijk niet. Dat hangt altijd van veel factoren af, maar als de eindgebruikers van je complexe applicatie baat hebben bij supersnelle laadtijden, dan is het zeker een optie die je in overweging moet nemen.

Het geeft ons vooral de structuur en de efficiëntie die we nodig hebben om applicaties te kunnen onderhouden, uit te breiden en om met meerdere mensen aan te werken. De flexibiliteit door herbruikbare componenten en de mogelijkheid om het ook aan de serverzijde te gebruiken, maken React voor ons tot een erg prettig framework om mee te werken naast onze veelal PHP-gebaseerde sites en applicaties.