menu sluiten
Contact

Antwerpen
Veldkant 33B, 2550 Kontich
België +32 (0)3 444 11 08

Breda
Rithmeesterpark 50-A1, 4838GZ Breda
Nederland +32 (0)3 444 11 08

info@jstack.eu

1 February 2022

4 redenen om je eigen component library te bouwen

Het bouwen van een eigen component library kan het ontwikkelingsproces makkelijker en minder complex maken voor je team.

Waarom zouden we nog een eigen component library bouwen? Het is een vraag die ik mezelf bij elk project stel. Kunnen we niet beter een bestaande UI library gebruiken zoals bootstrap, Material-UI of iets anders? Kunnen we projecten op die manier niet sneller afronden?

In dit artikel leg ik uit waarom je beter twee keer nadenkt vooraleer je een bestaande component library gebruikt, en waarom je er misschien beter voor kiest om je eigen component library te bouwen.

Artikel door Tom Buyse

Complexiteit

Een bestaande component library wordt gebouwd om te voldoen in verschillende situaties. Dat kan positief zijn, want je kan zo’n component library in verschillende soorten projecten gebruiken. Maar er is ook een keerzijde: die veelzijdigheid kan namelijk betekenen dat het jouw project een stuk complexer maakt.

Ik neem even een button element als voorbeeld. De component library geeft je een aantal varianten: primair, contour, uitgeschakeld, kleine of grote buttons, icon buttons en groepen van buttons. Al deze varianten zijn beschikbaar op de button API:

Je ziet hoe de lijst met opties voor button API’s snel kan groeien. De vraag is: heb je al die opties wel nodig wanneer je net start met een nieuw project? Dat kan het voor nieuwe gebruikers moeilijk maken om grip te krijgen op zo’n uitgebreide en complexe library.

Tijd

Dit moet wel een voordeel van bestaande component libraries zijn, toch? Wanneer je start met een project, is elk component immers vooraf al gebouwd voor jou.

Maar het is eigenlijk genuanceerder dan dat. Zoals ik eerder al heb aangehaald, hebben UI libraries een vrij complexe API omdat ze zo veel opties toelaten in de componenten. Dat zorgt voor een steile leercurve.

Als je jouw eigen component library bouwt, heb je initieel meer tijd nodig om de verschillende componenten aan te maken. Maar je zal ondervinden dat je die tijd snel terugwint wanneer het project vordert. Je hebt volledige kennis van je eigen library en je weet hoe dingen intern werken, waardoor je een steile leercurve vermijdt.

Het is wel interessant om te kijken naar de opkomende ‘unstyled libraries’ zoals Headless UI, Radix UI, … Deze hebben in mijn ogen een mooie balans tussen genoeg basis voorzien, maar nog steeds open laten om je eigen smaak toe te voegen voor het project.

Flexibiliteit

Wanneer je een nieuw project aanneemt, is er meestal door een designer beslist over een aangepaste look en feel. Als een developer moet je dan componenten creëren met dezelfde look en feel. In de meeste UI libraries is er daarvoor ondersteuning voorzien onder de vorm van thema’s. Dat betekent vooral dat het kleurenpalet dat voor alle componenten gebruikt wordt, aangepast kan worden. Je kan dan bijvoorbeeld een regel instellen dat alle primaire buttons turquoise worden in plaats van blauw.

Ik heb zelf al ervaren dat het vaak niet stopt bij de kleuren alleen – er moeten ook wijzigingen aangebracht worden aan het uiterlijk van buttons, inputs en checkboxes. Als je een UI library gebruikt, moet je dan bepaalde classes overschrijven (die hopelijk niet te veel !important’s bevatten) om dat te kunnen realiseren. Het kan best wat tijd in beslag nemen om de bestaande componenten er te doen uitzien zoals de designer het wil.

In een eigen custom component library is dat niet echt een probleem. Aangezien je die vanaf nul opbouwt, moet je geen rekening houden met bestaande styling.

Controle

Dit hangt een beetje samen met de flexibiliteit waarover ik het eerder al had. Je kan een eigen custom component library bouwen die aangepast is aan het project waarop je op dat moment werkt.

Je hebt dan volledige controle over welke varianten jouw buttons moeten hebben, hoe je input eruit moet zien, of welke animatie je wil gebruiken voor je checkboxes. Als je een eigen component library maakt, evolueert die mee met je project.

Wie heeft er baat bij het gebruiken van een bestaande component library?

Er zijn dus veel argumenten waarom iemand er beter voor kan kiezen om een eigen component library te maken. Waarom zou je dan nog kiezen voor een bestaande component library?

Er zijn twee use cases waarin het zeer logisch is om voor een bestaande library te kiezen.

Eerst en vooral: als het gaat om een kleinschalig project of een project met een beperkt budget, dan kan je beter opteren voor een bestaande component library. De kans is groot dat je in dit geval geen voordeel haalt uit een custom library.

Tenslotte kunnen UI libraries een optie zijn wanneer je een enterprise applicatie bouwt voor intern gebruik waarbij de look en feel geen prioriteit is. Wees je er wel van bewust dat er een steile leercurve is.

Slotopmerkingen

Hopelijk heeft dit artikel je doen nadenken of het gebruik van een bestaande UI library wel de beste optie is voor jouw project. Je kan er ook voor kiezen om je eigen library te bouwen, en dat kan zeker voordelen opleveren in bepaalde situaties.

Meer weten?

Neem contact op met Tom. Hij denkt graag met u mee in een persoonlijk gesprek.