Jouw springplank naar modern Front-end development

Wanneer je van start gaat met Front-end ontwikkeling, dan kan je al snel ontmoedigd raken en het bos doorheen de bomen niet meer zien. De bedoeling van dit artikel is een leidraad te geven, die je kan helpen doorheen de jungle van dependencies, build systems, frameworks… te fietsen. Deze roadmap probeert een inzicht te geven in de verschillende facetten van moderne Front-end ontwikkeling, maar ambieert niet compleet te zijn. Er zijn nog heel wat meer mogelijkheden, die hier niet worden vermeld. Je hoeft ook niet alles te kennen.

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.

Een webpagina wordt van opmaak en layout voorzien door middel van stylesheets. Als Front-end ontwikkelaar spendeer je best wel wat tijd aan het layouten van pagina’s, componenten en typografie. Later in de roadmap wordt dit nog meer in detail bekeken.

Deze scriptingtaal is tot op heden nog steeds heer en meester in de browser. Wil je een goede Front-end-ontwikkelaar worden, dan doe je er dus goed aan om hier niet te licht over te gaan. Zonder JavaScript kan je anno 2020 heel weinig doen.

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.

Git is momenteel het meest gebruikte systeem. Er zijn verschillende hosting-services zoals GitHub, GitLab… die je het leven makkelijker kunnen maken. Als nieuwkomer in Front-end land doe je er goed aan om deze wat dichter te bekijken.

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.

CSS is een eenvoudige, declaratieve taal. CSS-preprocessors zijn systemen die je helpen bij het opbouwen van deze beschrijvingen, door je functionaliteit en automatisatie aan te reiken. Zowat elke moderne Front-end maakt gebruik van zo’n preprocessor.

CSS gebruikt een globale namespace voor zijn declaraties, dat wil zeggen dat alle stijldefinities die je maakt, over de volledige applicatie gelden. Dit kan al snel voor styling conflicten zorgen. CSS-preprocessors zoals Sass of Less bieden hier oplossingen voor, maar naarmate de complexiteit van je applicatie vergroot, wordt dit moeilijk te beheren.

In moderne JS-frameworks wordt styling vaak niet meer in CSS gedefinieerd, maar rechtstreeks in JavaScript. In zo’n geval zal JavaScript een unieke class-id genereren voor elke stijl-declaratie. Hierdoor heb je geen conflicten meer. Je stijl-declaratie staat ook netjes bij je JavaScript-component, en dat maakt het een stuk overzichtelijker en beter schaalbaar. Zo kan je nadenken over de styling van je component, zonder je zorgen te maken over styling op een andere plaats in je applicatie.

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 belangrijkste uitgangspunt in de keuze voor een framework is waarschijnlijk de specifieke vereisten die je applicatie heeft. Elk framework heeft zijn specialiteiten, zijn voor- en nadelen.

Hoe groot en actief is de community achter het framework? Bij het ontwikkelen van een applicatie zal je vroeg of laat wel eens tegen een probleem aanlopen. Indien het framework dat je gebruikt door een grote, actieve community wordt ondersteund, is de kans groot dat iemand anders datzelfde probleem ook al heeft ervaren. Je vindt zeker en vast veel antwoorden op je vragen.

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.