Dit is de code die oproept wat op het scherm zal verschijnen. De naam is dus doeltreffend, want het betreft de ‘voorkant’ van de kijkervaring. Daar tegenover staat de back-end code, die op onzichtbare wijze vooral het front-end voorziet van dynamische inhoud.
Even een snel voorbeeld: Als je op een website moet inloggen met een account, dan voer je jouw persoonlijke gegevens in. De front-end code presenteert je een veld voor het invullen van gebruikersnaam en wachtwoord en als je daarna op enter drukt betekent dat een verzoek om die te controleren. De back-end code pakt dat verzoek op en voert de controle uit via een achterliggende database vol gegevens. De back-end code bezit, als het goed is, een beveiligde sleutel tot deze omgeving en de uitkomst luidt “ja” of “nee”, ofwel een 1 of een 0. De front-end code pakt dit antwoord op en stuurt je bij ja door naar je profiel met jouw unieke inhoud en laat je bij een nee weten dat de ingevoerde gegevens niet juist zijn, waarna je het opnieuw kunt proberen of je wachtwoord resetten.
De werking van de front-end code zie je dus op het scherm, maar het back-end deel is ook druk, zij het onzichtbaar. Het front-end is als het ware de acteur op het podium, het back-end is de regisseur achter de schermen.
Dit is de code direct onder de zichtbare oppervlakte. De HTML bevat de indeling van een website, webshop of webapp-pagina. Bij een productpagina voor een webshop zie je hier de volgorde opgenomen:
Header > Navigatie > Product informatie > Reviews > Alternatieve producten > Footer
Je roept daarvan de elementen aan die je op de pagina wil zien verschijnen en vult ze met onder andere teksten, afbeeldingen en videos. Maar met HTML alléén krijg je nog niet een goed geordende pagina. Daarvoor heb je altijd de toevoeging van een stylesheet nodig, de CSS, die met de ontworpen stijl als blauwdruk gaat communiceren met de browser. In de HTML maak je een connectie met de CSS en als dat goed is opgezet weet de browser precies hoe het geheel opgebouwd moet worden.
We zijn intussen al bij de 5e iteratie van HTML en de 3e van CSS. Met iedere upgrade is er meer geautomatiseerd en zijn er verdergaande opties toegevoegd om te kiezen wat je wil tonen binnen een browser. CSS3 is bijvoorbeeld bekend vanwege de mogelijkheid om daarin direct geavanceerd te animeren en HTML5 heeft een ingebouwd begrip voor de vele soorten media, die je eerder geheel zelf moest instellen. Iedere iteratie betekende voorts dat er minder regels code nodig zijn voor hetzelfde resultaat.
Deze code is vooral gecentreerd rondom interactie. Je gebruikt hem als toevoeging op de HTML en CSS, maar niet alleen om een hele pagina op te zetten. Javascript en Jquery kunnen de HTML en CSS wel genereren en aanpassen en in steeds meer systemen zie je die mogelijkheden terugkomen. Je kunt dus alles wel in bijv. Javascript opzetten, maar die opzet moet dan wel weer HTML en CSS genereren om iets in beeld te kunnen brengen.
Deze code kan voorts prima met data omgaan en die verwerken op basis van vooraf ingestelde methoden. Een computer is een prima rekenmachine, die je dus allerlei berekeningen kunt laten doen. Denk daarbij niet alleen aan 2 + 3 = 5, maar bijvoorbeeld ook aan de keuzewijzers in webshops. Je voert een aantal wensen in en vervolgens kan een script voor de gebruiker het aangeboden assortiment op diens wensen afstemmen. De berekening bestaat er dan uit dat wordt vastgesteld welke producten uit het assortiment voldoen aan de gekozen specificaties.
Dit kan prima door elkaar heen. Binnen één script kun je zonder problemen de layout bewerken én berekeningen doen. Je kunt ook de layout direct aanpassen aan de hand van zo’n berekening. Dit, in combinatie met creativiteit, is een bijzonder potente formule voor prachtige oplossingen en een leuke tool om te gebruiken. De browsers hebben geen internet nodig om deze code te verwerken, dus als het lokaal staat kun je alles ook offline gebruiken.
Het gaat enorm hard met de ontwikkelingen op deze onderdelen. Soms harder dan de bedoeling was, want de browsers van Chrome, Edge, Firefox en de rest moeten er wel steeds weer mee om kunnen gaan. Er zijn al opties waarvoor je zekerheidshalve eerst een aantal voorzichtigheids-maatregelen moet nemen. Je kunt de pagina laten controleren op het draaien binnen een nog niet ondersteunde browser en zo ja, laten overschakelen naar een minder geavanceerde functionaliteit. Dan moet je dus ook een back-up mogelijkheid toevoegen en maar hopen dat de meeste browsers goed worden geupdate.
Zelf ben ik voorstander van het gebruik van mooie opties, maar ook om dat wel binnen de perken te houden. Je weet nooit of een experimentele techniek wel echt terecht komt in de uiteindelijke ondersteuning en gezien de vele verschillende apparaten waarmee je tegenwoordig te maken krijgt, is het soms beter om iets meer of safe spelen. Vooruitlopen is goed, maar je doel moet er niet door in gevaar kunnen komen.
