JavaScript Framework React, een korte introductie

Joost

Geschreven door Joost Saanen op 28-4-2016
3 minuten leestijd

Tegenwoordig bevat een website geavanceerde features die de meest complexe dingen mogelijk maken in je browser. Waar vroeger logica vooral in de backend te vinden was, zie je deze tegenwoordig steeds meer aan de voorkant van een website.

Vrijwel iedereen beschikt tegenwoordig over moderne browsers waarmee geavanceerde user interfaces gebruikt kunnen worden. Dit geldt zowel op de desktop als mobiele apparaten. Dit verklaart ook wel een deel de groei en populariteit van JavaScript frameworks. Backbone, Marionette en Angular zijn voorbeelden van populaire JavaScript frameworks.

Waarom zijn deze frameworks nodig?

Voor het ontwikkelen van geavanceerde webapplicaties met veel intelligentie aan de voorkant moet een developer aardig wat code schrijven. Deze code moet onderhoudbaar zijn en makkelijk aan te passen. Een goed JavaScript framework zorgt voor structuur in een applicatie wat uiteindelijk resulteert in snellere — en goedkopere — ontwikkeling van een webapplicatie. Ook het beheer van geavanceerde JavaScript applicaties wordt eenvoudiger met behulp van een framework.

Facebook

Het was Facebook die vond dat de huidige beschikbare JavaScript frameworks niet de juiste structuur, onderhoudbaarheid en performance opleverde die ze eigenlijk wilde. Om die reden is besloten een eigen JavaScript framework te ontwikkelen. Het framework is publiek beschikbaar gesteld (Open Source) en heeft de naam React gekregen. React is snel door andere grote bedrijven geadopteerd en hierdoor in korte tijd enorm in populariteit gestegen. Op de github pagina van Facebook is een lange lijst te vinden van websites, mobiele apps en webapplicaties die gebruik maken van React. Voorbeelden hiervan zijn Dropbox, WhatsApp en Salesforce. Maar ook het Nederlandse bedrijf Wehkamp gebruikt React voor de online webshop.

React

Wat maakt React zo goed?

React beperkt zich tot interactie en user interface. Dit is dan ook meteen een verschil met andere frameworks zoals bijvoorbeeld Ember en Angular. Met alleen React bouw je dus geen volledige webapplicatie. React doet waar het goed in is. Deze specifieke focus op interactie en user interface maakt mede React zo goed.

Componenten - JavaScript LEGO stenen

Wat React ook bijzonder krachtig maakt is dat User Interface elementen kunnen worden gebouwd in JavaScript-componenten. Je kunt deze componenten zien als herbruikbare LEGO stenen. Naast dat dit structuur aanbrengt, zorgt het ook voor de mogelijkheid van hergebruik. Zo kunnen componenten in andere delen van een applicatie (of in andere applicaties) worden gebruikt. Er zijn veel componenten en toolkits beschikbaar die al door andere developers zijn ontwikkeld. Deze kunnen gratis worden gebruikt — developers hoeven dus niet steeds het wiel opnieuw uit te vinden. Voorbeelden van dit soort componenten zijn spinners en formulieren.

Ook op de server

Met React is het mogelijk om JavaScript zowel op een client (browser of app) als op een server uit te kunnen voeren. Omdat JavaScript van oorsprong een taal is voor webbrowsers, is dit best bijzonder te noemen. Componenten die gebruikt worden op pagina’s kunnen zo dus al op de server worden gebouwd vóórdat deze wordt getoond aan de gebruiker. Dit zorgt voor een verbeterde gebruikerservaring (snellere laadtijd).

Wilt u als organisatie ook de stap maken naar responsieve uitnodigende web- of mobiele applicaties met een rijke user interface? Neem dan eens contact op met Kabisa of laat een berichtje achter in de comments.

Joost

Joost Saanen

Gepassioneerde all-rounder met brede interesses; van serverbeheer en cloudhosting tot (UI)design en (web)development. Hardloopt en schrijft het liefst tegelijk.