Tailwind vs Material UI vs Styled Components vs React Bootstrap
Når det kommer til UI-frameworks, er der muligvis hundredvis. I denne artikel vil jeg sammenligne det, som jeg mener, er de mest populære — baseret på følgende kriterier:
- Udviklingslettelse — let at skrive, let at læse, hurtigt at ændre
- Ydeevne — Gengivelseshastighed
- Build-størrelse
- Læringstilgængelighed
Så lad os gå i gang!
TailwindCSS
Tailwind er et utility-klassebibliotek, der udsender et bredt udvalg af nemme at bruge-klasser, som lader dig manipulere almindelige CSS-egenskaber. Når du kombinerer disse klasser, får vi den ønskede styling.
Udviklingslettelse: Hvad angår udviklingslettelse, elsker jeg Tailwind! Du skriver dine classNames lige der, hvor du har brug for stilene, du behøver ikke at gå til en anden fil (som med CSS) eller endog et andet sted i samme fil (som med JSS) for at se stilene i aktion. Dette giver en fantastisk udvikleroplevelse. I nogle tilfælde kan du måske gerne oprette et stylesheet — f.eks. styling af varianter for en knap. I dette tilfælde kan vi blot oprette et stylesheet og bruge tema-direktiven til at gøre brug af Tailwinds temavariable og oprette ensartede stilarter. Selvom nogle mennesker kan finde det irriterende at læse den lange liste over kombinerede klasser i deres markup — finder jeg det personligt meget praktisk.
Ydeevne: Gengivelseshastigheden er omtrent den samme som native HTML og CSS, da disse blot er klasser i et stylesheet.
Build-størrelse: For at levere utility-klasser til hele variationen af brugssager, som vi støder på under udviklingen, må størrelsen på disse biblioteker naturligvis være stor. Men brugen af biblioteker såsom PurgeCSS hjælper med at fjerne alle de ubrugte klasser fra det endelige build. Tailwind har en indbygget mulighed for at gøre dette. Således ender vi med en build-størrelse, der sandsynligvis er meget tæt på at bruge native CSS-klasser.
Læringstilgængelighed: Til at begynde med kan det tage et stykke tid at vænne sig til classNames for de forskellige attributter. Imidlertid er de ret intuitive og nemme at huske. Jeg ville vurdere Tailwind som meget let at lære.
Tailwind er et personligt favorit af 2 grunde — 1. deres standardstile ser fantastiske ud — elegante og rene 1. deres udvalg af utility-klasser er enormt og dækker næsten alle almindelige brugssager effektivt. Dette er grundene til, at jeg ville vælge Tailwind frem for andre utility-klassebiblioteker som Bootstrap.
MUI
MUI er et UI-toolkit, der leverer et tema-framework, styling-framework og almindelige komponenter — alle straks klar til brug.
Udviklingslettelse: Arbejde med MUI er meget godt, da du ikke behøver at skrive meget af den kode, der kræves til almindelige funktionaliteter som modaler, accordions, select-dropdown-menuer osv. Men MUI er forfærdeligt, når det kommer til tilpasning af disse forudstilede komponenter. Selv det at tilføje stilarter til normale komponenter er en smule uelegant at læse på grund af JSS. Desuden, hvis du har brug for at bruge nogle eksterne komponenter, er de meget svære at tilpasse, så de matcher MUIs look og feel.
Ydeevne: MUI er sandsynligvis det langsomste med hensyn til gengivelse. Jeg havde engang en dropdown-menu med 1000 poster, og MUI kunne ikke indlæse den uden mindst en 1-sekunders forsinkelse. De har nogle tunge stilarter til hover-effekter, ripple-effekter og skygger, som gør det beregningsintensivt.
Build-størrelse: Build-størrelsen på MUI er ret stor sammenlignet med andre UI-frameworks. Dette kan styres ved hjælp af andengrads-imports, når man importerer fra MUI.
Læringstilgængelighed: MUI har meget kompleks dokumentation med et stort antal muligheder for tilpasninger. Dette gør det meget vanskeligt at lære. Styling-systemet er også noget anderledes end de generelle muligheder, der er tilgængelige. Derfor tager det tid at vænne sig til det.
MUI ser godt ud som standard. Det er et meget godt valg at bruge — KUN HVIS dit design gør brug af deres standardstile. Det ville være godt at bekræfte, at de har alle de komponenter, du skal bruge, på forhånd. Men hvis du har et brugerdefineret tema, som du skal udvikle — dette er det værste valg. Det er tungt på gengivelse og meget svært at tilpasse. Du ville være bedre stillet ved at bruge noget helt tredje.
Styled Components
Styled Components bruger CSS i JS til at lade dig style komponenter og sende props, som også påvirker styling.
Udviklingslettelse: Styled Components bruger CSS i JS. Hvad angår udviklingslettelse, mener jeg, at det sandsynligvis er værst. Så når du skriver CSS, har du naturligvis brug for en linter — style lint — til at tillade parsing inden for en JS-fil. Enhver logik, der involverer props, er ordrig at skrive, da den skal tilføjes som en funktion på hvert interpolationssted. Den eneste potentielle fordel er, at det sammenlignet med regelmæssig CSS er lettere at navigere til en styled Component end en klasse i et stylesheet. Det at oprette en styled Component for hver mindre ændring, du har brug for, er helt sikkert meget frustrerende sammenlignet med at bruge noget som Tailwind eller Bootstrap.
Ydeevne: Styled Components har et lille overhead over almindelig CSS. Men det er helt minimalt.
Build-størrelse: Her igen er der et lille overhead over regelmæssig CSS, men meget minimalt. Faktisk kan brug af Styled Components i nogle tilfælde, hvor der ikke er for meget styling, hjælpe dig med at have en build-størrelse, der er mindre end utility-klassebiblioteker som Tailwind.
Læringstilgængelighed: Styled Components er ret let at lære, da de kun bruger nogle yderligere syntaks og JS-interpolation over regelmæssig CSS.
Styled-components som et selvstændigt framework virker lidt meningsløst for mig. Uden nogen signifikant fordel over SCSS og mere af det uorden, der skabes af hver Styled Component for hver enkelt stilændring, ville jeg råde til ikke at bruge det. I alle tilfælde virker det bare til at tilføje overhead. Jeg kan have uret, da jeg kun har brugt det et par gange i projekter. Men min erfaring med at bruge det endte altid med spørgsmålet — hvorfor findes dette?
React Bootstrap
React Bootstrap er et komponentbibliotek bygget på top af utility-klassebiblioteket — Bootstrap. Det giver en balance mellem Tailwind og Material UI, hvor vi får utility-klasserne fra Bootstrap og de færdiglavede komponenter fra React Bootstrap
Udviklingslettelse: React Bootstrap har nemme at bruge-komponenter, så du ikke behøver at skrive din egen logik til almindeligt brugte komponenter som selects, modaler osv. Det er også let at tilpasse disse komponenter ved hjælp af utility-klasser og tema-variabler. Desuden bliver det også let at style komponenter importeret fra andre biblioteker til at matche React Bootstraps look og feel, fordi de har almindelige utility-klasser.
Ydeevne: React Bootstrap-komponenter har næsten intet overhead over brug af almindelig CSS. Deres ydeevne er meget tæt på at bruge almindelig CSS.
Build-størrelse: React Bootstrap-komponenter vil, hvis de importeres og bundeles korrekt, have meget lille indflydelse på build-størrelsen.
Læringstilgængelighed: React Bootstrap-komponenter er enkle, vellet dokumenterede og let at implementere. Bootstrap-klasserne ligner Tailwind og er let at vænne sig til.
React Bootstrap er en meget god balance mellem ydeevne og udviklervenlig tilgang. Du behøver ikke at skrive kode, der bruges i almindelige komponenter, du får let tilpasning med Bootstrap utility-klasser, og ydeevnen er næsten native. Den har ikke så bredt et udvalg af utility-klasser som Tailwind, men det tillader dig at tilføje alle de stilarter og variabler, du har brug for, for at skabe lignende funktionalitet. Dette virker for mig som det ideale sted.
Konklusion
Som alt andet inden for tech vil valget af, hvilket UI-framework du bruger, afhænge af dit brugssag.
Hvis du har brug for en hurtig prototype — ville du være bedre stillet ved at vælge et komponentbibliotek. Mellem MUI, Bootstrap og andre — kan du vælge baseret på overvejelser såsom standardudseendet/følelsen, gengivelsesydeevne og tilpasningsevne. MUI er ydeevnestung og svær at tilpasse, men hvis du kan lide den måde, det ser ud på, og ikke har særligt tunge UI-elementer, er det et fantastisk valg.
Hvis du vil oprette brugerdefinerede komponenter, ville du være bedre stillet med TailwindCSS eller React Bootstrap — hvor CSS-utils gør det meget let at injicere de stilarter, du ønsker. Mit personlige valg ville være Tailwind — selvom det ikke har et open-source-komponentbibliotek som React Bootstrap, elsker jeg bare deres standardstile og den udtømmende karakter af de klasser, som de leverer.
Hvis du har brug for brugerdefinerede komponenter, men ikke kan lide den lange className-kombinering som i TailwindCSS — kunne du gå efter Styled Components. De lader dig skrive dine stilarter i JS, hvilket er lettere at navigere sammenlignet med almindelig CSS. Personligt er dette mit mindst favoritrammeværk blandt alle de viste, men nogle mennesker foretrækker det virkelig. Dette er rent baseret på udvikleropsoplevelsesovervejelser.
Hvilket UI-framework elsker du at arbejde med? Jeg vil gerne vide det!
