Terug

Full day conference of all things REACT

Zaterdag 16 april was er een conferentie in Amsterdam over React. De conferentie stond volledig in het teken van React en aanverwante technologieën  Hoewel er online genoeg te vinden is over React, is een dergelijke conferentie ook een moment van inspiratie en everyday best practices vanuit de industrie die er dagelijks mee werkt. Zo waren er op React Amsterdam afgevaardigden aanwezig van onder andere Facebook (Londen), PayPal, Meteor en vele anderen. Lukkien werd vertegenwoordigd door Maurice Bartnig (front-end developer), Martin Krieken (java developer) en mijzelf. 

React in het kort

React is een open-source Javascript library van Facebook om de User Interface (UI) mee op te bouwen. Bij een platform als Facebook is performance en een onderhoudbare webapplicatie de voornaamste reden geweest om React te ontwikkelen en uiteindelijk in 2013 te open-sourcen. De mate van onderhoudbaarheid zorgt dan ook voor een overzichtelijke en future-proof codebase. Iets waar je als developer samen met je klant op kan (voort)bouwen. Er zijn een legio aan oplossingen om grotere (web)applicaties te structuren door bijvoorbeeld Angular, Meteor of Ember in te zetten. Bij Lukkien hebben we een aantal jaren terug voor BackboneJS in combinatie met Marionette gekozen. 


De voordelen 

De afgelopen jaren stonden voornamelijk in het teken van het scheiden van je HTML, styling en scripting. Dit principe is niet langer van toepassing in React omdat HTML onderdeel wordt van je scripting. Styling kan hierin nog deels los van scripting worden opgelost, maar door het stylen van je UI in je scripting resulteert dit in een Component Driven toepassing. Daar waar het de afgelopen jaren voornamelijk resulteerde in een Page / Template Driven toepassing. Door meer Component Driven te denken kun je uiteindelijk toe werken naar herbruikbare componenten in je project of zelfs over je projecten heen.


Daarnaast biedt React performance voordelen. De HTML die door de browser wordt geserveerd kennen we als de DOM presentatie. Door in de oude situatie de HTML van je scripting te scheiden, diende je bij wijzigingen op zoek te gaan naar het onderdeel van je HTML zoals deze in de browser wordt weergegeven. Door React in te zetten wordt de HTML een onderdeel van je scripting. Wanneer de context van een component wijzigt - bijvoorbeeld: de bezoeker voegt een product toe aan zijn winkelmand - dan kan de visuele weergaven van de winkelmand direct zijn UI wijzigen zonder je hele document (webpagina) door te hoeven zoeken. 


Het voordeel? De snelheid! Netflix lichtte in 2015 tijdens de React.js Conf al toe waarom performance de overweging was om React te adopterenHet voordeel? De snelheid! Netflix lichtte in 2015 tijdens de React.js Conf al toe waarom performance de overweging was om React te adopteren. Check hieronder de video. Zie ook de andere pagina van Netflix.


Door Javascript verantwoordelijk te maken voor hetgeen wat er in de UI gebeurt en de performance winst die daarmee gepaard gaat, maakt React het voor Netflix ook pragmatischer om cross-device een consistent product te leveren: van Smart TV’s tot PlayStations, etc. 


Online customer journeys

In februari heeft het team achter React een versieplan aangekondigd: een concreet signaal van stabiliteit. In het verleden was het namelijk behoorlijk tijdsintensief om een React upgrade door te voeren. Recentelijk hebben we een groots klantproject in React gerealiseerd. Momenteel gaan we voor een intern project met React aan de slag om nog meer ervaring op te doen en om React op de afdeling Digital concreter uit te rollen. React gaat de komende periode in ieder geval een mooie plek krijgen binnen het digitale ecosysteem van Lukkien zodat we ook qua techniek een steentje bijdragen aan de online customer journeys van klanten.