Mobiele app laten ontwikkelen?

4 Frameworks die Freed gebruikt – deel 2: React

We ontwikkelen bij Freed Mobile+Interactive, naast native mobiele apps, ook strakke webapplicaties. In deel 2 van deze 4-delige blogserie willen we iets meer vertellen over een techniek die veelal voor grote webapplicaties wordt ingezet : React

Wat is React?

React (ook wel React.js of ReactJS genoemd) is een JavaScript framework  welke in 2011 door Facebook is ontwikkeld en sinds 2013 als Open Source project beschikbaar is. Het doel van React is om code van (met name grotere) webapplicaties beter beheerbaar te maken. Met React kun je eenvoudig herbruikbare componenten definiëren voor de User Interface (UI). Denk hierbij aan eigen tabbars, menu’s, lijsten, overzichten en popup-vensters. Binnen React kun je hiervoor je eigen HTML-tags definiëren zoals bijvoorbeeld <Dialog>, <Tabbar> of <Popup> element. Deze tags zijn normaal gesproken niet aanwezig in de standaard HTML conventie.

Wat zijn de voordelen van React?

We werken graag met React en wel om de volgende redenen:

1. Structuur en componenten
Een webapplicatie die op React is gebaseerd, is grotendeels opgebouwd uit zogenaamde componenten. Deze componenten (te vergelijken met het bij Freed zo geliefde LEGO) bevatten combinaties van onder andere HTML en JavaScript code, maar kunnen eventueel ook weer andere componenten bevatten. Er bestaat inmiddels een groot aanbod aan open source componenten die ingezet kunnen worden. Dit bespaart enorm veel tijd en kosten! 

2. Virtual DOM
React maakt gebruik van een zogenaamde ‘Virtual DOM’. Het Document Object Model (afgekort DOM) is de objectgeoriënteerde vertaling van gestructureerde documenten zoals bijvoorbeeld HTML. Een Virtual Dom maakt het mogelijk om ieder afzonderlijk element van een pagina te beheren en bij te werken. Het framework controleert of de ingelezen data vanuit een database of API is gewijzigd en past vervolgens de pagina (DOM) aan. Door de oude DOM te vergelijken met de nieuwe Virtual DOM, re-rendert React alleen de gewijzigde elementen en dit scheelt uiteraard heel veel laadtijd en rekenkracht.

3. Snelheid en gebruikerservaring
meep meep! – Met React kan een betere gebruikerservaring worden geboden door niet meer de volledige pagina’s te verversen maar alleen de onderdelen die daadwerkelijk veranderd zijn. Met React is het tevens mogelijk om naast het renderen van pagina’s in de browser (front-end) deze rendering aan de serverzijde (back-end) toe te passen. Hierdoor kan rendering van een webpagina op een krachtigere server plaatsvinden. Dit resulteert in supersnelle laadtijden en dus een zeer prettige gebruikerservaring.

Wat is een nadeel van React?

ReactJS maakt gebruikt van JSX. JSX maakt het mogelijk om HTML te “mengen” met JavaScript code. Uiteraard kan dit als groot voordeel worden beschouwd maar bij grotere projecten is het erg belangrijk om goede afspraken te maken over de indeling en structuur van deze werkwijze omdat voordeel (vrijheid) anders snel kan omslaan in een gevaarlijk nadeel (onoverzichtelijke code). Developers en designers kunnen daarnaast soms nog wel eens klagen over de complexe en steile leercurve van JSX.

Bij welk project heeft Freed React ingezet?

We werken momenteel aan groot traject waar een groot projectteam werkt met React. Deze webapplicatie zal het kloppende ERP-hart gaan worden van een grote onderneming en haar eindklanten. We zouden dolgraag meer willen vertellen maar moeten dit nog even voor ons houden. Binnenkort meer hierover!

Wil je onder het genot van een kop koffie of thee eens van gedachten wisselen waarom de combinatie Freed + React ook voor jouw web applicatie een goede keuze zou kunnen zijn? Laten we dan snel eens afspreken.