Componenten zijn de nieuwe pagina templates. Door de technische ontwikkeling op het web zijn we steeds beter in staat om in isolatie kleine stukjes functionaliteit te bouwen. En dat komt de doorlooptijd en kwaliteit ten goede. Daarnaast sluit het fantastisch aan bij het principe van “design systems” wat een integraal onderdeel is van ons ontwerpproces.
Eerlijk is eerlijk, de term component is beetje vaag. Eigenlijk zijn het kleine, geïsoleerde stukjes van een website of applicatie met een eigen een structuur, opmaak en interactie. Zo kan je een component hebben voor de hoofdnavigatie van een website, en weer een ander component voor de “add to cart” button. Elke component kan ook weer uit verschillende sub-componenten bestaan. Door de verschillende componenten te combineren bouw je een volledige pagina binnen je applicatie of website op.
Met de komst van Web Components is het mogelijk om “out of the box” componenten te bouwen die in elke moderne browser werken. Toch zien we dat component libraries vaak afgestemd worden op een specifiek frontend framework. Zo hebben wij de afgelopen jaren UI component libraries gerealiseerd voor Angular, React, Vue.js en Ember.js. De keuze voor het framework komt vaak tot stand in overleg met de klant. Op die manier combineer je de voordelen van het werken met componenten met de kracht van een framework.
Wij vinden het belangrijk om tijd te steken in dingen die echt een verschil maken. Bij het implementeren van een nieuwe gebruikersinterface is het dan ook gunstig als je gebruik kan maken van componenten die je eerder hebt gemaakt. Met een component library hebben ontwerpers, ontwikkelaars maar ook de product owner één plek waar alle visuele elementen samenkomen. Alleen wil je deze componenten natuurlijk wel inzichtelijk en makkelijk toegankelijk hebben. Daar komt Storybook om de hoek kijken.
Storybook geeft een overzicht van alle componenten die onderdeel zijn van het design system. In één oogopslag zie je welke componenten beschikbaar zijn en welke varianten er bestaan. Op die manier is het voor iedereen makkelijk om bestaande componenten toe te passen, of op voort te bouwen.
Het ontwerpen en bouwen van gebruikersvriendelijke interfaces is een vak apart. Daarom zien wij vaak dat een component library in combinatie met Storybook als nieuw overdrachtspunt tussen teams fungeert. Zo kunnen teams die veel ervaring hebben met het realiseren van backend systemen toch een goede gebruikerservaring realiseren, doordat ze het ontwerp en implementatie van de gebruikersinterface aan een expert overlaten. Door middel van Storybook hebben ze vervolgens toegang tot alle aanwezige “blokken” en uitgewerkte templates die makkelijk te integreren zijn met het backend systeem..
