Als freelance softwareontwikkelaar werk ik voortdurend aan React front-end dashboard-omgevingen. Bijvoorbeeld, een admin-pagina om alle gebruikers van een SaaS-platform te beheren. Om te voorkomen dat ik continu dezelfde componenten voor ieder project ontwikkel, heb ik een componenten-library ontwikkeld: Peggirkit.
Gebruikte front-end ontwikkeltechnologieën
Bij het ontwikkelen van deze component library heb ik gebruik gemaakt van een reeks technologieën.
React & Typescript
In de basis is het een Node.js, NPM, React & Typescript project. In principe gebruik ik standaard Typescript in mijn Javascript (ES6) projecten.
Vanwege de toevoeging van types, levert Typescript een groot voordeel op. Door de juiste typehints te definiëren aan de component-props, is het voor gebruikers van Peggirkit intuïtiever om de library te gebruiken. Daarnaast maakt het de code een stuk robuuster en minder foutgevoelig.
Babel
Babel transpileert alle componenten vanuit ES6 tijdens het build-proces. Vervolgens
worden deze in een aparte dist-map geplaatst. Dit gebeurt na het starten van een eigen script uit
package.json: npm run dist.
Tailwind CSS & Tailwind Plus
Voor de vormgeving en het stijlen van de front-end componenten, maakt Peggirkit van Tailwind CSS gebruik. Tailwind CSS biedt voorgedefinieerde CSS-classes die het mogelijk maken om snel HTML-elementen vorm te geven. Daarnaast hoeven er geen aparte CSS (of Sass, enz.) bestanden te worden geschreven.
Omdat ik geen tijd wilde besteden aan het zelf ontwerpen van iedere component, heb ik gekozen om Tailwind Plus (voormalig Tailwind UI) te gebruiken. Tailwind Plus biedt component-ontwerpen aan voor verschillende soorten doeleinden, zoals webshops. In mijn geval bieden ze ook ontwerpen aan voor webapplicatie interfaces.
De ontwerpen heb ik tevens niet 1-op-1 overgenomen. Hier en daar verschillen ze, maar het grootste verschil is dat ik donkere modus-ondersteuning aan de React componenten heb toegevoegd.
Storybook
Aangezien Peggirkit losse React-componenten betreft, is het ook handig om deze geïsoleerd te bouwen, testen en documenteren. Vandaar dat ik Storybook gebruik.
“Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.”
Componenten
Niet alle componenten in deze front-end library zijn overigens zichtbaar in de user interface. Sommige zijn React hooks of bieden een context.
UI componenten
Peggirkit bevat een aantal tientallen UI-componenten. Denk aan buttons, invoervelden, spinners, enz. Sommige daarvan zijn samengestelde componenten: een combinatie uit meerdere. Bijvoorbeeld, in de afbeelding hieronder zie je een error-pagina component. Deze bevat weer een breadcrumb-, heading-, lijst- en footer-component.
React hooks
Peggirkit bevat tevens een aantal React hooks. Deze bieden een interne logica die kunnen worden hergebruikt. Zo
houdt useResponsive bij wat de dimensie van de huidige window is samen met de huidige Tailwind breakpoint.
React context API
Omdat veel front-end applicaties die ik bouw besloten omgevingen zijn, voor bijvoorbeeld geregistreerde gebruikers of admins, bevat Peggirkit onder andere authenticatie-logica.
Door gebruik te maken van de React Context API, kan ik eenvoudig authenticatie functionaliteiten inbouwen. Denk aan het inloggen, uitloggen en een bezoeker omleiden wanneer deze een pagina niet mag bezoeken.
In combinatie met die AuthProvider, is er ook een login-pagina preset. Tevens ondersteunt deze ook 2FA (op basis van
TOTP).
Resultaat
Peggirkit is nog steeds een work-in-progress. Ik ben het continu aan het uitbouwen en refactoren. Het werken aan deze library helpt mij om m'n front-end skills te verbeteren.
Nieuwsgierig naar Peggirkit? De Storybook site is publiekelijk beschikbaar, neem gerust een kijkje!
Helaas kan ik deze React component library niet publiekelijk aanbieden zodat iedereen zo'n dashboard interface kan maken. Dat heeft te maken met de licentie van Tailwind UI. Op lange termijn wil ik afstappen van Tailwind UI en de gehele front-end library open-source aanbieden.
