Moderne Front-End-begrippen toegelicht

Hoe werkt Front-End?

Sinds Front-End bestaat als specifiek specialisme is er veel veranderd, maar ook veel hetzelfde gebleven. Er zijn allerlei frameworks, libraries en tools gekomen en gegaan, maar de basis van Front-End blijft nog altijd bestaan uit 3 elementen:

• HTML (voor de content en voor het geraamte van een website)
• CSS (voor de opmaak)
• JavaScript (voor interactie en voor connectie met API’s en of een Back-End)

Wat echter wel veranderd is, is de manier waarop Front-End code wordt geschreven en welke stappen er doorlopen worden voordat de code op een webserver komt. Tien jaar terug kon je alles met de hand in Kladblok schrijven, opslaan als een .html bestand en via FTP naar een webserver sturen. Dat was alles wat nodig was om iets online te zetten. In theorie zou dat nu nog steeds kunnen, echter is het nu niet meer gebruikelijk.

Het moderne Front-End

Tegenwoordig wordt er veel gebruik gemaakt van tools en frameworks en worden er allerlei hulpmiddelen ingezet om het leven van een Front-End Developer gemakkelijker te maken. Hierdoor wordt er veel minder HTML, CSS en JavaScript geschreven, maar wordt er gebruik gemaakt van abstracties of tools.

Zo wordt JavaScript vervangen door TypeScript, JSX of Babel. CSS door SCSS, Less of Stylus en HTML door templates in bijvoorbeeld PUG of HAML. Maar wat ook veel gebeurt, is dat er gebruik wordt gemaakt van een framework dat deze keuzes al gemaakt heeft en waarbij de uiteindelijke HTML-, CSS-, en JS-files er minder toe doen, omdat dit slechts het resultaat is van een Build-step.

Bijblijven in je vak is dus een must. Als Competence Lead Front-End Development bij ShareValue is mijn doel dan ook om de ontwikkelingen bij te houden en te delen met het team Front-End Developers. Ieder teamlid beheerst weer een andere set aan tools en skills, waardoor we onderling veel van elkaar kunnen leren.

Belangrijke termen in Front-End

Met al die abstracties en tools zijn er zoveel termen ontstaan binnen Front-End, dat het amper bij te houden is wat het allemaal inhoudt. Daarom geef ik hieronder een handig overzicht met de meeste voorkomende termen en een korte uitleg.

• A11y (Accessibility)

Accessibility, of toegankelijkheid in het Nederlands, is de verzamelnaam voor het maken van toegankelijke websites en applicaties. Er is een set richtlijnen die gevolgd dient te worden op 3 verschillende niveaus. De richtlijnen heten WCAG (Web Content Accessibility Guidelines), de nieuwste versie is 2.1.

Het streven van de overheid is dat elke overheidswebsite tenminste toegankelijk is volgens WCAG2.1 niveau AA.

• Angular

Een Open Source framework ontwikkeld door Google. In 2020 is Angular 9 uitgekomen. De eerste versie, angular.js genaamd, komt uit 2010. In 2014 kwam Angular 2 uit; een geheel nieuw framework en niet backward-compatible met de eerste versie.

• Babel.js

Een Javascript library die ervoor zorgt dat nieuwere JavaScript-onderdelen uit ES5, ES6 en nieuwer worden omgezet naar JavaScript, dat gebruikt kan worden in oudere browsers als Internet Explorer 11.

• Bundler

Bekende Bundlers zijn Webpack, Parcel en Rollup. Een bundler is een library die via scripts taken uitvoert als het samenvoegen van bestanden, omzetten van bestanden en het creëren van deploy builds; een map die wordt aangemaakt met een uitvoerbare versie van een applicatie in een zo’n klein mogelijk pakketje. Meestal heet zo’n map “dist”, “generated” of “build”.

• CI/CD

Continuous Integration / Continuous Deployment is de verzamelnaam voor technieken en infrastructuren die ervoor zorgen dat nieuwe code kan worden uitgerold naar bijvoorbeeld een Test-, Acceptatie- of Productie-omgeving. Veelal zijn er hooks en andere triggers ingesteld, waardoor er automatisch Tests worden gestart als er een Pull Request wordt gedaan naar een branch op de GIT- server. Als de tests slagen, wordt er meestal een deployment gedaan naar de bestemde omgeving.

• CLI

Dit staat voor Command Line Interface. In plaats van bestanden bekijken in Windows verkenner kan je hiermee ook via de terminal opdrachten geven en uitvoeren.

Wordt veel gebruikt voor GIT, NPM, WebPack, Angular-cli, Vue-cli, create-react-app.

• CSS

Cascading Style Sheets, de techniek waarin je beschrijft hoe elementen van een website er uit dienen te zien. In 1996 ontwikkeld door Håkon Wium Lie en Bert Bos. Kan direct worden uitgevoerd in een browser. De nieuwste iteratie is CSS3, hoewel dit geen officiële standaard is.

• ECMAScript (ES5, ES6, etc.)

De officiële standaard van JavaScript is ECMAScript. ECMA (European Computer Manufacturers Association) is een organisatie die zich bezighoudt met standaardisatie. Jaarlijks worden er zaken toegevoegd aan een nieuwe versie van ECMAScript. Omdat de versienummers erg ingewikkeld werden, wordt de versie vernoemd naar het jaar waarin het uitgekomen is (dus ES2016, ES2017, etc.). Meestal wordt er vooral gekeken naar ES5 en ES6 omdat zij de grootste wijzigingen meebrachten, en het verschil maken tussen “klassieke JavaScript” en “moderne JavaScript”

• GIT

Versiebeheersysteem waarin wijzigingen binnen de mappen van een project worden bijgehouden en gedeeld kunnen worden door lokale wijzigingen door te sturen naar de GIT-server (zoals GitHub, TFS of Azure DevOps).

• HTML

Hyper Text Markup Language is een tekst-gebaseerde taal waarin je omschrijft hoe de structuur van een webpagina er uitziet. Laatste iteratie is uit 2014 en heet HTML5, wat veel nieuwe API’s en semantische elementen introduceerde.

• JAMstack

Een methode om websites en applicaties te bouwen met JavaScript, API’s en Markup. Veel gecombineerd met Static Site Generators als HuGo, Jekyll en Gatsby. Voor de API’s wordt vaak gebruikt gemaakt van headless CMS’en zoals Sanity, Story Blocks, Forrestry, of een CMS dat ook een API aanbiedt (zoals Wordpress of Expression Engine).

• JavaScript

Een scripting-taal dat direct uitgevoerd kan worden in de browser. Origineel geschreven en bedacht door Brendan Eich in 1995 (in 10 dagen). Nieuwere versies van JavaScript worden ECMAScript genoemd.

• JSX

De templating taal van React (staat voor JavaScript Extended). Hierdoor kun je HTML, Styles en JavaScript combineren in één bestand per component.

• Node.js

Node.js is een aangepaste versie van JavaScript die draait op een server. Hierdoor is het mogelijk om applicaties te bouwen in JavaScript, die bijvoorbeeld als service of als function aangeroepen kunnen worden.

• React

Een populair JavaScript framework, origineel gelanceerd door Facebook. Gebruikt JSX als templating taal.

• Sass

Sass is een CSS Preprocessor, waardoor je zaken kunt doen in je werkbestand die niet kunnen in CSS. De afkorting staat voor “Syntactically Awesome Style Sheets”. Sass moet eerst worden gecompileerd naar CSS. Afgelopen jaren zijn onderdelen van Sass overgenomen in CSS, waardoor de noodzaak minder groot is. Grootste voorbeeld hiervan zijn Variables (CSS custom-properties).

• Svelte

Svelte is een nieuw opkomend framework, met een focus op een kleine omvang en een goede developers experience. Bijzondere is ook, dat als je een SvelteJS applicatie Build om het uit te rollen, dat het hele framework verdwijnt. Er blijft enkel een index.html, een bundle.css en een bundle.js over.

• TypeScript

Een strongly typed versie van JavaScript. Dit houdt in dat alle variabelen die aangemaakt worden meteen een type meekrijgen. Op die manier weet de applicatie welk type waarde terug moet komen. Angular was het eerste grote framework die TypeScript implementeerde en inmiddels is het ook mogelijk om TS te gebruiken in combinatie met React of Vue.JS.

• Vanilla JavaScript

Een term om aan te geven dat er JavaScript wordt gebruikt zonder frameworks.

• Vue.JS

Het enige grote framework dat niet verbonden is aan een bedrijf: Vue is een populair framework met een grote community. Gelanceerd in februari 2014 door Evan You, en sindsdien steeds meer gegroeid tot wat het nu is.

Conclusie

Natuurlijk zijn er nog veel meer begrippen. Dit zijn enkel de meest voorkomende moderne Front-End begrippen. Technieken die ik zelf veel gebruik zijn React, Vue, Sass en Git. En daarbij ontkom je niet aan webpack, cli en dergelijke. Ook probeer ik steeds vaker JAMstack toe te passen door te werken met bijvoorbeeld Gatsby, eleventy, of forrestry. Je merkt erg dat de markt steeds meer op zoek gaat naar vernieuwingen binnen de Front-End, en daar springen ik en mijn collega’s graag op in.

Heb je onze andere blogs over Front-End ook al gelezen? Je vindt ze hier allemaal bij elkaar. Bijvoorbeeld de blog over JAMstack.

Wil je meer lezen over een ander Front-End onderwerp? Laat het mij weten met een berichtje.