Pattern Lab: de kracht van component-based design

Back in the old days bestond een website uit een 10-tal pagina’s die elk stuk voor stuk werden opgemaakt en eventueel zelfs apart gedesigned werden. Elke pagina was een apart element op zich, dat los stond van andere zaken en best op één bepaalde manier bekeken kon worden.

Fast forward naar vandaag, waar we websites bezoeken op alle mogelijke toestellen, van smartwatches over smartphones en tablets tot desktops en zelfs breedbeeldtelevisies. Websites bestaan bovendien al lang niet meer uit een tiental pagina’s, maar uit duizenden pagina’s die (gelukkig) niet meer een voor een worden aangemaakt. Om die veelheid aan informatie te structureren maken we landingspagina’s, overzichtspagina’s en meer. 

Maken we bijvoorbeeld een nieuw event aan op de website, dan wordt dat automatisch opgenomen op de kalenderpagina. Een ingreep die vroeg handmatig moest gebeuren.

Kortom: als we een ‘pagina’ aanmaken op de website, zal die content vaak ook in andere vormen verschijnen op andere plaatsen doorheen het platform. Een pagina is zo geen losstaand element meer, maar een geheel dat bestaat uit verschillende componenten van inhoud. 

Componenten in plaats van pagina's

Voor designers brengt dat de nodige uitdagingen met zich mee. We moeten niet alleen bedenken hoe een pagina er uitziet op desktop of op mobiele toestellen, maar ook hoe deze content eruit kan zien op andere plaatsen. 

Daarom designen we nu componenten in plaats van pagina's. Om hier structuur in te brengen moeten we dus afstappen van een page-centered design. We maken componenten en combineren die op alle mogelijke manier in een pagina.

Wat is atomic design?

Atomic design is een methodologie die interfacedesigners toelaat componenten te definiëren en te structureren.

Binnen atomic design hergebruiken we componenten om andere componenten en uiteindelijk pagina’s op te bouwen. Dit geeft ons een component library met componenten die we op alle mogelijke manieren kunnen combineren.

Vanuit het perspectief van een designer maken we eigenlijk een stijlgids waarin we alsmaar kleinere elementen als aparte component zien, en combineren op verschillende niveaus. 

Componenten samenbrengen met Pattern Lab

Pattern Lab is een statische sitegenerator die deze componenten combineert in een 'levende' stijlgids. In Pattern Lab maken frontend-developers deze componenten aan en combineren ze. 

Hoe werkt Pattern Lab?

Pattern Lab volgt de principes van atomic design, maar kan aangepast worden naar eigen wens. Er is een node- of PHP-versie, en templating kan gebeuren met moustache templates of twig. 

Componenten worden gedefinieerd binnen Pattern Lab, en van daaruit wordt een statische site gegenereerd die al deze componenten structureert en toont in de browser. Kijk bijvoorbeeld eens op http://demo.patternlab.io/.

Hoe zien zo'n componenten eruit?

Een component bestaat uit:

• een template;
• CSS en JS bestanden om het design van de component te maken;
• (optioneel) democontent om in de statische site weer te geven.

Voorbeeld: Link atom

• link.twig: template

• _link.scss: CSS

• link.yml: democontent

Voorbeeld: card organism

• card.twig: template. Dit bestand combineert verschillende andere molecules en/of atomen in één organisme.

• _card.scss: CSS

• card.yml: democontent

Deze bestanden worden dan door Pattern Lab gerenderd en in de statische site getoond. 

Op deze manier kan een frontend-developer alle componenten aanmaken en combineren om de designs te vertalen naar de browser. 

Voordelen voor developers

Zodra we alle designs vertaald hebben naar frontend-componenten, krijgen we een statische site die alle componenten toont, combineert en vertaalt naar de browser. Eigenlijk hebben we op dat moment een echte styleguide van het project waarin alle designs vertaald zijn.

In onze backend-implementatie moeten we nu alleen de juiste componenten aanroepen en daarin de juiste data doorgeven.

Het grote voordeel voor frontenders is dat ze geen kennis moeten hebben van het gebruikte backend-systeem (Drupal, Symfony …), maar dat ze zich kunnen concentreren op frontend-development. 

Andere voordelen van Pattern Lab

Ook planningsgewijs kunnen frontend- en backend-development losgekoppeld worden. Traditioneel was de frontend-developer de laatste in de rij, nu kan hij of zij al aan het begin van het project starten. Er kan dus ook snel feedback gegeven worden. 

Verder maakt een ‘component library’ en een visualisatie daarvan met Pattern Lab consistentie binnen een project veel eenvoudiger. Omdat we componenten apart definiëren en hergebruiken, worden ze op alle gebruikte plaatsen op exact dezelfde manier weergegeven en moeten ze maar één keer gedefinieerd worden.

Dat bevordert het gebruiksgemak en de consistentie binnen de website. Kortom: werken met Pattern Lab draagt bij aan een betere site en minder stress.