Alles wat je ziet op een beeldscherm of mobiel is een GUI (Graphische Gebruiker Interface). Een beeldscherm bestaat uit pixels. Elke pixel heeft een andere kleur. De meeste moderne beeldschermen hebben ongeveer 16.7 miljoen verschillende kleuren. Elke pixel heeft momenteel de juiste kleur zodat jij een blog leest op je beeldscherm.
Om deze pixels de juiste kleuren te laten weergeven wordt er gebruik gemaakt van software. Wij gaan nu in op het web gedeelte wat gebruik maakt van HTML. In 1989 kwam Tim Berners-Lee met het eerste idee en in 1991 werd de taal verder ontwikkeld samen met de allereerste web browser. HTML heeft van zichzelf niet veel styling en wordt daarom opgemaakt met CSS. Het schrijven van HTML en CSS is daarom frontend ontwikkeling.
Hoe bouw je een interactieve frontend
De meeste websites zijn statisch omdat deze bedoelt zijn om informatie over te dragen, zoals de allereerste website: https://info.cern.ch. Alleen een website met alleen HTML heeft geen styling en ziet er saai uit. Daarom is CSS ontwikkeld dat de HTML styling kan geven. Elke website met styling gebruik HTML en CSS om er uit te zien zoals de ontwikkelaar wilt.
Interactie met HTML
Een statische website kan geen contact formulieren verwerken of sommige animaties uitvoeren. Daarom bestaat er ook nog JavaScript (PHP bestaat ook nog maar daar gaan wij in deze blog niet verder op in). JavaScript is een scripttaal die web pagina’s interactief maakt.
Hoewel JavaScript qua naam op Java lijkt, zijn dit 2 hele verschillende talen. De naam JavaScript komt wel van Java vandaan omdat de browser vroeger zogeheten Java-applets ondersteunde. Dit waren kleine programma’s, geschreven in Java, die door de browser kon worden uitgevoerd. Dit had echter een heleboel beperkingen waardoor er dus een scripttaal ontwikkeld is die direct door de browser werd begrepen, JavaScript. Deze zou op Java moeten lijken waar hedendaags totaal geen sprake van is.
Er zijn verschillende soorten manieren hoe JavaScript gebruikt kan worden. De “normale” JavaScript die ingeladen wordt via een script tag, wordt vanilla JS genoemd. Daarnaast heb je ook server-side scripting frameworks zoals NodeJS, DenoJS, en Bun. Deze snappen JavaScript en daarmee kun je bijvoorbeeld een webserver opzetten die dan weer HTML pagina’s kunnen serveren net als PHP.
Het begin van frameworks
Een framework is een softwarebibliotheek die een bepaald deel van de softwareontwikkeling ondersteunt. Het biedt een structuur waarmee ontwikkelaars eenvoudiger en sneller kunnen werken aan complexe applicaties. JavaScript frameworks zoals React, Angular en Vue.js zijn populaire keuzes, maar ook Laravel (PHP framework) is een vaak gebruikte keuze voor het ontwikkelen van niet alleen een frontend maar ook een backend (AP).
Een webapplicatie wordt meestal ontwikkeld om een bepaald probleem op te lossen. Neem bijvoorbeeld boekhouden, je wilt je kosten, inkomsten, uren, facturen, en documentatie goed verwerken. Vroeger werd vaak PHP gebruikt om webapplicaties te bouwen. Dit zorgde er wel voor dat de web pagina’s vaak opnieuw van de server moest laden omdat je bijvoorbeeld data moest insturen. Dit gebeurde allemaal via de server, wat traag kan zijn als de server niet snel genoeg reageert. Dit zorgt dat je web pagina lang aan het laden is. Om dit probleem tegen te gaan wordt er gebruik gemaakt van API’s.
Single-page applicatie (SPA)
Als er gebruik gemaakt van een API (gaan we in latere blog verder op in), moet de data opgestuurd worden in de achtergrond. Dit wordt gedaan met JavaScript. Alleen grote applicaties hebben heel veel acties, dit zorgt ervoor dat je heel veel JavaScript moet schrijven om iets simpels voor elkaar te krijgen. Om dit probleem tegen te gaan is in 2006 jQuery ontwikkeld.
jQuery wordt vaak beschouwd als het eerste JavaScript-framework, hoewel het niet echt een framework is. jQuery was bedoeld om veel van de problemen op te lossen die ontwikkelaars tegenkwamen met subtiele verschillen in webbrowser-implementaties, en je hoefde niet veel JavaScript te schrijven om hetzelfde te krijgen met vanilla JavaScript. In augustus 2022 gebruikte 77% van de 10 miljoen meest populaire websites jQuery.
Hoewel jQuery veel abstracte, werden grote applicaties nog steeds super slordig. In 2010 kwam Jermey Ashkenas met Backbone. Het allereerste JavaScript framework dat ervoor zorgde dat je Single-page applicaties kon ontwikkelen. Rond diezelfde tijd werd AngularJS ontwikkeld, wat al snel door Google verder ontwikkeld werd. Dit was het eerste framework dat een complete architectuur voor frontend ontwikkeling bood.
Verschillende soorten frameworks
Backbone
Backbone.js is een simpel JavaScript-framework dat de structuur biedt voor het ontwikkelen van single-page webapplicaties.Het werd populair vanwege zijn eenvoudige en minimalistische aanpak. Met Backbone.js kunnen ontwikkelaars modellen, collecties, views en routers gebruiken om de code van hun applicaties te organiseren en te beheren op een manier die gemakkelijk te begrijpen en te onderhouden is.
AngularJS
AngularJS kwam als eerste met een manier om data te koppelen aan HTML en door de mogelijkheid om de HTML in real-time te updaten. Ook kon je herbruikbare componenten maken en overal in je webapplicatie gebruiken. Als we allemaal weten (of nu pas) herbruikbaarheid is enorm belangrijk. Op 14 september 2016 werd Angular 2 gelanceerd. Deze versie was opnieuw gebouwd vanaf de grond om betere prestaties en schaalbaarheid te bieden.
ReactJS
In 2013 bracht Facebook een nieuw framework uit. Hoewel React niet makkelijke te leren is, is het toch het meest populaire framework. React maakt gebruik van een virtuele DOM om efficiënt updates naar de werkelijke DOM (HTML) te sturen, waardoor de prestaties van webapplicaties worden verbeterd. Doordat React zo groot is, zijn er heel veel “packages” gemaakt die je kan gebruiken tijdens het ontwikkelen van een webapplicatie. Bijvoorbeeld een virtuele lijst die ervoor zorgt dat je web pagina niet traag wordt als je oneindig scrolt.
VueJS
VueJS werd in 2014 uitgebracht en heeft qua functionaliteit veel weg van Angular en React. Hoe je componenten bouwt is alleen anders. Vue is heel makkelijk te leren doordat de syntax heel eenvoudig is. Ook Vue heeft een grote gebruikers base die de wereld van Vue uitbreiden met allerlei packages.
React Native
React Native, uitgebracht door Facebook in 2015, biedt ontwikkelaars de mogelijkheid om native mobiele apps te bouwen met behulp van JavaScript en React. Het stelt ontwikkelaars in staat om dezelfde codebase te gebruiken voor zowel iOS als Android, waardoor de ontwikkelingstijd wordt verkort. React Native maakt gebruik van de native componenten van iOS en Android, dit zorgt ervoor dat je een native gebruikerservaring krijgt.
Andere frameworks
Er zijn nog talloze andere frameworks en niet alleen in de JavaScript wereld. Er zijn ook nog andere frameworks zoals bijvoorbeeld Flutter (mobiel), Laravel (web), Ruby on Rails (web) en Django (web). Elk van deze frameworks heeft zijn eigen voor- en nadelen en zijn geschikt voor verschillende soorten projecten en ontwikkelbehoeften.
Hier kun je bekijken welke frameworks er populair waren in 2023
Adaptaties op frameworks
Het makkelijke van deze frameworks is dat je zelf alles kan invullen en aanpassen zoals je wilt. Je moet zelf je navigatie opzetten (/page etc). Ook kan je een bestaande applicatie uitbreiden met een framework zonder daarvoor een heel nieuw project op te zetten.
Omdat dit niet altijd een goed idee is zijn er verschillende frameworks ontwikkeld die bovenop een JavaScript framework zijn gebouwd. Deze hebben dan bijvoorbeeld server-side rendering. Dat betekend dat een pagina op de server al opgebouwd wordt in plaats van in de browser (komt een blog over). Ook werken ze met een navigatie op basis van folder structuur en hebben ze de mogelijkheid om een bepaalde layout te hergebruiken over verschillende pagina’s (bijvoorbeeld een header) zonder dat dit opnieuw gerenderd wordt.
NextJS
In 2016 bracht Vercel nextJS als een open-sourceproject uit en sindsdien is de populariteit enorm gestegen. Next.js bouwt voort op de basis van React en biedt extra functionaliteit zoals server-side rendering, dynamische routes, en automatische code splitting. Hierdoor kun je als ontwikkelaar snel en efficiënt, voor elke use case, webapplicaties bouwen. Door de server-side rendering kan je goed optimaliseren voor SEO terwijl je ook nog client-side rendering (SPA) kan gebruiken in hetzelfde project.
NuxtJS
Eigenlijk heeft NuxtJS dezelfde functionaliteit als NextJS, met als verschil dat het op VueJS gebouwd is. VueJS heeft een kleinere gebruikers base dan ReactJS waardoor ook NuxtJS iets minder geadvanceerd is als NextJS. Dit is echter niet perse een slecht ding. Het wordt goed onderhouden en er zijn genoeg uitbreidingen door de gebruikers zelf gemaakt.
SvelteKit
SvelteKit is een framework gebaseerd op Svelte en biedt vergelijkbare functionaliteiten als NextJS en NuxtJS. SvelteKit heeft echter een aantal kleine verbeteringen ten opzichte van de andere 2. Tijdens het compileren van de code wordt deze omgezet naar efficiënte code waardoor de uiteindelijk JavaScript bestanden klein zijn. Dit zorgt weer voor een snellere laadtijd.
Andere frameworks
Ook hier zijn er nog een aantal andere frameworks zoals Gatsby, Hugo, of Jekyll.
Hier kun je bekijken welke frameworks er populair waren in 2023
Wat er nog meer bij komt kijken
Een framework is niet het enige wat komt kijken bij het bouwen van een applicatie. In eerdere blogs hebben we het gehad over UX (gebruikerservaring) en UI (gebruiker interface) design. Nadat de ontwerpen zijn gemaakt is het tijd om dit over te brengen naar een werkende applicatie.
Instellingen en thema’s
Tijdens het ontwerpen wordt er een design systeem gemaakt dat de kleuren, lettertypes en groottes, spacing, en meer beschrijft. Dit wordt overgenomen in het frontend project. Dit wordt gedaan door gebruik te maken van CSS variabelen. Vaak wordt er ook een preprocessor gebruikt zoals SCSS of postCSS. Er kan ook gebruik gemaakt worden van Tailwind waardoor je geen CSS schrijft maar je schrijft een soort van CSS direct in je HTML met behulp van classes.
Herbruikbare componenten
Zoals ik al eerder zei, herbruikbaarheid is de toekomst. Niet alleen met programmeren, maar ook in de ruimtevaart of met het milieu (plastic). Als je ontwerpen goed zijn is dit niet heel moeilijk. Je begint bij de kleinste componenten (atoms) en zo bouw je grotere componenten die je dan in je layout zet.
API koppeling
Een webapplicatie zonder data komt niet heel vaak voor. Deze data komt vanuit de database. Hoewel je, zeker nu met de server-side rendering van NextJS en NuxtJS, je de data gelijk vanuit de database kan pakken, wordt dit echter vaak via een API gedaan. De frontend roept deze API aan en krijgt de gevraagde data terug. Dit is meestal ook voorzien van authorizatie. Ook moet de frontend vaak data opsturen naar de API. Als er dan iets fout gaat moet de frontend dit tonen aan de gebruiker, eveneens moet het laden worden getoond zodat de gebruiker weet wat er gebeurt.
Testen
Een webapplicatie heeft bijna altijd bugs, dit kan komen door verschillen van omgevingen, data die anders is, kleine foutjes die gemaakt zijn. Deze worden er echter uitgehaald tijdens de test-fase. Er worden automatische testen geschreven die de gewenste functionaliteit nabootsten en de gehele app doorlopen. Als er een test faalt zien we gelijk waardoor dat komt en kan dit worden opgelost.
Het kan echter ook zo zijn dat de gewenste functionaliteit toch iets anders blijkt te zijn omdat dat beter zou werken. Dit wordt ontdekt op de zogenoemde “staging” omgeving. Dit is een omgeving waar de applicatie live staat en je kan daar doen wat je wilt. Voordat we iets uitrollen naar productie, wordt het eerst uitgerold naar de staging omgeving waar vervolgens door mensen ook nog getest kan worden.
Productie en livegang
Nadat de webapplicatie grondig getest is, gaan we live op de productie omgeving. Hier wordt de applicatie gebruikt zoals deze bedoeld is. Als de applicatie veel gebruikt wordt kunnen we opschalen zodat de applicatie snel en toegankelijk blijft voor iedereen. Ook kunnen we alles meten waardoor we later weer eventuele verbeteringen kunnen doorvoeren.
Onderhoud
Technisch gezien is een applicatie nooit 100% klaar. Er zijn altijd versies die opgehoogd kunnen worden voor verbeteringen, nieuwe functionaliteiten en het verbeteren van functionaliteit.
Laatste woord
Frontend ontwikkeling is zo groot dat ik niet alles kan beschrijven. Als ik elk framework zou moeten uitleggen zouden we over een jaar hier nog zitten. En dit is nog maar één onderdeel van een webapplicatie. Maar dit is ook het mooie van het ontwikkelen, continue in beweging blijven en nieuwe dingen leren.
Je hebt het misschien niet bewust door, maar de wereld ontwikkelt zich nu razend snel. Het is 34 jaar geleden dat HTML en de browser werd uitgevonden, en binnen 10 jaar heeft openAI niet alleen een slimme tekst AI gemaakt, maar ook image generatie en zelfs video generatie.
Nu is de vraag, ontwikkelt jouw bedrijf ook door of blijft het stilstaan (achteruitgang)? Ik sta altijd open voor een vrijblijvend gesprek waarbij je alles kunt vragen.
Bedankt voor het lezen en tot de volgende!
Arjen de Vos 
