De succesvolste hypertekst ter wereld: HTML
In het begin was er de hyperlink, en de hyperlink was het web. Het systeem dat Tim Berners-Lee, Roy Fielding en anderen ontwikkelden, draaide om één kernidee: hypermedia.
HTML begon als een alleen-leesbare hypermedia, bedoeld om documenten te publiceren, vooral binnen de academische wereld. Deze documenten werden met anker-tags aan elkaar gekoppeld, zodat gebruikers eenvoudig tussen pagina’s konden navigeren.
Met de komst van HTML 2.0 werd de form-tag toegevoegd. Naast de anker-tag (de hyperlink) werd dit de tweede manier om met hypermedia te werken. Dankzij formulieren konden gebruikers gegevens naar een server sturen, niet alleen informatie opvragen. Hierdoor veranderde het web van een verzameling documenten in een platform voor interactieve toepassingen.
Tegenwoordig is HTML de meest gebruikte hypermedia ter wereld. Deze uitleg gaat ervan uit dat de lezer enige basiskennis van HTML heeft. Je hoeft geen expert te zijn, maar hoe beter je de belangrijkste tags en concepten begrijpt, hoe meer je eruit kunt halen.
De kern van HTML als hypermedia
HTML heeft twee belangrijkste hypermedia-elementen: de anker-tag en de form-tag.
Anker-tags
Een anker-tag maakt een hyperlink aan met de eigenschap href, die verwijst naar een ander document of onderdeel daarvan. Wanneer iemand op de link klikt, stuurt de browser een HTTP GET-verzoek naar de opgegeven URL. De server stuurt vervolgens nieuwe HTML terug, die door de browser wordt weergegeven.
Ankers vormen zo de basis van het web. Ze maken navigatie tussen bronnen mogelijk op een natuurlijke en eenvoudige manier.
Form-tags
Waar anker-tags zorgen voor navigatie, maken form-tags het mogelijk om gegevens te verzenden en zo bronnen te wijzigen.
Een eenvoudig voorbeeld:
<form action="/signup" method="post">
<input type="text" name="email" placeholder="Voer je e-mailadres in..."/>
<button>Aanmelden</button>
</form>
De action bepaalt waar het verzoek heen gaat, en de method geeft aan welk HTTP-type wordt gebruikt, zoals POST. Wanneer de gebruiker het formulier verzendt, stuurt de browser een HTTP-verzoek met de ingevoerde gegevens naar de server.
Zo kunnen gebruikers de toestand van gegevens op de server beïnvloeden. Deze interactie gebeurt volledig via hypermedia, wat het web krachtig en flexibel maakt.
Web 1.0 applicaties
Voor wie ervaring heeft met webontwikkeling zijn deze concepten waarschijnlijk heel vertrouwd, misschien zelfs vanzelfsprekend. Maar bedenk dat alle interactie in HTML oorspronkelijk slechts via twee tags gebeurde: ankers en formulieren.
Met alleen deze twee middelen groeide het vroege web explosief. Ontwikkelaars konden al snel dynamische toepassingen maken voor miljoenen gebruikers. Dit toont de enorme kracht van hypermedia aan.
Zelfs nu, in een tijd waarin JavaScript-frameworks zoals React en Vue de boventoon voeren, kiezen veel ontwikkelaars nog steeds voor eenvoudige HTML om hun doelen te bereiken. De combinatie van ankers en formulieren geeft HTML een grote expressieve kracht.
Wat is géén hypermedia?
Naast de hypermedia-benadering bestaat er ook een andere manier om met servers te communiceren: via JavaScript.
Een voorbeeld:
<button onclick="fetch('/api/v1/contacts/1')
.then(response => response.json())
.then(data => updateUI(data))">
Haal contact op
</button>
Wanneer de knop wordt aangeklikt, voert JavaScript een AJAX-verzoek uit met de fetch()-functie. De browser vraagt gegevens op van de server, meestal in JSON-formaat, en gebruikt vervolgens JavaScript om de gebruikersinterface bij te werken.
Het verschil met hypermedia is belangrijk: de server stuurt geen HTML of hyperlinks terug, maar ruwe data. De client-code (bijvoorbeeld de updateUI()-functie) moet zelf weten wat de data betekent en hoe deze moet worden weergegeven.
Daardoor ontstaat nauwe koppeling tussen de client-code en de server-API. Als de server iets in het JSON-formaat verandert, moet de JavaScript-code ook worden aangepast.
Single Page Applications (SPA’s)
Uit dit soort JavaScript-interacties is een nieuw type webtoepassing ontstaan: de Single Page Application, of SPA.
Bij SPA’s navigeert de gebruiker niet langer tussen afzonderlijke HTML-pagina’s via hyperlinks en formulieren. In plaats daarvan blijft de gebruiker op één pagina, en wordt de inhoud dynamisch bijgewerkt met data die via AJAX of fetch-verzoeken wordt opgehaald.
Frameworks zoals React, Angular en Vue.js maken dit mogelijk. Ze gebruiken JavaScript-objecten in het geheugen van de browser om de toestand van de applicatie bij te houden. Wanneer die gegevens veranderen, wordt de gebruikersinterface automatisch aangepast, en andersom.
In deze architectuur speelt hypermedia nauwelijks nog een rol. HTML wordt alleen nog gebruikt als sjabloon, niet meer als communicatiemechanisme met de server. De klassieke ankers en formulieren werken dan niet meer zoals bedoeld.
SPA’s lijken daardoor sterk op de dikke cliënt-toepassingen uit de jaren tachtig, waarbij de logica grotendeels aan de kant van de gebruiker zat. Dat is niet per se slecht, maar het betekent dat men de voordelen van het oorspronkelijke, RESTful hypermedia-web grotendeels opgeeft ten gunste van JavaScript-gedreven interacties.
Het is dus de moeite waard voor webontwikkelaars om zich af te vragen waarom deze keuze vaak automatisch wordt gemaakt, en of een eenvoudiger, hypermedia-gerichte benadering soms niet beter zou zijn.
Samenvatting
HTML begon als een eenvoudig systeem met slechts twee interactie-elementen: ankers en formulieren. Toch bleek dat genoeg om het web te laten uitgroeien tot het grootste informatiesysteem ter wereld.
Later kwam er een verschuiving richting JavaScript-gestuurde toepassingen en Single Page Applications, die data-API’s gebruiken in plaats van hypermedia. Hoewel deze aanpak krachtig is, verbreekt ze de oorspronkelijke eenvoud en losjes gekoppelde structuur van het web.
Het blijft daarom interessant om te bedenken dat de basisprincipes van hypermedia nog steeds geldig zijn, en dat de kracht van het web juist ligt in die eenvoud.
Comments
Post a Comment