Tailwind vs Material UI vs Styled Components vs React Bootstrap
När det gäller UI-ramverk finns det möjligen hundratals. I den här artikeln kommer jag att jämföra vad jag anser är de mest populära — baserat på följande kriterier:
- Utvecklingslätthet — lätt att skriva, lätt att läsa, snabbt att ändra
- Prestanda — Renderingshastighet
- Byggstorlek
- Inlärningslätthet
Då drar vi igång!
TailwindCSS
Tailwind är ett verktygsklassbibliotek som exponerar ett brett utbud av lättanvända klasser som låter dig manipulera vanliga CSS-egenskaper. När du kedjar ihop dessa klasser får vi önskad styling.
Utvecklingslätthet: Vad gäller utvecklingslätthet älskar jag Tailwind! Du skriver dina klassNamn precis där du behöver stilarna, du behöver inte gå till en annan fil (som med CSS) eller ens till en annan punkt i samma fil (som med JSS) för att se stilarna i aktion. Detta ger en fantastisk utvecklarupplevelse. I vissa fall kanske du faktiskt vill skapa ett formatmallar — t.ex. för att formatera varianter av en knapp. I det här fallet kan vi bara skapa ett formatmallar och använda temadirektivet för att använda twinnds temavariabel och skapa konsekventa stilar. Även om vissa kanske tycker det är irriterande att läsa den långa listan med kedjeklasser i sitt språk — jag själv tycker det är mycket praktiskt.
Prestanda: Renderingshastigheten är ungefär densamma som inbyggd HTML och CSS eftersom dessa bara är klasser i ett formatmallar.
Byggstorlek: För att tillhandahålla verktygsklasser för all variation av användningsfall som vi stöter på under utveckling måste bibliotekens storlek naturligtvis vara stor. Dock hjälper användningen av bibliotek som PurgeCSS till att ta bort alla oanvända klasser från den slutliga bygget. Tailwind har ett inbyggt alternativ för detta. Således hamnar vi med en byggstorlek som förmodligen är mycket nära att använda inbyggda CSS-klasser.
Inlärningslätthet: Till en början kan det ta lite tid att vänja sig vid klassNamnen för de olika attributen. Men de är ganska intuitiva och lätta att komma ihåg. Jag skulle betygsätta Tailwind som mycket lätt att lära.
Tailwind är ett personligt favorit av två anledningar — 1. deras standardstilrar ser fantastiska ut — eleganta och rena 1. deras utbud av verktygsklasser är enormt och täcker nästan alla vanliga användningsfall effektivt. Det är anledningarna till att jag skulle välja Tailwind framför andra verktygsklassbibliotek som Bootstrap.
MUI
MUI är ett UI-verktygslåda som tillhandahåller ett temningsramverk, ett formatmallarramverk och vanliga komponenter — alla omedelbar tillgängliga att använda.
Utvecklingslätthet: Att arbeta med MUI är mycket bra eftersom du inte behöver skriva mycket av koden som krävs för vanliga funktioner som modaler, dragspel, väljarullistor, menyer etc. Men MUI är fruktansvärt när det gäller att anpassa dessa förformaterade komponenter. Även att lägga till stilar till vanliga komponenter är lite fult att läsa på grund av JSS. Dessutom, om du behöver använda några externa komponenter, är de mycket svåra att anpassa så att de matchar utseendet och känslan av MUI.
Prestanda: MUI är förmodligen den långsammaste när det gäller rendering. Jag hade en gång en rullista med 1000 poster, och MUI kunde inte ladda den utan minst en 1-sekunds fördröjning. De har några tunga stilar för hovreringseffekter, krusningseffekter och skuggor som gör det beräkningsintensivt.
Byggstorlek: Byggstorlek för MUI är ganska stor jämfört med andra UI-ramverk. Detta kan hanteras genom att använda andra nivåimporter när du importerar från MUI.
Inlärningslätthet: MUI har mycket komplex dokumentation med ett stort antal anpassningsalternativ. Detta gör det mycket svårt att lära. Formatmallssystemet är också något annorlunda än de allmänna alternativen som finns tillgängliga. Därför tar det tid att vänja sig vid.
MUI ser bra ut som standard. Det är ett mycket bra alternativ att använda — ENDAST OM din design använder deras standardstilrer. Det skulle vara bra att bekräfta att de har alla komponenter som du behöver använda i förväg. Men om du har ett anpassat tema som du behöver utveckla — det här är det värsta alternativet. Det är tungt på rendering och mycket svårt att anpassa. Du skulle ha det bättre med något annat.
Styled Components
Styled Components använder CSS i JS för att låta dig formatera komponenter och skicka rekvisita som också påverkar formatering.
Utvecklingslätthet: Styled Components använder CSS i JS. Vad gäller utvecklingslätthet tycker jag det är förmodligen det värsta. Så när du skriver CSS behöver du uppenbart en linter — style lint — för att tillåta parsing i en JS-fil. All logik som involverar rekvisita är utförlig att skriva eftersom den måste läggas till som en funktion vid varje interpolationsplats. Den enda potentiella fördelen är att det jämfört med vanlig CSS är lättare att navigera till en formaterad komponent än en klass i ett formatmallar. Att skapa en formaterad komponent för varje mindre ändring du behöver är definitivt mycket frustrerande jämfört med att använda något som Tailwind eller Bootstrap.
Prestanda: Styled Components har en liten overhead över vanlig CSS. Men det här är ganska minimalt.
Byggstorlek: Här igen finns det en liten overhead över vanlig CSS, men mycket minimal. I själva verket kan användningen av Styled Components i vissa fall där det inte finns för mycket formatering hjälpa dig att ha en byggstorlek mindre än verktygsklassbibliotek som Tailwind.
Inlärningslätthet: Styled Components är ganska lätta att lära sig eftersom de bara använder lite extra syntax och JS-interpolation över vanlig CSS.
Styled-components som ett fristående ramverk verkar lite meningslöst för mig. Utan någon signifikant fördel framför SCSS och mer av röran som skapas av varje formaterad komponent för varje enstaka formatändring, skulle jag avråda från att använda det. I varje fall verkar det för mig bara lägga till overhead. Jag kan ha fel eftersom jag bara har använt dem ett par gånger i projekt. Men min erfarenhet av att använda det har alltid slutat med frågan — varför finns detta till?
React Bootstrap
React Bootstrap är ett komponentbibliotek byggt på toppen av verktygsklassbiblioteket — Bootstrap. Det ger en balans mellan Tailwind och Material UI, där vi får verktygsklasserna från Bootstrap och färdiga komponenter från React Bootstrap
Utvecklingslätthet: React Bootstrap har lättanvända komponenter så du behöver inte skriva din egen logik för vanligt använda komponenter som väljar, modaler etc. Det är också lätt att anpassa dessa komponenter med verktygsklasser och temavariabel. Dessutom, eftersom de har vanliga verktygsklasser, blir det också enkelt att formatera komponenter som importeras från andra bibliotek för att matcha utseendet och känslan av React Bootstrap.
Prestanda: React Bootstrap-komponenter har nästan ingen overhead över att använda vanlig CSS. Deras prestanda är mycket nära att använda vanlig CSS.
Byggstorlek: React Bootstrap-komponenter, om de importeras och paketeras korrekt, kommer att ha mycket liten påverkan på byggstorlek.
Inlärningslätthet: React Bootstrap-komponenter är enkla, väldokumenterade och lätta att implementera. Bootstrap-klasserna är liknande Tailwind och är lätta att vänja sig vid.
React Bootstrap är en mycket bra balans mellan prestanda och utvecklarvänlighet. Du behöver inte skriva kod som används i vanliga komponenter, du får enkla anpassningar med Bootstrap-verktygsklasser, och prestanda är nästan inbyggd. Det har inte lika brett utbud av verktygsklasser som Tailwind, men det tillåter dig att lägga till alla stilar och variabler du behöver för att skapa liknande funktionalitet. Det här verkar för mig som en sweet spot.
Slutsats
Som allt inom teknik beror vilket UI-ramverk du väljer på ditt användningsfall.
Om du behöver en snabb prototyp — du skulle ha det bättre av att välja ett komponentbibliotek. Mellan MUI, Bootstrap och andra — du kan välja baserat på överväganden som standardutseendet/känslan, renderingsprestanda och anpassningsbarhet. MUI är prestandakrävande och svår att anpassa, men om du gillar hur det ser ut och inte har särskilt tunga UI-element är det ett bra alternativ.
Om du vill skapa anpassade komponenter skulle du ha det bättre med TailwindCSS eller React Bootstrap — där CSS-verktygen gör det mycket enkelt att injicera de stilar du vill ha. Mitt personliga val skulle vara Tailwind — även om det inte har något öppen källkod-komponentbibliotek som React Bootstrap, älskar jag bara deras standardstilrer och klassernas omfattande karaktär som tillhandahålls av dem.
Om du behöver anpassade komponenter men gillar inte den långa klassNamnkedjningen som i TailwindCSS — du kan gå för Styled Components. De låter dig skriva dina stilar i JS vilket är lättare att navigera jämfört med vanlig CSS. Personligen är det här mitt minst favorit av alla ramverk, men vissa föredrar det verkligen. Det här är rent baserat på utvecklarupplevelsehänsyn.
Vilket UI-ramverk älskar du att arbeta med? Jag skulle älska att veta!
