26 november, 2018

Als je een website of applicatie bouwt, is component-based design the way to go. Bij ons zit het inmiddels ingebakken in onze dagelijkse flow. Maar wat is het precies? En waarom geloven wij er heilig in?

Component-based design: wat is het?

Component-based design (of component-based development) is – de naam verraadt het al – ontwerpen aan de hand van losse onderdelen. Die onderdelen zijn in dit geval stukjes software die je gebruikt om de user interface (UI) van een website of applicatie te ontwikkelen.

Simpel gezegd: bij component-based design hak je een ontwerpproces in kleinere delen. Elk deel is een onafhankelijk element met een naam en een duidelijk afgekaderde functie.

Klinkt vaag? We proberen het wat duidelijker te maken met de theorie van Brad Frost, webdesigner en schrijver van het boek Atomic Design.

Bouwen met atomen

Een website of applicatie ontwikkelen aan de hand van componenten is als bouwen met atomen, zegt Frost. Hij onderscheidt hierin vijf fasen, met elk een eigen element:

  • Atomen
  • Moleculen
  • Organismen
  • Templates
  • Pagina's

De kern van Frost's theorie is eenvoudig: vanuit een klein element werk je in stappen toe naar een steeds groter element – en uiteindelijk naar het eindresultaat.

Het kleinste element, in dit geval een atoom, heeft op zichzelf weinig nut. Maar samen met andere atomen vormt het een molecuul: al een stuk bruikbaarder. Met verschillende moleculen vorm je weer een organisme – zo kom je steeds een stapje verder.

Uiteindelijk bouw je stap voor stap je eindproduct: Frost noemt dit een pagina.

Compononent-based-design-stappenplan

Kleine blokjes

Als je de methode van component-based design volgt, kun je zelf een naam bedenken voor elk element. In plaats van 'atomen' en 'organismen' kun je bijvoorbeeld ook kiezen voor 'elementen' en 'composities'.
De essentie van component-based design: je deelt het ontwerp van een user interface op in kleinere bouwblokjes. Maar waarom zou je dit doen?

Waarom component-based ontwerpen?

Als je een website of applicatie bouwt, kun je niet om component-based design heen. Dit zijn de vijf grootste voordelen:

1. Beheren en aanpassen wordt eenvoudiger
Een website of applicatie die je bouwt met componenten kun je beter beheren. Een bug is zo verholpen en een update snel uitgevoerd. Je hoeft er alleen maar een specifiek stukje voor te vervangen of aan te passen.

Vergelijk het met LEGO: met een berg losse blokjes kun je in principe alles bouwen. Je kunt vervolgens ook net zo makkelijk iets anders van diezelfde berg blokjes maken. Maar wat als je de blokjes tijdens het bouwen aan elkaar plakt?

Je bouwwerk is superstevig, dat wel. Maar een los blokje vervangen of blokjes hergebruiken kan niet meer. Dat is precies waar de kracht van componenten zit.

Opnieuw beginnen omdat ergens een foutje zit? Bij component-based design hoeft dat niet.

2. Websites en applicaties zijn beter schaalbaar
Schaalbaarheid is een element waar je als ontwerper niet omheen kunt. Een website of applicatie moet gewoon op allerlei apparaten van verschillend formaat te gebruiken zijn.

Een ontwerp dat bestaat uit losse stukjes is makkelijker aan te passen voor een ander platform. Omdat je componenten kunt hergebruiken, ontwikkel je sneller en gestructureerder een goed schaalbare applicatie of website.

3. Je kunt flexibeler ontwikkelen
Bij component-based design combineer je verschillende voorgedefinieerde bouwblokjes. Zo kom je tot je uiteindelijke ontwerp. Alle componenten bevinden zich in een library, waar het hele team bij kan. Gedurende het ontwerpproces kan elke ontwerper of ontwikkelaar componenten toevoegen en aanpassen.

Component-based ontwerpen sluit naadloos aan bij een iteratieve (letterlijk: herhalende), agile manier van ontwikkelen. De manier van samenstellen maakt het makkelijk om aanpassingen te doen binnen je design. Het maakt een ontwerp flexibel: de combinaties die je kunt maken zijn vaak eindeloos.

4. Er is geen onnodige complexiteit
Als je een ontwerp opdeelt in kleinere stukjes zijn de verschillende onderdelen minder afhankelijk van elkaar. Hierdoor wordt je ontwerp automatisch minder complex. Dit maakt het doorontwikkelen van je product of het aanpassen van elementen veel minder ingewikkeld.

5. Je verbetert de duurzaamheid van je product
Het om de zoveel jaar volledig vervangen van een website of applicatie is een tijdrovend en kostbaar proces. Gelukkig hoeft dit helemaal niet. Tenminste, als je een component-based ontwerp hebt.

Als je ontwerpt of ontwikkelt met behulp van losse componenten, kun je een product veel langer blijven gebruiken. Op het moment dat het nodig is vervang je een stukje software. Zo hou je een website of applicatie relatief eenvoudig en betaalbaar up-to-date.

Hoe gaat dat bij Synetic?

Component-based design kun je op verschillende manieren toepassen. De ontwikkeling van nieuwe tools voor ontwikkelaars gaat de afgelopen jaren als een trein. Er zijn steeds meer mogelijkheden. Dat maakt het makkelijker om een theorie waarin je gelooft te blijven volgen.

Je kunt alleen de gedachte achter component-based design opnemen in je werkwijze, maar ook concretere stappen nemen. Dat is de weg die we bij Synetic kiezen. Ons belangrijkste hulpmiddel? Een pattern library.

Handige toolset

Een pattern library (letterlijk: patronenbibliotheek) is een uitgebreide gereedschapskist voor ontwerpers. De tools die erin zitten maken het makkelijker om een user interface te bouwen en daarbij de componenten van je ontwerpproces gescheiden te houden.

Waar ontwerpers vroeger vaak alleen een visuele stijlgids gebruikten (een afbeelding of een brand book), is dat tegenwoordig anders. Als designer is het ideaal om alles direct online beschikbaar te hebben. Op die manier krijg je een 'levend document' dat meerdere teams – denk aan marketing, development en sales – tegelijk kunnen inzien.

Je kunt met zo'n toolset makkelijker en sneller aanpassingen doorvoeren, zonder een volledig nieuwe stijlgids uit te hoeven brengen. Ontwerpers bij talloze organisaties (van BBC tot Apple en van Greenpeace tot Google) werken ermee – dat zegt eigenlijk wel genoeg.

Allerlei uitvoeringen

Een pattern library vind je in verschillende uitvoeringen, van diverse makers. Drie bekende zijn PatternLab, Fractal en Fabricator. Bij Synetic maken we veel gebruik van PatternLab – vooral omdat het goed aansluit bij Drupal.

Pattern-libraries

Even tussendoor: soms is een compleet framework niet nodig, en ontwikkelen we een website of applicatie volledig custom. Maar anders: PatternLab.

Fake data

Met een pattern library bouw je een online interface die los staat van je business-logica of zelfs je CMS-logica (je back-end). Da's handig. Het maken van een prototype en het valideren van je ontwerp is veel makkelijker: je maakt alleen de online interface en faket eigenlijk de getoonde data.

Wil je een koppeling maken met een CMS, custom systeem of API? Dat kun je op een later moment doen, als je zeker weet dat de betrokken partijen of gebruikers tevreden zijn met wat je ze hebt voorgeschoteld.

Je kunt het implementeren van een pattern library zien als een investering voor de toekomst, maar ook als een manier om een naslagwerk bij te houden van wat je maakt.

Toekomstbestendig ontwikkelen

We kunnen nog uren doorgaan over component-based design. Dat doen we je niet aan.

Maar waarom vinden we het zo belangrijk dat jij weet dat wij op deze manier werken?

Het ontwikkelen van een website of applicatie is op zich niet ingewikkeld. Wel wordt de theorie erachter steeds doordachter. Nadenken over waarom en op welke manier je ontwikkelt, is onderdeel geworden van het vak.

Tenminste, zo zien wij het. Synetic kiest daarbij heel bewust voor component-based design.

Steeds hogere eisen

User interfaces worden steeds belangrijker. Dat krijgen wij natuurlijk van dichtbij mee. Logisch: een website of applicatie valt of staat met de ervaring van de gebruiker. De eisen worden dan ook constant opgeschroefd.

Gebruikers zoeken op diverse manieren toegang – en we willen ze op geen enkel apparaat afschepen met een stroperige interface. Doordat we al tijdens het ontwerpen de gebruikerservaring in de browser zien, kunnen we snel en gestroomlijnd ontwerpen.

Duurzaam, solide en consistent

Nog zo'n thema: de nieuwe AVG-wet. Ook in dit kader willen we dat een website of applicatie voldoende toegankelijk en inzichtelijk is. Het is goed om helder te hebben welke onderdelen minder toegankelijk zijn en waar we aanpassingen zouden moeten doen. Een component-based ontwerp maakt dit perfect mogelijk.

Ontwikkelen met een component-based ontwerp geeft onze producten een duurzame technische architectuur. Het bespaart tijd én het scheelt kosten. Daarnaast zijn we verzekerd van een solide, consistente gebruikerservaring over alle producten die we ontwikkelen.

Component-based design: het wérkt

Elke dag weer merken we hoe een slimme theorie ons werk in de praktijk makkelijker maakt. We hoeven aanpassingen maar op één plek door te voeren – dat scheelt enorm. Ook is het makkelijker te achterhalen waar een eventuele fout zit.

Bij elk onderdeel dat we maken, denken we na over de herbruikbaarheid ervan. Ook kijken we naar de mogelijkheden voor het opsplitsen van componenten, waardoor we in de toekomst tijd kunnen besparen.

Kom je over twee maanden bij ons met een specifieke wens? Dan is de kans groot dat we snel een pasklare oplossing hebben. Eentje waar je nog jaren gebruik van kunt blijven maken. En dat allemaal dankzij een uitgekiende ontwerpmethode.

Hadden we al gezegd dat we fan zijn van component-based design?