Tailwind versus Material UI versus Styled Components versus React Bootstrap

Tailwind vs Material UI vs Styled Components vs React Bootstrap

Als het gaat om UI Frameworks, zijn er mogelijk honderden. In dit artikel vergelijk ik wat naar mijn mening de populairste zijn — op basis van de volgende criteria:

1. Gemak van ontwikkeling — makkelijk om te schrijven, makkelijk om te lezen, snel om te wijzigen
2. Prestaties — Renderingssnelheid
3. Build-grootte
4. Gemak van leren

Laten we er dan in duiken!

TailwindCSS

Tailwind is een hulpprogrammaklassebibliotheek die een breed scala aan gebruiksvriendelijke klassen biedt waarmee u algemene CSS-eigenschappen kunt manipuleren. Wanneer u deze klassen samenvoegt, krijgen we de gewenste styling.

Gemak van ontwikkeling: Wat betreft het gemak van ontwikkeling, ik hou van Tailwind! U schrijft uw classNames precies waar u de stijlen nodig hebt, u hoeft niet naar een ander bestand (zoals bij CSS) of zelfs naar een ander punt in hetzelfde bestand (zoals bij JSS) te gaan om de stijlen in werking te zien. Dit biedt een fantastische ontwikkelingservaring. In sommige gevallen wilt u misschien een stylesheet aanmaken — bijvoorbeeld het opmaken van varianten voor een knop. In dit geval kunnen we eenvoudig een stylesheet aanmaken en de themedirectief gebruiken om gebruik te maken van Tailwinds themavariabelen en consistente stijlen te creëren. Hoewel sommigen het misschien vervelend vinden om de lange lijst met samengevoegde klassen in hun markup te lezen, vind ik het persoonlijk erg handig.

Prestaties: De renderingssnelheid is ongeveer hetzelfde als native HTML en CSS, aangezien dit slechts klassen in een stylesheet zijn.

Build-grootte: Om hulpprogrammaklassen te bieden voor al het scala aan use-cases dat we tegenkomen tijdens de ontwikkeling, moet de grootte van deze bibliotheken natuurlijk groot zijn. Het gebruik van bibliotheken zoals PurgeCSS helpt echter om alle ongebruikte klassen uit de definitieve build te verwijderen. Tailwind heeft een ingebouwde optie om dit te doen. We eindigen dus met een build-grootte die waarschijnlijk zeer dicht bij het gebruik van native CSS-klassen ligt.

Gemak van leren: In het begin kan het even duren voordat u aan de classNames voor de verschillende attributen gewend bent. Ze zijn echter vrij intuïtief en gemakkelijk om te onthouden. Ik zou Tailwind als zeer gemakkelijk om te leren beoordelen.

Tailwind is een persoonlijke favoriet om 2 redenen — 1. hun standaardstijlen zien er geweldig uit — elegant en schoon 1. hun bereik van hulpprogrammaklassen is enorm en dekt vrijwel elk veelvoorkomend use-case effectief. Dit zijn de redenen waarom ik Tailwind boven andere hulpprogrammaklassebibliotheken zoals Bootstrap zou kiezen.

MUI

MUI is een UI-toolkit die een themeringsframework, stylingframework en algemene componenten biedt — allemaal onmiddellijk beschikbaar voor gebruik.

Gemak van ontwikkeling: Werken met MUI is erg goed omdat u niet veel van de code hoeft te schrijven die nodig is voor veelvoorkomende functionaliteiten zoals modals, accordions, select dropdowns, menu's enzovoort. MUI is echter verschrikkelijk als het gaat om het aanpassen van deze vooraf gestileerde componenten. Zelfs het toevoegen van stijlen aan normale componenten is lastig om te lezen vanwege JSS. Als u bovendien externe componenten moet gebruiken, zijn deze erg moeilijk aan te passen zodat ze aansluiten bij de look en feel van MUI.

Prestaties: MUI is waarschijnlijk het langzaamste bij het renderen. Ik had ooit een dropdown met 1000 vermeldingen, en MUI kon deze niet laden zonder minstens 1 seconde vertraging. Ze hebben zware stijlen voor hover-effecten, ripple-effecten en schaduwen die het rekenkundig intensief maken.

Build-grootte: De build-grootte van MUI is vrij groot in vergelijking met andere UI-frameworks. Dit kan worden beheerd door tweedelevelsimports te gebruiken wanneer u uit MUI importeert.

Gemak van leren: MUI heeft zeer complexe documentatie met een groot aantal opties voor aanpassingen. Dit maakt het erg moeilijk om te leren. Het stylingssysteem verschilt ook enigszins van de algemeen beschikbare opties. Het duurt dus even voordat je eraan gewend bent.

MUI ziet er standaard goed uit. Het is een erg goede optie om te gebruiken — ALLEEN ALS uw ontwerp gebruik maakt van hun standaardstijlen. Het zou goed zijn om van tevoren te bevestigen dat ze alle componenten hebben die u moet gebruiken. Als u echter een aangepast thema hebt dat u moet ontwikkelen — dit is de slechtste optie. Het is zwaar bij het renderen en erg moeilijk aan te passen. U zou beter iets anders kunnen gebruiken.

Styled Components

Styled Components gebruiken CSS in JS om u componenten te laten opmaken en props door te geven die ook de styling beïnvloeden.

Gemak van ontwikkeling: Styled Components gebruiken CSS in JS. Wat betreft het gemak van ontwikkeling, denk ik dat het waarschijnlijk het ergst is. Dus terwijl u de CSS schrijft, hebt u natuurlijk een linter nodig — style lint — om parsing binnen een JS-bestand mogelijk te maken. Elke logica met betrekking tot props is uitgebreid om te schrijven, omdat deze op elke interpolatieplaats als functie moet worden toegevoegd. Het enige potentiële voordeel is dat het, vergeleken met gewone CSS, gemakkelijker is om naar een gestileerde component te navigeren dan naar een klasse in een stylesheet. Voor elke kleine wijziging een gestileerde component aanmaken is zeker erg frustrerend in vergelijking met het gebruik van iets als Tailwind of Bootstrap.

Prestaties: Styled Components hebben een lichte overhead over gewone CSS. Dit is echter heel minimaal.

Build-grootte: Ook hier is er een lichte overhead over gewone CSS, maar zeer minimaal. In feite zou het in sommige gevallen waarin niet veel styling aanwezig is, het gebruik van styled-components u kunnen helpen een build-grootte te hebben die kleiner is dan hulpprogrammaklassebibliotheken zoals Tailwind.

Gemak van leren: Styled Components zijn vrij gemakkelijk om te leren, omdat ze gewoon wat aanvullende syntaxis en JS-interpolatie over gewone CSS gebruiken.

Styled-components als standalone framework lijkt me een beetje nutteloos. Zonder enig significant voordeel ten opzichte van SCSS en meer rommel veroorzaakt door elke styled component voor elke enkele stijlwijziging, zou ik ervan afraden het te gebruiken. In elk geval lijkt het voor mij gewoon overhead toe te voegen. Ik kan het mis hebben, want ik heb ze slechts een paar keer in projecten gebruikt. Maar mijn ervaring met het gebruik ervan eindigt altijd met de vraag — waarom bestaat dit?

React Bootstrap

React Bootstrap is een componentenbibliotheek gebouwd bovenop de hulpprogrammaklassebibliotheek — Bootstrap. Het biedt een balans tussen Tailwind en Material UI, waarbij we de hulpprogrammaklassen van Bootstrap en de kant-en-klare componenten van React Bootstrap krijgen

Gemak van ontwikkeling: React Bootstrap heeft gebruiksvriendelijke componenten, dus u hoeft uw eigen logica niet voor veel gebruikte componenten zoals selects, modals enzovoort te schrijven. Het is ook gemakkelijk om deze componenten aan te passen met behulp van hulpprogrammaklassen en themavariabelen. Bovendien, omdat ze veel voorkomende hulpprogrammaklassen hebben, wordt het ook gemakkelijk om componenten uit andere bibliotheken op te maken zodat ze aansluiten bij de look en feel van React Bootstrap.

Prestaties: React Bootstrap-componenten hebben bijna geen overhead ten opzichte van het gebruik van gewone CSS. Hun prestatie is zeer dicht bij het gebruik van gewone CSS.

Build-grootte: React Bootstrap-componenten zullen, als ze correct worden geïmporteerd en gebundeld, zeer weinig impact op de build-grootte hebben.

Gemak van leren: React Bootstrap-componenten zijn eenvoudig, goed gedocumenteerd en gemakkelijk te implementeren. De Bootstrap-klassen zijn vergelijkbaar met Tailwind en zijn gemakkelijk om aan te wennen.

React Bootstrap is een erg goede balans tussen prestatie en gebruikersvriendelijkheid voor ontwikkelaars. U hoeft geen code te schrijven die in veel gebruikte componenten wordt gebruikt, u krijgt gemakkelijke aanpassingen met Bootstrap-hulpprogrammaklassen, en de prestatie is bijna native. Het heeft niet zo'n breed scala aan hulpprogrammaklassen als Tailwind, maar het stelt u in staat om alle stijlen en variabelen toe te voegen die u nodig hebt om vergelijkbare functionaliteit te creëren. Dit voelt voor mij als een sweet spot.

Conclusie

Net als alles in tech hangt het UI-framework dat u kiest af van uw use-case.

Als u een snelle prototype nodig hebt — zou u beter af zijn met het kiezen van een componentenbibliotheek. Tussen MUI, Bootstrap en anderen — u kunt kiezen op basis van overwegingen zoals de standaardlook/feel, renderingsprestaties en aanpassingsmogelijkheden. MUI is prestatieverslindend en moeilijk aan te passen, maar als u van het uiterlijk houdt en niet bijzonder zware UI-elementen hebt, is het een geweldige optie.

Als u aangepaste componenten wilt maken, zou u beter af zijn met TailwindCSS of React Bootstrap — waarbij de CSS-utils het zeer gemakkelijk maken om de stijlen in te voeren die u wilt. Mijn persoonlijke keuze zou Tailwind zijn — hoewel het geen open-source componentenbibliotheek zoals React Bootstrap heeft, hou ik gewoon van hun standaardstijlen en het uitputtende karakter van de klassen die zij leveren.

Als u aangepaste componenten nodig hebt, maar u niet houdt van lange className-ketening zoals in TailwindCSS — u kunt voor Styled Components gaan. Ze laten u uw stijlen in JS schrijven, wat gemakkelijker is om in te navigeren dan gewone CSS. Persoonlijk is dit mijn minst favoriete van alle frameworks, maar sommige mensen geven er echt de voorkeur aan. Dit is zuiver gebaseerd op overwegingen van de ontwikkelaarservaring.

Welk UI-framework werk je graag mee? Ik zou het graag willen weten!