Waarom hypermedia gebruiken?

De huidige standaard in webontwikkeling is het bouwen van Single Page Applications (SPA’s), vaak met frameworks zoals React en server-side rendering. In zo’n architectuur wordt de hoofdinterface gebouwd en bijgewerkt in JavaScript, terwijl de backend een API levert waarmee de applicatie communiceert.

Dit idee heeft zich razendsnel verspreid. Wat begon bij een paar grote websites, is doorgedrongen tot bijna elk soort site, van marketingpagina’s tot blogs.

De JavaScript-gebaseerde Single Page Application heeft de webwereld veroverd. Het belangrijkste voordeel dat zorgde voor dit succes was duidelijk: SPA’s bieden een veel interactievere en meeslepende ervaring dan de oudere, meer statische Web 1.0-toepassingen op basis van hypermedia.

SPA’s kunnen elementen op een pagina dynamisch bijwerken zonder de hele pagina opnieuw te laden. Ze kunnen CSS-overgangen gebruiken voor vloeiende animaties en reageren op allerlei gebeurtenissen, zoals muisbewegingen of scrollacties. Deze mogelijkheden geven JavaScript-applicaties een grote voorsprong bij het bouwen van geavanceerde gebruikerservaringen.

Maar met al die populariteit, kracht en verfijning rijst de vraag: waarom zou je nog kiezen voor iets ouderwets en eenvoudiger als hypermedia?

JavaScript-moeheid

Het antwoord is dat de hypermedia-architectuur, zelfs in haar oorspronkelijke Web 1.0-vorm, een aantal belangrijke voordelen heeft ten opzichte van de SPA + JSON-API-benadering. Drie van de grootste voordelen zijn:

Het is een zeer eenvoudige manier om webapplicaties te bouwen.
Het is uiterst tolerant voor veranderingen in inhoud en API’s.
Het maakt gebruik van bewezen functies van browsers, zoals caching.

Vooral de eerste twee voordelen pakken belangrijke problemen aan die veel moderne webteams ervaren. SPA-infrastructuren zijn vaak complex en vereisen speciale teams om te onderhouden. Daarnaast verandert de structuur van JSON-API’s voortdurend om aan applicatiebehoeften te voldoen, wat leidt tot API-churn.

Deze combinatie van complexiteit, frequente wijzigingen en de voortdurende stroom van nieuwe JavaScript-bibliotheken heeft geleid tot wat men JavaScript-moeheid noemt: een algemeen gevoel van frustratie en uitputting door de vele stappen die nodig zijn om iets gedaan te krijgen.

Een hypermedia-aanpak kan dit gevoel helpen verminderen. Maar als hypermedia zoveel voordelen biedt, waarom heeft de ontwikkelwereld het dan grotendeels losgelaten?

Waarom hypermedia werd vergeten

Er zijn twee hoofdredenen waarom hypermedia in de vergetelheid raakte.

De eerste reden is dat HTML als hypermedia nauwelijks is geëvolueerd sinds de jaren negentig. Hoewel er veel nieuwe functies aan HTML zijn toegevoegd, zijn er geen nieuwe manieren gekomen om met een server te communiceren. Ontwikkelaars hebben nog steeds alleen anker-tags en formulieren, en die kunnen alleen GET- en POST-verzoeken uitvoeren.

De tweede reden is dat de verwachtingen van gebruikers sterk zijn gegroeid, terwijl HTML op dit vlak stil bleef staan. Mensen wilden snellere, vloeiendere en interactievere interfaces. JavaScript-gebaseerde toepassingen met JSON-API’s boden precies dat, en vulden zo het gat dat HTML had laten ontstaan.

De verschuiving naar SPA’s kwam dus niet voort uit een inherente technische superioriteit van dit model, maar uit de vraag naar betere gebruikerservaringen. In plaats van HTML te verbeteren, stapte de industrie over op JavaScript om rijke applicaties te bouwen.

Sommigen bleven echter trouw aan hypermedia. Er zijn initiatieven geweest om hypermedia buiten HTML verder te ontwikkelen, zoals HyTime, VoiceXML en HAL, maar HTML zelf bleef stilstaan. Hierdoor stapte de webwereld over op data-gebaseerde architecturen met JavaScript-clients en JSON-API’s.

Een mogelijke heropleving van hypermedia

Toch is het interessant om na te denken over wat er had kunnen gebeuren als HTML zich wél had ontwikkeld. Wat als HTML meer interactieve controles had gekregen, of bestaande elementen expressiever waren geworden?

Zou het mogelijk zijn geweest om moderne, interactieve webapplicaties te bouwen binnen het oorspronkelijke, REST-achtige hypermedia-model dat het web zo krachtig en flexibel maakte?

De laatste jaren zijn er gelukkig enkele nieuwe initiatieven ontstaan die proberen HTML opnieuw leven in te blazen als hypermedia. Ironisch genoeg worden deze geschreven in JavaScript, de taal die HTML ooit verdrong.

Maar in plaats van HTML te vervangen, gebruiken deze nieuwe bibliotheken JavaScript om HTML te versterken als hypermedia. Ze brengen de oorspronkelijke principes van het web terug in het hart van moderne webontwikkeling.

Hypermedia-gerichte JavaScript-bibliotheken

Binnen de webwereld bestaat er nu een levendig debat tussen het Single Page Application (SPA)-model en het Multi Page Application (MPA)-model.

De MPA-aanpak is eigenlijk de moderne naam voor de klassieke Web 1.0-stijl: een verzameling pagina’s verbonden door links en formulieren, die elk een HTTP-verzoek versturen en een HTML-antwoord ontvangen. MPA’s zijn dus van nature hypermedia-gestuurd.

Ze voelen soms wat ouderwets aan, maar werken betrouwbaar en zijn gemakkelijk te onderhouden. Veel ontwikkelaars kiezen bewust voor deze eenvoud.

Rich Harris, de maker van Svelte.js, stelde een transitional aanpak voor: een mix van MPA- en SPA-ideeën. Daarbij wordt per onderdeel gekozen welke techniek het best past. Hoewel dit een pragmatisch compromis is, blijft het gevoel bestaan dat we tussen twee totaal verschillende modellen moeten balanceren.

De kern van die spanning is de interactiviteit. De keuze voor een SPA of MPA wordt meestal bepaald door de gewenste gebruikerservaring.

Door echter gebruik te maken van hypermedia-gerichte bibliotheken, kan de kloof tussen SPA’s en MPA’s sterk worden verkleind. Met zo’n bibliotheek kun je de hypermedia-aanpak voor een veel groter deel van je applicatie gebruiken, zonder in te leveren op interactiviteit. In veel gevallen kun je zelfs een volledig hypermedia-gedreven applicatie bouwen die toch modern en soepel aanvoelt.

Dit maakt webapplicaties eenvoudiger, consistenter en beter te begrijpen.

Hypermedia-gedreven toepassingen

Een goed voorbeeld van zo’n hypermedia-gerichte bibliotheek is htmx. Hiermee kun je veel moderne interface-functies bouwen binnen het hypermedia-model van het web.

Een eenvoudig voorbeeld:

<button hx-get="/contacts/1" hx-target="#contact-ui">
  Haal contact op
</button>

Wanneer de gebruiker op deze knop klikt, stuurt htmx een GET-verzoek naar /contacts/1. Het antwoord van de server, in HTML-formaat, wordt vervolgens geplaatst in het element met het id contact-ui.

Het antwoord kan er bijvoorbeeld zo uitzien:

<details>
  <div>Contact: HTML Voorbeeld</div>
  <div><a href="mailto:html-voorbeeld@example.com">E-mail</a></div>
</details>

Dit kleine stukje HTML vervangt dynamisch een deel van de pagina, zonder JavaScript-code te schrijven.

Wat hier gebeurt, is dat de client en de server nog steeds communiceren via hypermedia, precies zoals het web oorspronkelijk bedoeld was. htmx voegt extra mogelijkheden toe aan HTML, maar vervangt het hypermedia-model niet.

Hoewel een htmx-knop en een JavaScript-knop op het eerste gezicht op elkaar lijken, werken ze in de praktijk volgens totaal verschillende architecturen. De eerste bouwt voort op de principes van het web, de tweede vervangt ze.

Door een hypermedia-gerichte aanpak te volgen en HTML zo ver mogelijk te benutten met hulpmiddelen als htmx, kun je webapplicaties bouwen die krachtig, interactief en toch eenvoudig zijn.

Search This Blog

HyperWeb