The Case for HTML First Web Development

Stel je voor dat je een huis wilt bouwen.

In de jaren '90 was het bouwen van een website als het bouwen van een huis met gewone bakstenen en hout. Je legde de muren (de inhoud), je zette het dak op (de structuur) en je schilderde het pas op het laatst. Het was simpel, robuust en iedereen kon zien hoe het huis eruitzag als je er doorheen liep.

Maar toen de wereld groeide en we "webapplicaties" wilden (zoals sociale media of online winkels), begonnen bouwers te denken: "Bakstenen zijn te saai. Laten we eerst een ingewikkeld blauwdruk maken, alles in een computerprogramma ontwerpen, en dan pas het huis bouwen."

Dit leidde tot de huidige situatie: we bouwen huizen met duizenden losse onderdelen, speciale machines en ingewikkelde instructies die alleen experts begrijpen. Het huis werkt misschien wel, maar het is zwaar, traag om te bouwen, en als je een muur wilt verplaatsen, moet je eerst de hele machine resetten.

Dit is precies waar het artikel "The Case for HTML First Web Development" over gaat. De auteur, Juho Vepsäläinen, pleit ervoor om weer terug te keren naar de basis: bouw eerst met de bakstenen (HTML), en gebruik de dure machines (JavaScript-frameworks) alleen als het echt niet anders kan.

Hier is de uitleg in simpele taal, met een paar creatieve vergelijkingen:

1. Wat is "HTML First"?

Stel je voor dat je een restaurant hebt.

• De oude manier (HTML First): Je kookt het eten (de inhoud) eerst. Je serveert het op een bord. Als de klant wil dat het iets pittiger is, voeg je peper toe. Het eten is direct klaar en smaakt goed.
• De moderne manier (Framework First): Je kookt het eten niet zelf. Je stuurt het eerst naar een supercomputer die het eten analyseert, het in een plastic verpakking stopt, een app op de telefoon van de klant stuurt, en pas daarna, als de klant op een knop drukt, wordt het eten opgewarmd en geserveerd.

Het resultaat is hetzelfde eten, maar de moderne manier kost veel meer tijd, energie en geld. HTML First zegt: "Waarom wachten tot de computer het eten warmt? Serveer het gewoon direct!"

2. Waarom zijn we zo ver weg geraakt?

In het begin van het internet (Web 2.0) waren de "bakstenen" (HTML) nog niet sterk genoeg om complexe dingen te doen. Daarom bedachten programmeurs Frameworks (zoals React of Angular). Dit zijn als gigantische bouwpakketten die alles voor je regelen.

Het probleem? We zijn zo afhankelijk geworden van deze pakketten dat we vergeten zijn dat de basis (HTML) intussen ook superkrachtig is geworden.

• Vroeger: Om een lijstje uit te vouwen (een "dropdown"), moest je 50 regels ingewikkelde code schrijven.
• Nu: HTML kan dat zelf! Het is als een auto die vanzelf de gordijnen dichttrekt als je op een knop drukt. Je hoeft geen monteur meer te zijn om dat te doen.

3. De voordelen: Waarom terug naar de bakstenen?

Het artikel geeft drie grote voordelen, die we kunnen vergelijken met het leven:

A. De "Div Soep" vs. De Opgerichte Kamer

Vroeger (en soms nu nog) bouwen programmeurs websites met alleen maar lege dozen (div-tags). Het is alsof je een kamer vult met duizenden lege dozen, en je moet in elk doosje kijken om te weten wat erin zit. Dit heet "Div Soup".

• HTML First: Je gebruikt de juiste dozen. Een doos voor "nieuws", een doos voor "foto", een doos voor "kop".
• Het resultaat: Een opruime kamer. Als je wilt weten waar de foto staat, kijk je gewoon in de "foto-doos". Voor computers (en mensen met een handicap) is dit veel makkelijker te begrijpen.

B. De "Lichte Fiets" vs. De "Tank"

Webapplicaties die vol zitten met JavaScript zijn als zware tanks. Ze zijn krachtig, maar ze verbruiken enorm veel brandstof (data) en zijn traag om te starten.

• HTML First: Dit is een lichte fiets. Je trapt, en je bent er.
• Het bewijs: Het artikel toont aan dat websites die HTML First gebruiken veel sneller laden, minder data verbruiken en minder batterijverbruik hebben op telefoons. Het is alsof je van een vrachtwagen naar een fiets stapt: je komt sneller aan op korte afstanden.

C. Makkelijker te repareren

Stel je voor dat je auto kapot is.

• Bij een Framework-auto moet je een specialist bellen die eerst de hele computer van de auto moet uitlezen voordat hij weet welke bout los is.
• Bij een HTML-auto loop je naar de motor, zie je dat een riem loshangt, en maak je die vast.
• Conclusie: HTML First maakt websites makkelijker te onderhouden. Er zijn minder "bewegende delen" die kunnen breken.

4. Wat zegt het onderzoek?

De auteur heeft verschillende voorbeelden onderzocht:

• Grote bedrijven: Een bedrijf dat van een zware applicatie (React) overstapte naar een lichtere HTML-versie, zag hun code met 67% kleiner worden. Ze hadden minder programmeurs nodig om het te onderhouden en de site werd twee keer zo snel.
• Vergelijkingen: Als je een nieuwswebsite vergelijkt met een moderne, zware nieuwswebsite, is de HTML-versie vaak sneller en beter voor het milieu (minder energie).
• Uitzondering: Het werkt niet voor alles. Als je een spelletje wilt maken dat 3D-graphics doet, heb je die zware machines nog steeds nodig. Maar voor 80% van de websites (nieuws, blogs, webshops, informatie) is het overkill.

5. Wat heeft dit met Kunstmatige Intelligentie (AI) te maken?

Dit is een heel interessant punt. AI (zoals ChatGPT) is slim, maar het leest websites als een mens: door de tekst en de structuur.

• Als een website een wirwar is van ingewikkelde code, kan de AI niet goed begrijpen wat er staat.
• Als de website schone HTML is (zoals een goed geschreven boek), begrijpt de AI het direct.
• Conclusie: Door "HTML First" te doen, maak je je website niet alleen beter voor mensen, maar ook voor de robots van de toekomst.

Samenvatting in één zin

"HTML First" is het idee dat we moeten stoppen met het overcompliceren van het web met zware machines, en weer moeten beginnen met het bouwen van sterke, simpele fundamenten waar de technologie van vandaag al voor is gemaakt.

Het is een oproep aan programmeurs om eerst te kijken wat de basis (HTML) al kan, voordat ze gaan zoeken naar ingewikkelde oplossingen. Het is alsof je eerst probeert om je deur met je hand open te duwen, voordat je een hydraulische kraan gaat installeren.