Tailwind vs Material UI vs Styled Components vs React Bootstrap
Kada je u pitanju UI okviri, postoji moguće stotine. U ovom članku ću usporediti one koji se po mom mišljenju koriste najčešće — na osnovu sljedećih kriterija:
- Lakoća razvoja — lako pisati, lako čitati, brzo mijenjati
- Performanse — Brzina renderiranja
- Veličina gradenog paketa
- Lakoća učenja
Hajde da počnemo!
TailwindCSS
Tailwind je biblioteka utility klasa koja nudi širok raspon jednostavnih klasa koje vam omogućuju manipulaciju uobičajenim CSS svojstvima. Kada kombinirate ove klase, dobivate željeni stil.
Lakoća razvoja: Što se tiče lakoće razvoja, obožavam Tailwind! Pišete svoje klasne nazive upravo gdje vam trebaju stilovi, ne trebate ići u drugu datoteku (kao kod korištenja CSS-a) ili čak na drugu točku u istoj datoteci (kao kod korištenja JSS-a) da vidite stilove u akciji. To nudi fantastično iskustvo programera. U nekim slučajevima, možda ćete zaista htjeti kreirati stilsku datoteku — npr. oblikovanje varijanti gumba. U tom slučaju, možemo jednostavno kreirati stilsku datoteku i koristiti theme direktivu da iskoristimo Tailwind-ove theme varijable i kreiramo konzistentne stilove. Iako, neki ljudi mogu smatrati naporno čitati dugačak popis lanaca klasa unutar njihove oznake — ja osobno smatram da je vrlo praktično.
Performanse: Brzina renderiranja je otprilike ista kao kod nativnog HTML-a i CSS-a jer su to samo klase u stilskoj datoteci.
Veličina gradenog paketa: Da bi se omogućile utility klase za sve raznolikosti primjena koje naiđemo tijekom razvoja, naravno da veličina ovih biblioteka mora biti velika. Međutim, korištenje biblioteka kao što je PurgeCSS pomaže ukloniti sve nekorištene klase iz finalnog gradenog paketa. Tailwind ima ugrađenu opciju za to. Tako završimo s veličinom gradenog paketa koja je vjerojatno vrlo bliska korištenju nativnih css klasa.
Lakoća učenja: U početku može potrajati neko vrijeme da se naviknete na klasne nazive za različita svojstva. Međutim, oni su prilično intuitivni i laki za pamćenje. Tailwind bih ocijenio kao vrlo lak za učenje.
Tailwind je moj osobni favorit iz 2 razloga — 1. njihovi zadani stilovi izgledaju fantastično — elegantno i čisto 1. njihov raspon utility klasa je ogroman i učinkovito pokriva gotovo svaki česti primjenu. To su razlozi zbog kojih bih odabrao Tailwind umjesto drugih biblioteka utility klasa kao što je Bootstrap.
MUI
MUI je UI toolkit koji pruža framework za oblikovanje tema, framework za oblikovanje i česte komponente — sve odmah dostupne za korištenje.
Lakoća razvoja: Rad s MUI-om je vrlo dobar jer ne trebate pisati većinu koda potrebnog za uobičajene funkcionalnosti poput modalnih prozora, akordiona, padajućih listi za odabir, izbornika itd. Međutim, MUI je strašan kada je u pitanju prilagođavanje ovih unaprijed oblikovanih komponenti. Čak i dodavanje stilova na obične komponente malo je čudno čitati zbog JSS-a. Štoviše, ako trebate koristiti vanjske komponente, vrlo je teško prilagoditi ih tako da se podudaraju s izgledom MUI-ja.
Performanse: MUI je vjerojatno najsporiji u renderiranju. Jednom sam imao padajuću listu sa 1000 stavki, a MUI nije mogao učitati bez barem 1-sekundnog kašnjenja. Imaju neke teške stilove za hover efekte, ripple efekte i sjene koje to čine računski intenzivnim.
Veličina gradenog paketa: Veličina gradenog paketa MUI-ja je velika u usporedbi s ostalim UI okvirima. To se može upravljati korištenjem uvoza drugog nivoa kad god se uvozi iz MUI-ja.
Lakoća učenja: MUI ima vrlo složenu dokumentaciju s velikim brojem mogućnosti za prilagođavanja. To ga čini vrlo teško naučiti. Sustav oblikovanja je također nešto drugačiji od općih dostupnih opcija. Stoga, navikavanje na to traje vrijeme.
MUI izgleda dobro po zadanosti. To je vrlo dobar izbor — SAMO AKO vaš dizajn koristi njihove zadane stilove. Trebalo bi potvrditi da imaju sve komponente koje trebate koristiti unaprijed. Međutim, ako imate prilagođenu temu koju trebate razviti — ovo je najgora opcija. Teško je na renderiranju i vrlo teško za prilagođavanje. Bolje biste bili koristiti bilo što drugo.
Styled Components
Styled components koriste CSS u JS-u kako bi vas omogućili da oblikujete komponente i prosljeđujete svojstva koja utječu na oblikovanje.
Lakoća razvoja: Styled components koriste CSS u JS-u. Što se tiče lakoće razvoja, mislim da je to vjerojatno najgore. Dakle, dok pišete CSS, očito trebate linter — style lint — kako bi omogućili parsiranje unutar JS datoteke. Svaka logika koja uključuje svojstva je opširna za pisanje jer mora biti dodana kao funkcija na svakom mjestu interpolacije. Jedina potencijalna prednost je da je, u usporedbi s običnim CSS-om, lakše navigirati do styled komponente nego klase u stilskoj datoteci. Kreiranje styled komponente za svaku malu promjenu koju trebate je sigurno vrlo frustrirajuće u usporedbi s korištenjem nečega poput Tailwinda ili Bootstrapa.
Performanse: Styled components imaju blagu dodatnu opterećenja u odnosu na obični CSS. Međutim, to je sasvim minimalno.
Veličina gradenog paketa: Opet, postoji blago dodatno opterećenja u odnosu na obični CSS, ali vrlo minimalno. Zapravo, u nekim slučajevima gdje nema previše oblikovanja, korištenje styled-components moglo bi vam pomoći da imate veličinu gradenog paketa manju od biblioteka utility klasa poput Tailwinda.
Lakoća učenja: Styled components su relativno laki za učenje jer koriste samo neku dodatnu sintaksu i JS interpolaciju preko običnog CSS-a.
Styled-components kao samostalan framework čini se mi malo besmislenim. Bez značajne prednosti u odnosu na SCSS i više nerede stvarane svakom styled komponentom za svaku promjenu stila, savjetovao bih protiv korištenja. U svakom slučaju, za mene, čini se da samo dodaje dodatno opterećenje. Možda se varam jer sam ih koristio samo par puta u projektima. Ali moje iskustvo korištenja toga je uvijek završilo s pitanjem — zašto to postoji?
React Bootstrap
React bootstrap je biblioteka komponenti izgrađena na vrhu biblioteke utility klasa — Bootstrapa. Pruža balans između Tailwinda i Material UI, gdje dobivamo utility klase iz Bootstrapa i gotove komponente iz React Bootstrapa
Lakoća razvoja: React bootstrap ima jednostavne komponente za korištenje tako da ne trebate pisati vlastitu logiku za često korištene komponente poput selekta, modalnih prozora itd. Također je lako prilagoditi ove komponente korištenjem utility klasa i theme varijabli. Dodatno, jer imaju česte utility klase, također postaje lako oblikovati komponente uvezene iz ostalih biblioteka kako bi se podudarale s izgledom React Bootstrapa.
Performanse: React bootstrap komponente gotovo nemaju dodatno opterećenje u odnosu na korištenje običnog CSS-a. Njihove performanse su vrlo bliske korištenju običnog CSS-a.
Veličina gradenog paketa: React bootstrap komponente, ako se ispravno uvezu i pakuju, imat će vrlo mali utjecaj na veličinu gradenog paketa.
Lakoća učenja: React bootstrap komponente su jednostavne, dobro dokumentirane i lako za implementaciju. Bootstrap klase su slične Tailwindu i laki su za navikavanje.
React bootstrap je vrlo dobar balans između performansi i prijaznošti programera. Ne trebate pisati kod koji se koristi u čestim komponentama, dobivate jednostavna prilagođavanja s Bootstrap utility klasama, a performanse su blizu nativnih. Nema tako sveobuhvatnog raspora utility klasa kao Tailwind, ali omogućuje vam da dodate sve stilove i varijable koje trebate za stvaranje slične funkcionalnosti. Ovo meni čini se kao idealna kombinacija.
Zaključak
Kao sve u tehnologiji, koji će UI okvir odaberete ovisit će o vašem primjeni upotrebe.
Ako trebate brz prototip — bili biste bolje s odabirom biblioteke komponenti. Između MUI, Bootstrapa i ostalih — možete odabrati na osnovu razmatranja kao što su zadani izgled/osjećaj, performanse renderiranja i prilagodljivost. MUI je teško na performansama i teško za prilagođavanje, ali ako vam se sviđa kako izgleda i nemate posebno teške UI elemente, to je odličan izbor.
Ako želite kreirati prilagođene komponente, bili biste bolje s TailwindCSS-om ili React Bootstrapom — gdje CSS alati čine vrlo lako injektirati stilove koje trebate. Moj osobni izbor bi bio Tailwind — iako nema biblioteke komponenti otvorenog koda kao React Bootstrap, jednostavno obožavam njihove zadane stilove i iscrpnu prirodu klasa koje oni pružaju.
Ako trebate prilagođene komponente ali ne sviđaju vam se dugi className lanci kao u TailwindCSS — možete odabrati Styled Components. Omogućavaju vam da napišete vaše stilove u JS-u što je lakše navigirati u usporedbi s običnim CSS-om. Osobno, ovo je moj najmanje omiljeni od svih okvira, ali neki ljudi ga zaista preferiraju. Ovo je čisto na osnovu razmatranja iskustva programera.
Koji vam se UI okvir najčešće koristi? Volio bih znati!
