Jouw springplank naar modern Front-end development

Je kan geen Front-end wizard worden als je niet eerst de basisconcepten beet hebt. Je werkveld is het internet, het is dus interessant om een notie te hebben van hoe het internet werkt, wat browsers doen, ... Je eerste stap op Front-end vlak, zal het bestuderen zijn van HTML, CSS en JavaScript. Al het werk van een Front-end ontwikkelaar is gebaseerd op deze 3 peilers. Deze technieken zijn al jaren de basis van elke website.

Version Control Systems laten je toe de veranderingen van je code bij te houden. Met dergelijke systemen kan je op elk moment teruggaan in de tijd naar een eerdere versie van je code. Ze maken het samenwerken met meerdere collega’s op dezelfde codebase ook een stuk makkelijker. 

Als Front-end ontwikkelaar ben je medeverantwoordelijk voor de veiligheid van de software die je bouwt. Het beveiligen van de webapplicaties gebeurt voornamelijk aan de Back-end kant, maar als Front-end ontwikkelaar ga je niet vrijuit. Het is dus goed een zekere basiskennis hieromtrent te verwerven.

Om het wiel niet steeds opnieuw te moeten uitvinden, maken we bij het ontwikkelen van moderne applicaties gebruik van reeds bestaande libraries of packages. Dit zijn stukjes software die je kan inpluggen in je code, om van de aangeboden functionaliteit te kunnen gebruik maken. Op het internet zijn een massa aan packages te vinden. Moderne applicaties zijn vaak gebaseerd op een ingenieuze puzzel van packages, die samenwerken om een goede structuur als basis van de applicatie te garanderen.

De grote hoeveelheid en diversiteit van deze packages kan snel onoverzichtelijk worden. Elke package heeft zijn eigen versiebeheer, versies van packages zijn soms niet combineerbaar en veel packages zijn afhankelijk van nog andere packages om goed te kunnen werken.

Om dit kluwen van ‘dependencies’ goed onder controle te kunnen houden zijn er package managers zoals Yarn en NPM. Dit zijn systemen die het beheer van deze stukjes software automatiseren. Moderne Front-end ontwikkeling zonder deze systemen zou haast onmogelijk zijn.

Zoals eerder al vermeld, wordt de layout van je pagina’s, componenten, typografie… bepaald door Cascading Style Sheets. In grote applicaties is het aangewezen deze beschrijving van de layout goed te structureren. Dit kan namelijk heel snel uit de hand lopen.

Op het internet zijn heel wat goede bronnen en methodologieën te vinden om dit te doen. Je doet er goed aan deze te bekijken.

Onder build tools verstaan we een verzameling van systemen die het ontwikkelen van applicaties vereenvoudigen. Dit doen ze door aspecten van de ontwikkeling te automatiseren. Er zijn ook tools die je helpen om foutloze en goed gestructureerde code te schrijven.

Een eenvoudige webpagina hoeft niet in een framework gemaakt te zijn. Als je echter ingewikkelde webapplicaties bouwt, dan doe je er goed aan om een degelijk framework te kiezen als basis voor je ontwikkeling. Er zijn zowel voor JavaScript als CSS verschillende frameworks beschikbaar, elk met hun voor- en nadelen.

Hoe maak je hierin een keuze?

Het spreekt voor zich dat je wil vermijden dat je software vastloopt of foutief reageert. Naarmate je applicatie groter wordt, zal het steeds moeilijker worden om alles te blijven testen. Het toevoegen van een nieuwe functionaliteit kan soms eerder geverifieerde code stuk maken. Het is belangrijk dit snel en efficiënt te kunnen detecteren. Hiervoor bestaan systemen die je code automatisch kunnen testen tegen vooropgestelde scenarios.

Naast automatisch testen, kan het gebruik van type checkers je ook verhinderen van foutieve code te schrijven. Het gebruik ervan is aan te raden.

Moderne webapplicaties worden bekeken op een brede waaier aan toestellen en schermen. Met progressive web apps kan je ervoor zorgen dat je software, die voor het web werd geschreven, zich kan gedragen als een native applicatie van het toestel waarop het wordt bekeken. Hiervoor zijn verschillende tools beschikbaar.

Soms is het wenselijk dat je applicatie op de server wordt gerenderd. Om dat te bekomen zijn per framework verschillende technologieën beschikbaar.

Je Front-end applicatie zal in de meeste gevallen communiceren met een Back-end systeem. Er zijn verschillende manieren om deze communicatie op te zetten. GraphQL is een framework, door Facebook ontwikkeld om met de server te communiceren. Het ambieert alle voordelen van een RESTful webservice te bieden, maar zonder zijn zwaktes. In realiteit hebben beide systemen voor- en nadelen. Het komt erop aan de juiste keuze te maken, de technologie die bij de noden van het project past.

Heb je bovenstaande technologieën reeds vlot in de vingers? Top! Je bent helemaal klaar om als Front-end ontwikkelaar aan de slag te gaan. Naast bovenstaande zijn er nog tal van verdere specialisaties die het bekijken waard zijn.

JavaScript is nog steeds heer en meester in browser land en dat zal ook nog een tijdje zo blijven. Eind 2019 werd Web Assembly geaccepteerd als officiële standaard door de W3C. Het is een taal die naast JavaScript leeft en als voordeel heeft dat het bepaalde taken een pak sneller kan uitvoeren. Het zal wel nog een tijdje duren vooraleer de technologie mainstream wordt.

Blijven leren is de boodschap, want in Front-end land ben je nooit volleerd. De technologie die we als Front-end ontwikkelaars op dagelijkse basis gebruiken, evolueert heel snel. Wat je vandaag geleerd hebt, is morgen alweer old-school. Het is dan ook niet nodig om al deze zaken te kunnen om als Front-end ontwikkelaar aan de slag te gaan. "On-the-job" kan je nog heel veel dingen bij leren.

Een website die gemaakt is op stabiele, beproefde technologie is daarom zeker niet slecht. Gebruik de technologie-stack die past bij het probleem dat je wil oplossen. Met de basis onderdelen van JS en CSS kan je nog steeds gave dingen maken, over-engineer niet.

Dit artikel is geschreven op basis van een gastles voor de Arteveldehogeschool, voor de grafieken werd roadmap.sh gebruikt als inspiratiebron.