You are here

React: Dynamische webapplicaties in een handomdraai

React Tool
Corporate

Wat is React?

Eén van de vele frameworks die we bij Calibrate aanbieden is React. Dit JavaScript-framework is de laatste tijd enorm in populariteit gestegen, en ook wij gebruiken het maar al te graag om dynamische webapplicaties te maken. Dit framework laat ons toe om single page-applicaties te creëren, die dus niet afhankelijk zijn van het telkens opnieuw laden van een volledige browserpagina. Hierdoor bouwen we snelle en intuïtieve applicaties, met een vloeiende interface.

 

React biedt een duidelijke structuur, en maakt daarmee code herbruikbaar. Een op React gebaseerde webapplicatie is opgebouwd uit verschillende componenten. Die componenten bestaan uit een mix van onder meer HTML- en JavaScript-codes. Het is gemakkelijk om een React-component als losse JavaScript-library aan te bieden. Zo worden al veel componenten open source aangeboden. React beperkt zich ook enkel en alleen tot weergave en interactie. Veel frameworks doen meer dan dat, wat ze ook veel moeilijker maakt om ze te begrijpen. Dat React zich beperkt tot die twee zaken, zorgt ervoor dat het heel makkelijk te gebruiken is in een reeds bestaande applicatie.

React Tool

Daarnaast maakt React ook gebruik van Virtual-DOM. Dat zorgt ervoor dat de wijzigingen aan de pagina tot een minimum beperkt blijven, wat op zijn beurt dan weer een goede browserperformance tot gevolg heeft. Dit in tegenstelling tot andere frameworks, waarbij aanpassingen op de pagina ervoor kunnen zorgen dat er een aanzienlijke vertraging optreedt. Vooral bij complexe webapplicaties is het verschil gigantisch.

Het is ook mogelijk om een JavaScript-code op de server uit te voeren. Daarmee is React het eerste JavaScript-framework dat het mogelijk maakt om dezelfde code zowel op de server als in de browser te gebruiken. Hierdoor komt de pagina veel sneller tevoorschijn op het scherm van bezoekers. Snelheid gekoppeld aan efficiëntie zonder al te veel overbodige poespas, dat kunnen we alleen maar toejuichen. Daarom gebruikten we React ook als basis in twee van onze cases: Typ-Top en P-Bay.

React als front-end voor Typ-Top

1. Typ-Top

Dat React een snel en efficiënt hulpmiddeltje is om webapplicaties mee op te bouwen, kunnen ze bij de Antwerpse uitgeverij De Boeck alleen maar bevestigen. Wij hielpen hen om Typ-Top, hun eigen dactyloprogramma, verder vorm te geven, zodat we ook een kleine rol konden spelen in het opleiden van toekomstige toetsenbordvirtuozen. De interactieve tool Typ-Top Online werd door ons dan ook zo gestroomlijnd en efficiënt mogelijk gemaakt.

Met meer dan 40.000 gebruikers in totaal, met een daggemiddelde van 2.000 gebruikers en pieken tot zo'n 250 gebruikers tegelijkertijd, is Typ-Top een sterk groeiend platform. Verwacht wordt dat die trend zich zal doorzetten, want dit jaar zullen er nòg meer studenten kennismaken met dit dactyloprogramma.

Tijdens het maken van de oefeningen krijgen de leerlingen een overzicht van hun huidig typtempo en het aantal fouten dat ze maakten. Leerkrachten kunnen de moeilijkheidsgraad per klasgroep of individuele student meteen ook aanpassen, om zo in te spelen op het niveau van de groep, maar ook om iedereen te blijven uitdagen. In een overzichtelijk logboek kunnen zowel leerlingen als leerkrachten gemaakte oefeningen bekijken en filteren naar keuze. Leerkrachten kunnen oefeningen automatisch laten quoteren, terwijl de studenten zelf er ook hun feedback kunnen achterlaten.

Alle gemaakte oefeningen, quotaties en oefeningcontroles worden bewaard via een performante MongoDB en disk storage. We optimaliseerden de database en tuneden hem om de pieken tijdens schoolsessies makkelijk aan te kunnen en meteen ook de werkdruk van duizenden ijverige studenten tegelijk te kunnen bijhouden. Met de krachtige Laravel-backend is onze oplossing toekomstbestendig: de capaciteit kan, na verloop van tijd en indien nodig, stevig opgeschroefd worden. De front-end en alle interacties stroomlijnden we met het ReactJS-framework, in combinatie met Redux voor het opvangen en interpreteren van toetsaanslagen. 

2. P-Bay

Eén van de belangrijkste websites voor liefhebbers van de duivensport, is die van P-Bay. Via dit online platform kunnen duiven immers op een makkelijke manier verhandeld worden tussen verschillende aan- en verkopers.

De groep achter P-Bay heeft als doel om de verkoop en veilingen, zowel kleine als grote, van duiven te beheren en regelen. De nadruk ligt daarbij steeds op kwaliteit, en niet op kwantiteit. Daarnaast brengen ze op hun website ook steeds de laatste nieuwtjes uit de Belgische en Europese duivenwereld, zodat alle liefhebbers continu op de hoogte blijven van het reilen en zeilen in hun favoriete sport.

React als front-end voor P-Bay

De oude website van P-Bay was al opgebouwd in Drupal, maar door het groeiende succes ervan kwamen er inmiddels enkele problemen de kop opsteken. Tijdens piekmomenten dook de snelheid van de website de dieperik in, en ook de Chinese gebruikers van de site moesten geregeld erg lang wachten eer hun pagina geladen werd. Ook het aandeel van gebruikers die de website bezochten via mobile lag nog een stuk lager toen de eerdere versie opgebouwd werd, en was dringend aan een grondige update toe.

Om zowel de algemene snelheid op de website als het verloop van de veilingen vlotjes te laten draaien, hebben we gekozen voor een custom platform op basis van Laravel. We gebruikten Laravel als CMS en job-handler om het aanbod aan duiven en veilingen, de gebruikers, nieuwsitems en pagina’s makkelijk te kunnen beheren. De front-end bouwden we dan weer op uit React. Het resultaat? Een snelle meertalige website (Nederlands, Engels, Chinees), die dankzij het gebruik van websockets ook in real time alle informatie en updates over de veilingen kan meegeven zonder dat de bezoekers hun pagina moeten refreshen. Ook de hosting namen we op ons, al valt daar nog even af te wachten of ook de Chinese gebruikers even vlotjes doorheen de website kunnen vliegen.

Snelheid en efficiëntie

Zowel bij Typ-Top als bij P-Bay konden we beroep doen op de twee voornaamste voordelen die React te bieden heeft: snelheid en efficiëntie. In beide gevallen konden we op die manier de front-end, en bijgevolg alle interacties van bezoekers op de websites van Typ-Top en P-Bay, op een bijzonder dynamische en vlotte manier laten verlopen. Dankzij de herbruikbare code weet React immers te vermijden dat een website aan snelheid moet inboeten, met als gevolg dat ook de browserperformance telkens op hoog niveau blijft. Erg handig, want niemand wacht graag lang tot zijn pagina volledig geladen is.

Ook zin in een snelle website?

Benieuwd naar wat een JavaScript-framework als React kan betekenen voor jouw website? Neem dan bliksemsnel contact met ons op, en wie weet heb jij binnen de kortste keren ook een website die sneller laadt dan het licht!