Definitie: De frontend is het deel van een website of applicatie dat gebruikers zien en waarmee ze werken, zoals schermen, knoppen, formulieren en menu’s. De frontend draait in de browser of op het toestel en praat met de backend, waar gegevens worden opgeslagen en verwerkt.
In het kort
- Frontend betekent letterlijk voorkant: alles wat een gebruiker van een applicatie ziet en aanraakt.
- Een webfrontend is gebouwd met HTML voor de structuur, CSS voor de opmaak en JavaScript voor het gedrag.
- Bekende frontend-frameworks zijn React, Vue.js, Angular en Svelte; Tailwind CSS en Bootstrap helpen bij de opmaak.
- Een frontend developer bouwt de gebruikersinterface; een backend developer de server, database en logica erachter.
Wat is een frontend?
De frontend is de voorkant van software. Bij een webapplicatie is dat alles wat in je browser verschijnt: de indeling van het scherm, de knoppen, de formulieren, de overzichten en de meldingen. IONOS beschrijft de frontend als de grafische gebruikersinterface van een website of app, de laag waar gebruikers informatie zien en ermee werken.
IONOS gebruikt een herkenbare vergelijking: de frontend is als de gevel, de tafels, het menu en de bediening van een restaurant. De backend is de keuken en het management. De gast ziet alleen de voorkant, maar zonder keuken komt er niets op tafel.
De term is ouder dan het web. Computer Hope noemt Windows 3.11 als voorbeeld: een grafische frontend voor MS-DOS, waarmee gebruikers niet meer met de opdrachtregel hoefden te werken.
Frontend en backend: wat is het verschil?
| Frontend | Backend | |
|---|---|---|
| Wat het is | De voorkant die de gebruiker ziet | De achterkant op de server |
| Waar het draait | In de browser of op het toestel | Op een server |
| Taken | Schermen tonen, invoer verwerken, reageren op klikken | Gegevens opslaan, berekenen, rechten controleren, koppelingen |
| Talen | HTML, CSS, JavaScript of TypeScript | Bijvoorbeeld PHP, Python of JavaScript via Node.js |
| Frameworks | React, Vue.js, Angular, Svelte | Laravel, Symfony, Django, Express |
Een ontwikkelaar die beide kanten beheerst, heet een full-stack developer.
Welke technieken horen bij de frontend?
- HTML legt de structuur vast: koppen, alinea’s, formulieren en knoppen.
- CSS bepaalt de opmaak: kleuren, lettertypes, ruimte en hoe de pagina zich aanpast aan een telefoon.
- JavaScript maakt de pagina interactief, zoals een menu dat uitklapt of een lijst die zich direct bijwerkt.
Daarbovenop gebruiken ontwikkelaars frameworks. Volgens Droptica zijn Angular, React en Vue.js de bekendste; Vue.js is gemaakt door Evan You. IONOS noemt ook Svelte, en voor de opmaak Tailwind CSS en Bootstrap.
Wat doet een frontend developer?
Een frontend developer zet een ontwerp om in werkende schermen. Volgens Droptica gaat het om de lay-out, kleuren en lettergroottes, interactieve onderdelen zoals menu’s en dropdowns, en de manier waarop de pagina reageert op wat de gebruiker doet. Daarnaast zorgt een frontend developer voor:
- Responsive design, zodat de applicatie werkt op telefoon, tablet en computer.
- Toegankelijkheid, zodat ook mensen met een beperking de applicatie kunnen gebruiken.
- Snelheid, zodat schermen vlot laden en reageren.
- Koppeling met de backend, zodat gegevens op het juiste moment worden opgehaald en opgeslagen.
Waarom de frontend telt in een bedrijfsapplicatie
Voor de gebruiker is de frontend de applicatie. Een sterke backend met een onduidelijke voorkant leidt tot fouten en omwegen. Goede frontends voor zakelijk gebruik maken de volgende stap duidelijk, tonen alleen de informatie die nodig is en controleren invoer direct. Een medewerker die tien keer per dag hetzelfde formulier invult, merkt elk overbodig veld en elke onduidelijke knop.
Wat betekent dit voor jouw project?
Bij een nieuw idee begin ik met de vraag wie het gaat gebruiken en welke taak die persoon als eerste moet kunnen afronden. Daar volgt de frontend uit: welke schermen nodig zijn, welke informatie erop staat en wat er gebeurt na een klik. In de blauwdruk maak ik daarom schermschetsen, zodat je ziet hoe de applicatie werkt voordat er wordt gebouwd.
Bij Capaciteitberekenen.nl, met berekeningen voor onder meer olie- en vetafscheiders en infiltratie, is de bouwles: maak de invoer begrijpelijk en de uitkomst bruikbaar. Dat is in de kern frontendwerk.
Werkt je huidige software, maar is het lastig in gebruik? Stuur me voor wie het is, wat er nu gebeurt en waar het vastloopt. Dan bepalen we samen de logische eerste stap. Lees ook wat er komt kijken bij een webapplicatie bouwen.
Veelgestelde vragen over frontend
Wat betekent frontend?
Frontend betekent voorkant. Het is het deel van een website of applicatie dat gebruikers zien en waarmee ze werken, zoals schermen, knoppen en formulieren.
Wat is het verschil tussen frontend en backend?
De frontend is de voorkant die in de browser of op het toestel draait. De backend draait op de server en zorgt voor de opslag en verwerking van gegevens, de rechten en de koppelingen met andere systemen.
Wat doet een frontend developer?
Een frontend developer bouwt de gebruikersinterface van een website of applicatie met HTML, CSS en JavaScript. Hij zorgt dat schermen goed werken op elk apparaat, toegankelijk zijn en de juiste gegevens uit de backend tonen.
Verwante termen
Backend · Full-stack · Webapplicatie · Wireframe · Mockup · Klikbaar prototype
← Terug naar de kennisbank