Front end

Frameworks

Om een user interface gebruiksvriendelijk te maken wil je dat de pagina zo weinig mogelijk herlaadt. Hiervoor moeten er op de achtergrond gegevens worden verstuurd en opgehaald doormiddel van JavaScript. Als het een aantal van dit soort interacties in de applicatie zijn dan kan dit door eigen code opgelost worden, maar als dit er meer worden dan komt het gebruik van een JavaScript framework goed van pas. JavaScript frameworks zijn gemaakt om structuur aan te brengen en het bouwen in componenten gemakkelijker te maken. Ook wordt de pagina nooit herladen, waardoor de gebruiksvriendelijkheid van de website verbeterd wordt.

Omdat ik veel interacties in mijn app heb waarbij data verstuurd en ontvangen moet worden, gebruik ik een framework. Tegenwoordig worden er veel verschillende frameworks gemaakt, allemaal met hun eigen krachten. Uit een enquete onder front-end developers bleek dat de deelnemers het meest React gebruiken, gevolgd door Vue en daarna Angular (A. Nolan, ashleynolan.co.uk, 09-05-2018).

React, Vue, Angular zijn allemaal frameworks om 'single-page-applications' te maken. Dit zijn applicaties waarbij de pagina niet herlaadt en de data op de achtergrond wordt opgehaald. Dit is ideaal voor applicaties met veel data die verstuurd en opgehaald moet worden. Er zijn wel degelijk verschillen tussen deze frameworks, maar in essentie doen ze allemaal hetzelfde.

Angular is geschreven in TypeScript, een laag over JavaScript heen die een aantal onderdelen toevoegt, waardoor er een beter structuur in de code ontstaat. Ik prefereer echter om mijn code in gewone JavaScript te schrijven. Dit kan in Angular, maar het framework is geoptimaliseerd voor TypeScript. Angular valt dus af.

React is het framework met de meeste downloads in het afgelopen jaar (Hannah, 2018). Echter is Vue flink aan het groeien.

(Downloads van ieder framework (Hannah, 2018))

Welk framework?

Hieronder een vergelijking van de verschillende frameworks doormiddel van de eisen die ik tijdens dit project aan een framework stel:

✅= voldoet aan eis

⚠️= voldoet deels aan eis

❌= voldoet niet aan eis

Omdat TypeScript weer een hele nieuwe vorm van JavaScript schrijven is en ik geen tijd heb om deze (met het Angular framework erbij) te gaan leren, valt Angular af.

React heeft naar mijn mening een grotere leercurve dan Vue. Echter heb ik voordat dit project begon al eens met React gewerkt, dus het leren van het framework is geen probleem tijdens het bouwen van de applicatie van deze opdracht.

Ik heb tijdens mijn tijd als front-end developer zowel met React als met Vue gewerkt. Van deze twee beviel React mij het meest, vooral vanwege de opbouw van componenten en de integratie met Apollo. Omdat ik het fijnst met React werk heb ik gekozen om dit framework te gebruiken, aangezien ik zo het snelst het product kan bouwen. Ook heeft React een grote community en veel 'npm packages' die gebruikt kunnen worden. 'Npm packages' zijn stukken herbruikbare code die in een project gebruikt kunnen worden door ze te downloaden vanuit je project. Dit versneld het ontwikkelproces doordat je code gebruikt die je anders zelf had moeten schrijven.

Richtlijnen

Om ervoor te zorgen dat de code consistent is en ook overgenomen kan worden door andere developers, worden er in het project richtlijnen met betrekking tot de code aangehouden. Veelgebruikte richtlijnen zijn die van Airbnb, een bedrijf dat huur van privé-accommodaties faciliteert, maar daarnaast ook veel deelt over development van web- en native applicaties. In hun artikel "Airbnb React/JSX Style Guide" worden regels beschreven die ze vervolgens toepassen in hun projecten. Om een zo consistent mogelijke applicatie te schrijven heb ik deze regels aangehouden tijdens het ontwikkelen van de applicatie voor dit project.