Tailwind vs Material UI vs Styled Components vs React Bootstrap

Tailwind vs Material UI vs Styled Components vs React Bootstrap

Kun kyse on käyttöliittymäkehyksistä, vaihtoehtoja on mahdollisesti satoja. Tässä artikkelissa vertailen niitä, joita pidän suosituimpina — seuraavien kriteerien perusteella:

1. Kehityksen helppous — helppo kirjoittaa, helppo lukea, nopea muuttaa
2. Suorituskyky — renderöinnin nopeus
3. Rakennuksen koko
4. Oppimisen helppous

Mennään siis asiaan!

TailwindCSS

Tailwind on apuluokkakirjasto, joka tarjoaa laajan valikoiman helppokäyttöisiä luokkia, joiden avulla voit manipuloida yleisiä CSS-ominaisuuksia. Kun ketjutat nämä luokat, saat halutun muotoilun.

Kehityksen helppous: Kehityksen helppouden osalta rakastan Tailwindia! Kirjoitat classNamesi juuri sinne, missä tarvitset tyylit, sinun ei tarvitse mennä toiseen tiedostoon (kuten CSS:n käytössä) tai edes toiseen kohtaan samassa tiedostossa (kuten JSS:n käytössä) nähdäksesi tyylit toiminnassa. Tämä tarjoaa loistavan kehittäjäkokemuksen. Joissakin tapauksissa saatat haluta luoda tyylisivun — esimerkiksi painikkeen varianttien muotoilu. Tässä tapauksessa voimme yksinkertaisesti luoda tyylisivun ja käyttää teeman direktiiviä Tailwindin teemamuuttujien hyödyntämiseen ja johdonmukaisten tyylien luomiseen. Vaikka jotkut saattavat pitää pitkien ketjutettujen luokkien lukemista merkintöjensä sisällä ärsyttävänä — minä henkilökohtaisesti pidän siitä erittäin kätevänä.

Suorituskyky: Renderöinnin nopeus on suunnilleen sama kuin natiivi HTML ja CSS, koska nämä ovat vain tyylisivun luokkia.

Rakennuksen koko: Tarjotakseen apuluokkia kaikenlaisiin käyttötapauksiin, joita kohtaamme kehityksen aikana, näiden kirjastojen koko on tietenkin oltava suuri. Kuitenkin kirjastojen, kuten PurgeCSS, käyttö auttaa poistamaan kaikki käyttämättömät luokat lopullisesta rakennuksesta. Tailwindilla on sisäänrakennettu vaihtoehto tähän. Näin ollen päädymme rakennuksen kokoon, joka on todennäköisesti hyvin lähellä natiivin CSS-luokkien käyttöä.

Oppimisen helppous: Aluksi saattaa kestää jonkin aikaa tottua eri attribuuttien classNameihin. Ne ovat kuitenkin melko intuitiivisia ja helppoja muistaa. Arvioisin Tailwindin olevan erittäin helppo oppia.

Tailwind on henkilökohtainen suosikkini kahdesta syystä — 1. heidän oletustyylit näyttävät hämmästyttäviltä — elegantti ja puhdas 1. heidän apuluokkavalikoimansa on valtava ja kattaa lähes jokaisen yleisen käyttötapauksen tehokkaasti. Nämä ovat syyt, joiden perusteella valitsisin Tailwindin muiden apuluokkakirjastojen, kuten Bootstrapin, sijasta.

MUI

MUI on käyttöliittymätyökalupakki, joka tarjoaa temaatisointikehyksen, muotoilukehyksen ja yleiset komponentit — kaikki heti käytettävissä.

Kehityksen helppous: MUI:n kanssa työskentely on erittäin hyvää, koska sinun ei tarvitse kirjoittaa paljon koodia, joka vaaditaan yleisille toiminnoille, kuten modaaleille, harmonikoille, valintalistoille, valikoille jne. MUI on kuitenkin kauhea näiden ennalta muotoiltujen komponenttien mukauttamisessa. Jopa säännöllisten komponenttien tyylien lisääminen on hieman ikävää lukea JSS:n vuoksi. Lisäksi, jos sinun on käytettävä ulkoisia komponentteja, niiden mukauttaminen siten, että ne vastaavat MUI:n ilmettä, on erittäin vaikeaa.

Suorituskyky: MUI on todennäköisesti hitain renderöinnissä. Minulla oli kerran avattava lista, jossa oli 1000 merkintää, ja MUI ei pystynyt lataamaan sitä ilman vähintään yhden sekunnin viiveistä. Heillä on raskaita tyylejä hover-efekteille, ripple-efekteille ja varjoille, jotka tekevät siitä laskennallisesti intensiivistä.

Rakennuksen koko: MUI:n rakennuksen koko on melko suuri verrattuna muihin käyttöliittymäkehyksiin. Tätä voidaan hallita käyttämällä toisella tasolla olevia tuonteja MUI:sta tuotaessa.

Oppimisen helppous: MUI:lla on erittäin monimutkainen dokumentaatio, jossa on suuri määrä mukautusvaihtoehtojen valintoja. Tämä tekee siitä erittäin vaikeaa oppia. Muotoilujärjestelmä on myös jonkin verran erilainen kuin yleiset saatavilla olevat vaihtoehdot. Näin ollen siihen tottuminen vie aikaa.

MUI näyttää hyvältä oletuksena. Se on erittäin hyvä vaihtoehto käyttää — VAIN JOS sinun suunnittelusi hyödyntää heidän oletustyylejä. Olisi hyvä vahvistaa, että heillä on kaikki komponentit, joita sinun on käytettävä, etukäteen. Kuitenkin, jos sinulla on mukautettu teema, jonka sinun on kehitettävä — tämä on pahin vaihtoehto. Se on raskas renderöinnissä ja erittäin vaikea mukauttaa. Olisit paremmin palvellut käyttämällä mitä tahansa muuta.

Styled Components

Styled components käyttää CSS-in-JS:ää komponenttien muotoiluun ja rekvisiittojen välittämiseen, jotka vaikuttavat muotoiluun.

Kehityksen helppous: Styled components käyttää CSS-in-JS:ää. Kehityksen helppouden osalta mielestäni se on todennäköisesti pahin. Joten CSS:ää kirjoittaessasi tarvitset tietenkin linterin — style lint — jotta jäsennys JS-tiedostossa olisi mahdollista. Mikä tahansa logiikka, joka liittyy rekvisiittoihin, on verbose kirjoittaa, koska se on lisättävä funktiona jokaiseen interpolaatiositeeseen. Ainoa mahdollinen hyöty on se, että verrattuna tavalliseen CSS:ään on helpompaa navigoida styled componenttiin kuin tyylisivun luokkaan. Styled componentin luominen jokaiseen pieneen muutokseen, jota sinun on tehtävä, on ehdottomasti erittäin turhauttavaa verrattuna Tailwindin tai Bootstrapin kaltaisen käyttöön.

Suorituskyky: Styled componenteilla on pieni yleiskustannus tavalliseen CSS:ään verrattuna. Kuitenkin tämä on melko minimaalinen.

Rakennuksen koko: Tässäkin tapauksessa on pieni yleiskustannus tavalliseen CSS:ään verrattuna, mutta hyvin minimaalinen. Itse asiassa joissa tapauksissa, joissa muotoilu ei ole liian laaja, styled-components-käyttö saattaa auttaa sinulla olemaan pienempi rakennuksen koko kuin apuluokkakirjastot, kuten Tailwind.

Oppimisen helppous: Styled components ovat melko helppo oppia, koska ne käyttävät vain lisäsyntaksia ja JS-interpolaatiota tavallisen CSS:n yli.

Styled-components itsenäisenä kehyksenä tuntuu minusta hieman tarkoituksettomalta. Ilman merkittävää etua SCSS:ään nähden ja enemmän sotkua, jonka jokainen styled component luo jokaiselle yksittäiselle muutokselle, neuvoisin käyttämään sitä vastaan. Jokaisessa tapauksessa minulle näyttää siltä, että se vain lisää yleiskustannusta. Saatan olla väärässä, koska olen käyttänyt niitä vain muutaman kerran projekteissa. Mutta kokemukseni niistä käytöstä on aina päättynyt kysymykseen — miksi tämä on olemassa?

React Bootstrap

React bootstrap on komponenttikirjasto, joka on rakennettu apuluokkakirjasto Bootstrapin päälle. Se tarjoaa tasapainon Tailwindin ja Material UI:n välillä, jossa saamme apuluokat Bootstrapista ja valmiit komponentit React Bootstrapista

Kehityksen helppous: React bootstrapilla on helppokäyttöisiä komponentteja, joten sinun ei tarvitse kirjoittaa omaa logiikkaasi yleisesti käytetyille komponenteille, kuten valinnaisille, modaaleille jne. On myös helppo mukauttaa nämä komponentit apuluokkien ja teemamuuttujien avulla. Lisäksi, koska heillä on yleiset apuluokat, on myös helppo muotoilla muista kirjastoista tuotuja komponentteja vastaamaan React Bootstrapin ilmettä.

Suorituskyky: React bootstrap-komponenteilla on lähes nolla yleiskustannusta tavallisen CSS:n käyttöön verrattuna. Niiden suorituskyky on erittäin lähellä tavallisen CSS:n käyttöä.

Rakennuksen koko: React bootstrap-komponentit, jos tuodaan ja pakataan oikein, vaikuttavat hyvin vähän rakennuksen kokoon.

Oppimisen helppous: React bootstrap-komponentit ovat yksinkertaisia, hyvin dokumentoituja ja helppoja toteuttaa. Bootstrap-luokat ovat samanlaisia kuin Tailwind ja niihin on helppo tottua.

React bootstrap on erittäin hyvä tasapaino suorituskyvyn ja kehittäjäystävällisyyden välillä. Sinun ei tarvitse kirjoittaa koodia, jota käytetään yleisissä komponenteissa, saat helppoja mukauttamisia Bootstrap-apuluokkien avulla, ja suorituskyky on lähellä natiivista. Sillä ei ole yhtä laajaa apuluokkakirjastoa kuin Tailwindilla, mutta se sallii sinun lisätä kaikki tyylit ja muuttujat, joita tarvitset samankaltaisen toiminnallisuuden luomiseen. Minusta tämä tuntuu makealta kohdalta.

Johtopäätös

Kuten kaikessa teknologiassa, valitsemasi käyttöliittymäkehys riippuu käyttötapauksestasi.

Jos tarvitset nopeaa prototyyppuä — sinun olisi parempi valita komponenttikirjasto. MUI:n, Bootstrapin ja muiden välillä — voit valita huomioon ottaen tekijät, kuten oletusilme, renderöinnin suorituskyky ja mukauttavuus. MUI on raskas suorituskyvyllä ja vaikea mukauttaa, mutta jos pidät siitä, miten se näyttää ja sinulla ei ole erityisen raskaita käyttöliittymäelementtejä, se on loistava vaihtoehto.

Jos haluat luoda mukautettuja komponentteja, sinun olisi parempi käyttää TailwindCSS:ää tai React Bootstrapia — jossa CSS-apuohjelmat tekevät erittäin helpoksi injektoida haluamasi tyylit. Henkilökohtainen valintani olisi Tailwind — vaikka sillä ei ole avoimen lähdekoodin komponenttikirjastoa kuten React Bootstrapilla, rakastan vain sen oletustyylejä ja niiden tarjoamien luokkien kattavaa luonnetta.

Jos tarvitset mukautettuja komponentteja, mutta et pidä pitkän classNameen ketjuttamisesta, kuten TailwindCSS:ssä — voit käyttää Styled Componentsia. Ne antavat sinulle mahdollisuuden kirjoittaa tyylisi JS:ssä, joka on helpompi navigoida verrattuna tavalliseen CSS:ään. Henkilökohtaisesti tämä on minun vähiten suosikkini kaikista kehyksistä, mutta jotkut ihmiset todella suosivat sitä. Tämä perustuu puhtaasti kehittäjäkokemuksen näkökohtiin.

Mitä käyttöliittymäkehystä rakastat työskentelemisen kanssa? Haluaisin tietää!