Wat is Front End Architectuur? En waarom is dat belangrijk? Er is nog veel onduidelijk over front end architectuur. In dit artikel probeer ik inzicht te verschaffen in de waarom dit belangrijk zou moeten zijn. Natuurlijk zorgt een goede developer voor mooie code, voor code die andere developers begrijpen. Maar waarom zou dit niet gelden voor front-end developers? Hun code wordt in de praktijk door veel andere developers overgenomen of uitgebreid ( met de beste bedoelingen).
Concreet zorgt goede front end architectuur zorgt voor:
- Schaalbaarheid
- Overzicht
- Toegankelijke c ode
- Herbruikbare code
- Bestands structuren
Schaalbaarheid
Omdat tegenwoordig eigenlijk iedere site responsive dan wel adaptive met een fluid grid is het erg belangrijk om na te denken over de schaalbaarheid van je elementen en je code. Een blok kan op desktop de volledige breedte innemen terwijl deze verborgen wordt op je mobiel. Dit zorgt er voor dat je in de structuur van je pagina’s rekening moet houden.
Overzicht
Iedere klant wil een component libary, een centrale plek waar alle ontwikkelde front end componenten zichtbaar zijn voor alle developers. Dit kan de wild groei en aan classes en classnames tegen gaan. Een developer kan een bestaand componentje uit de libary halen, deze aanpassen of uitbreiden en vervolgens weer toevoegen aan de libary voor andere developers. Om dit mogelijk te maken moeten componenten los van de structuur ontworpen worden. Dit vergt nogal wat discipline bij de ontwerpers en user interface designers. Een component ziet er immers altijd hetzelfde uit, onafhankelijk van de locatie binnen de site.
Toegankelijke code
Code schrijven kan iedere developer, vaak ook nog wel wat front end maar onderhoud bare en toegankelijk code schrijven is een vak apart. Er bestaan heel wat theorieën en modellen die hieraan een houvast proberen te geven zoals bijvoorbeeld SMACSS (Scalable and Modular Architecture for CSS). Het interpreteren en implementeren van deze methodologie is moeilijker dan het lijkt. Toch is goed geschreven code voor iedere developer vanzelf en voor zich zelf sprekend. Er hoeft geen weg gezocht te worden door een oerwoud van specifieke classes en classnames.
Herbruikbare code
CSS stelt ons in staat om code en styling van elkaar gescheiden te houden. Toch blijkt dit in de praktijk vaak lastig. Blokken worden gestyled terwijl dit eigenlijk structuur elementen zijn. Om dit soort basis elementen onder houdbaar te ontwikkelen is het van belang dat dit in een vroeg stadium gesplitst wordt. Immers dan is de styling van een website in een muisklik te veranderen. Dit vereist naast kennis van de theorie ook een gedegen praktijk kennis omdat er immers ontworpen / gebouwd moet worden met de mogelijkheid tot doorontwikkeling en uitbreiding in het achterhoofd.
Bestands structuren
Naast een praktische indeling van mappen en bestanden is het van belang om in de gebruikte bestanden toelichting te geven op de ontwikkelde code. Dit zorgt er voor dat de code toegankelijker wordt en dat deze ook voor de toekomst onder houdbaar is. De ontwikkelaar heeft immers aangegeven waarom of met welke idee bepaalde code is ontwikkeld. Daarnaast zorgt dit ervoor dat dit ook gemakkelijk via versie control beheerd kan worden.
Dit zijn de meeste belangrijk basis principes van Front End Architectuur. Natuurlijk is het vakgebied nog in ontwikkeling en gaan de ontwikkeling steeds sneller. Het beseft van structuur en beheersbaarheid wordt steeds belangrijker. Helemaal als je weet hoeveel sommige bedrijven kwijt zijn aan beheersbaarheid omdat e nog een oude website hebben die niet met deze principes is opgezet.