Schep duidelijkheid door een stijlgids!

Heb je ooit dubbele componenten gebouwd? Of heb je je ooit bij een team aangesloten en je afgevraagd welke componenten je kunt gebruiken? Al deze problemen hadden voorkomen kunnen worden door een stijlgids aan je app toe te voegen! Ik zal je een voorbeeld laten zien van hoe ik dit heb gedaan en waarom het waarde toevoegt aan jouw projecten. Een vereenvoudigde voorbeeld (Flutter) repo is hier te vinden.

Opmerking: Het style-guide concept kan worden toegepast in elke soort applicatie en is niet alleen gebonden aan Flutter.

Waarom een stijlgids?

Door een stijlgids toe te voegen maakt u het voor alle teamleden gemakkelijker om de pagina's die uw ontwerper u aanlevert te implementeren. Je maakt een 'referentie'-pagina die elk onderdeel bevat dat tot nu toe is gebouwd. Het geeft u visueel, en dus duidelijk, inzicht in welke componenten u als ontwikkelaar tot uw beschikking heeft om mee te werken. Ik zal u een van onze voorbeelden laten zien!

‍

‍

Zoals je ziet krijg je direct een overzicht van alle componenten die ontwikkelaars ter beschikking hebben en hoe je deze componenten kunt relateren aan het ontwerp dat de ontwerper heeft geleverd. Zoals je ziet hebben alle componenten hun class-namen als titels boven de presentatie van het component zelf. Dit voorkomt dat de ontwikkelaar in de broncode van de stijlgidspagina moet duiken om de exacte klassenaam van de component die hij/zij wil gebruiken te achterhalen.

Voeg het toe aan het begin van een project

Ik raad sterk aan een stijlgids toe te voegen aan het begin van een project en deze te laten meegroeien met je project. Dit maakt het gemakkelijker omdat het in kleine stukjes groeit, net als je applicatie. Bovendien biedt het u en uw team vanaf het begin alle voordelen. Dat bespaart tijd, geld en frustratie!

Up-to-date houden

Het is echt belangrijk om de style-guide up-to-date te houden, want wat is het nut van de style-guide als er componenten in ontbreken? In dat geval bouwt de ontwikkelaar misschien een dubbel component of moet hij/zij nog steeds de juiste componenten opsporen door door de app te navigeren en in de broncode te duiken. Een verspilling van tijd en geld!

Maar ik weet dat dit lastig kan zijn en gemakkelijk vergeten wordt. Dus daarom adviseer ik je om het toe te voegen aan een checklist in je pull request (PR) sjabloon.

En voor degenen die niet weten wat PR's zijn, lees dan wat het is, want het is een van de meest efficiënte hulpmiddelen om u te helpen code van hoge kwaliteit te handhaven in uw toepassingen.

Maak het gemakkelijk toegankelijk

Mijn laatste tip is om de stijlgidspagina gemakkelijk toegankelijk te maken. In de meeste van mijn projecten maak ik die graag zichtbaar in het hamburger-menu. Vergeet niet dit alleen in debug-modus te doen! Om je een voorbeeld te geven heb ik een voorbeeld (Flutter) repo opgezet [hier](https://github.com/Baseflow/flutter-style-guide).

Opmerking: Het style-guide concept kan worden toegepast in elke soort applicatie het is niet alleen gebonden aan Flutter.

‍

Dus nu je mijn oplossing kent, zijn er vast nog wel wat verbeteringen aan te brengen. Als je er een paar weet, deel ze dan met me en we kunnen deze blogpost samen verbeteren!

Je kunt me ook vinden op Twitter(@jop_middelkamp) en LinkedIn of zelfs per mail naar jop@baseflow.com. Laat je feedback achter als je er hebt!