Auteur: Danny Holstein

In een aantal projecten wordt er gebruik gemaakt van Angular in combinatie met Bootstrap 5. Het probleem met Bootstrap 5 is dat dit CSS framework nog maar zelden wordt onderhouden. Ook zijn er deprecation warnings wanneer Bootstrap 5 wordt gebruikt. Het is daarom een goed idee om naar een ander framework te migreren. Een van de alternatieven is Tailwind CSS met een utility first benadering waarbij zogenaamde utility classes de elementen direct van stijl voorzien. Een nadeel van Tailwind CSS is dat er zelf utility classes gemaakt moeten worden. Daarom is er voor gekozen om gebruik te maken van een Tailwind CSS component library, namelijk daisyUI, die in dit blogbericht nader wordt besproken.

Tailwind CSS wordt tegenwoordig nog wel onderhouden en dat is een voordeel ten opzichte van Bootstrap 5. Bovendien is Tailwind een populaire keuze die maximale flexibiliteit biedt. Zoals in de inleiding al vermeld, moeten er utility classes geschreven worden wanneer er alleen Tailwind CSS wordt gebruikt. Tailwind heeft geen vooraf gebouwde componenten en deze zullen dus ook gemaakt moeten worden. Door het gebruik van utility classes is de leercurve van Tailwind hoger.  Een voordeel is dat de library kleiner is en ongebruikte CSS code wordt opgeruimd.

De leercurve van Bootstrap 5 is aanzienlijk lager en er zijn vooraf gebouwde componenten, maar er is minder vrijheid doordat de componenten een Bootstrap uiterlijk hebben en er soms JavaScript nodig is. Het huidige grid systeem van Bootstrap 5 wordt tegenwoordig als te rigide gezien en is lastig om aan te passen. De grootte van deze CSS library is groter dan Tailwind (behalve wanneer tree-shaken waarbij onnodige zaken worden weggelaten).

Er zijn ook nog andere verschillen tussen Tailwind en Bootstrap 5. Waar Bootstrap 5 gebruik maakt van het grid systeem (met row en columns zoals: col-1, col-2, etc.), daar maakt Tailwind gebruik van flexbox en grid utilities. In de praktijk bleek de responsiveness anders te werken en andere benamingen te hebben. Ook heeft Tailwind een ander build process waarbij er gebruik gemaakt wordt van een PostCSS configuratie voor tree shaking (onnodige zaken worden weggelaten en ongebruikte utility classes worden verwijderd).  Om tijd te besparen en niet zelf opnieuw het wiel uit te hoeven vinden, is ervoor gekozen om de Tailwind CSS library: daisyUI te onderzoeken.

Ten eerste moet gezegd worden dat de documentatie van daisyUI (link: daiyUI) uitstekend is. De praktische voorbeelden wijzen zich zelf uit. Hetzelfde kan gezegd worden over de documentatie van TailwindCSS (link: Tailwind CSS). Ook om tijd te besparen is er voor gekozen om daisyUI te gebruiken. Gewoonlijk neemt een migratie met alleen Tailwind CSS al snel enkele weken in beslag voor middelgrote applicaties (met 50-100 componenten). De Bootstrap 5 classes sluiten uiteraard niet een-op-een aan op de classes van daisyUI, maar de voordelen zijn tijdbesparing, meer aanpasbaarheid en betere onderhoudbaarheid van de applicatie.

Een voordeel is dat daisyAI bovendien ‘framework-agnostisch’ is en dit wil zeggen dat het niet ontworpen is voor een specifiek JavaScript framework. Het kan meer gezien worden als een Tailwind CSS plugin die met alle JavaScript frameworks werkt: React, Vue, Angular, Svelte, etc. Het heeft geen JavaScript bundle nodig, want het is gebaseerd op pure CSS en zal zelfs werken wanneer JavaScript is uitgeschakeld. Doordat daisyUI’s semantische class-names gebruikt die vergelijkbaar zijn met Bootstrap 5 zal een migratie makkelijker verlopen dan alleen met pure Tailwind CSS.

Het globale migratieplan van Bootstrap 5 naar daisyUI/Tailwind CSS heeft wel een aantal doordachte stappen nodig.

1. In een bestaande Angular applicatie kan daisyUI tijdelijk naast Bootstrap 5 worden geïnstalleerd.

2. Vervolgens kunnen eerst simpele componenten met buttons, modals, etc. worden omgezet en later iets meer complexe componenten met formulieren die bestaan uit dropdowns, tekstvelden en nummervelden. Als laatste kunnen componenten met complexe interactiviteit worden gemigreerd. Het is vooral van belang om na te gaan welke componenten er gebruik maken van Bootstrap en JavaScript aangezien daisyUI/Tailwind CSS geen JavaScript nodig heeft.

3. De testfase bestaat uit het uittesten van de responsiveness (nagaan hoe de applicatie eruit ziet voor mobiele apparaten), de toegankelijkheid van de componenten en controleren van browser compatibiliteit.

4. Er kan een ‘code clean up’ plaatsvinden waarbij de Bootstrap dependencies worden verwijderd. Ongebruikte CSS code kan verwijderd worden en eventuele documentatie kan worden geüpdatet.

Om daisyUI en zijn dependencies (Tailwind CSS, PostCSS) te installeren, heb ik een iets langer commando gebruikt dat dit installeert en in de devDependencies van package.json plaatst:

Met het bovenstaande commando worden de meest recente versies van de pakketten geïnstalleerd. Het bleek in de praktijk zo te zijn dat Tailwind CSS versie 4 nog minder configuratie nodig heeft. Waar in eerdere versies een configuratiebestand – tailwind.config.js – nodig was, daar is dit in versie 4 niet meer nodig. In versie 4 is er sprak van ‘CSS first’ en dit wil zeggen dat veel zaken direct in CSS bestanden geplaatst wordt.

Of met andere woorden: voor Angular applicaties kan er veel in het bestand styles.scss worden geplaatst. Een probleem waar ik tegenaan liep, dat was dat de Bootstrap 5 classes met betrekking tot XS (Extra Small of portrait mode voor mobiele apparaten) nodig was. Deze class is niet standaard aanwezig in daisyUI. Maar dankzij de ‘CSS first’ benadering, is dit vrij eenvoudig in te stellen. Zie de afbeelding hieronder voor het styles.scss bestand van Angular applicaties:

Omdat er gebruik gemaakt wordt van PostCSS (met het pakket @tailwindcss/postcss) is er een extra .postcssrc.json bestand nodig, want anders zullen de Tailwind CSS styles voor daisyUI niet worden toegepast. En er zal de foutmelding verschijnen in de terminal:

“Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration”.

Dit bestand is in een later stadium uit te breiden met opties om de applicatie te optimaliseren.

Met de documentatie van daisyUI en Tailwind CSS in de hand, ben ik begonnen om eerst de makkelijke componenten en vervolgens de formulieren en complexere componenten te migreren. Dit proces ging redelijk voorspoedig en het viel mij op dat er niet alleen minder CSS classes nodig waren, maar ook soms minder HTML-elementen. Dit bleek vooral het geval te zijn voor een component dat verantwoordelijk is voor paginering. Met daisyUI wordt hier gebruik gemaakt van 1 parent-DIV met daarbinnen enkele input elementen, maar met Bootstrap 5 is er een parent-DIV met daarbinnen ul-, li- en anchor-elementen. De bestaande logica in de Angular componenten bleven intact en vooral de HTML-templates zijn aangepast.

Voor een aantal applicaties werd er niet alleen gebruik gemaakt van Bootstrap 5 maar ook van Bootstrap icons. Een klein probleem waar ik tegenaan liep was dat daisyUI/Tailwind CSS geen iconen van zichzelf heeft. Een goede icon library bleek Heroicons (link: Heroicons) te zijn voor de beoogde migratie die gebruik maakt van SVG iconen (SVG = Scalable Vector Graphics). Een ander klein probleem waar ik tegenaan ben gelopen dat is om iconen en tekst in buttons netjes naast elkaar te plaatsen. Een simpele oplossing was om een div-element binnen de button te plaatsen met de classes flex en justify-between te gebruiken, met als resultaat dat alles netjes recht staat.

Een ander voordeel dat zich tijdens de migratie voordeed dat was dat er ruimte bespaard werd. In een vorige paragraaf heb ik geschreven over het rigide grid systeem van Bootstrap 5 dat moeilijk is aan te passen. Hierbij wordt men in het keurslijf gedwongen van bestaande CSS classes in Bootstrap 5 zoals row en CSS classes voor kolommen: col-1, col-2, col-3 en varianten voor verschillende schermgroottes (xl, lg, md, sm, xs). Het grote voordeel van daisyUI/Tailwind CSS is de flexbox waar desgewenst bepaalde elementen kunnen krimpen of juist uitgebreid kunnen worden. De afbeelding hieronder toont dezelfde applicatie die is gemigreerd van Bootstrap 5 naar daisyUI/Tailwind CSS. In Bootstrap lukte het maar niet om tekst, de pager, paginering, filters en menu in 1 rij te krijgen, maar met daisyUI/Tailwind CSS lukte dit wel.

Na het migreren van de componenten resteerde er een ‘code clean up’ of een schoonmaak van de code. In het bestand angular.json is er alleen nog een verwijzing nodig in de styles-array naar styles.scss en alle verwijzingen naar Boostrap 5 kunnen verwijderd worden. Hetzelfde geldt voor package.json waar de pakketten bootstrap en bootstrap-icons verwijderd kunnen worden.

Ik ben aangenaam verrast door de daisyUI component library dat een goede vervanger is voor applicaties die gebruik maken van Bootstrap 5. In de praktijk is gebleken dat applicaties compacter zijn te maken en een moderner uiterlijk kunnen krijgen, zonder dat dit ten koste gaat van flexibiliteit en de functionaliteit. Doordat daisyUI alleen gebruik maakt van CSS en ‘framework-agnostisch’ is, zijn er geen storingen met Angular applicaties.