Tailwind vs Material UI vs Styled Components vs React Bootstrap
Nuair a thiocann sé go Fhramework UI, tá céadta ann ar a laghad. San alt seo, déanfaidh mé comparáid ar na cinn is coitianta dar liom — bunaithe ar na critéir seo a leanas:
- Éascaíochta an fhorbairt — éasca a scríobh, éasca a léamh, tapa a athrú
- Feidhmíocht — Luas an bhreacadáin
- Méid an tógála
- Éascaíochta an fhoghlaim
Ar aghaidh linn ansin!
TailwindCSS
Is leabharlann rang fóntais a bhí i Tailwind a nochtann raon leathan de ranganna atá éasca a úsáid a ligint duit airíonna CSS coitianta a ionramháil. Nuair a bhíonn na ranganna seo fite fuaite agat, faigheann muid an stíl ar iarr muid.
Éascaíochta an fhorbairt: I dtéarmaí éascaíochta an fhorbairt, is dócha go bhfuil grá aici agam do Tailwind! Scríobhann tú do classNames díreach san áit ar theastaíonn na stíleanna uait, ní gá duit dul chuig comhad eile (mar atá le CSS a úsáid) nó fiú pointe eile sa chomhad céanna (mar atá le JSS a úsáid) chun na stíleanna a fheidhmiú. Soláthraíonn sé seo taithí forbartha iontach. I roinnt cásanna, b'fhéidir go raibh fonn ort scarbhileog a chruthú — m.sh. stíleanna athruithe do bhótún. Sa chás seo, is féidir linn scarbhileog a chruthú agus an treoir téama a úsáid chun athróga téama Tailwind a úsáid agus stíleanna comhsheasmhach a chruthú. Cé sin féin, d'fhéadfadh sé a bheith suarach ag daoine eile an liosta fada de ranganna fite fuaite a léamh laistigh dena marc — faighim go bhfuil sé an-áisiúil dom féin.
Feidhmíocht: Tá luas an bhreacadáin thart ar an ionann agus HTML agus CSS dhúchasacha ós rud é nach bhfuil ann ach ranganna i scarbhileog.
Méid an tógála: Chun ranganna fóntais a sholáthar do raon leathan cásanna úsáide a thagann orainn le linn an fhorbairt, ar ndóigh, caithfidh méid na leabharlann seo a bheith mór. Mar sin féin, cabhraíonn leabharlanna ar nós PurgeCSS na ranganna neamhúsáidte ar fad a bhaint ó thógail dheiridh. Tá rogha iomlán ag Tailwind a dhéanamh seo. Dá bharr sin, tógann muid méid tógála atá nach mór go díreach cosúil le húsáid ranganna CSS dhúchais.
Éascaíochta an fhoghlaim: Ar dtús b'fhéidir go dtógfadh sé am éigin chun cleachtadh a fháil ar na classNames do na hairíonna difriúla. Ach tá siad go réasúnta intuigthe agus éasca a choinneáil i gcuimhne. Ba dhóigh liom go bhfuil Tailwind an-éasca a fhoghlaim.
Tá Tailwind i ngrá pearsanta agam ar 2 chúis — 1. bíonn a stíleanna réamhshocraithe go hiontach — geal agus geal 1. tá raon fada ranganna fóntais aici agus clúdaíonn sí beagnach gach cás úsáide coitianta go héifeachtach. Is iad seo na cúiseanna ar thaidhfinn Tailwind a roghnú i bhfianaise leabharlanna ranganna fóntais eile ar nós Bootstrap.
MUI
Is bailiúchán UIí a bhí i MUI a sholáthraíonn freamh tionscail, freamh stíleanna agus comhpháirt choitianta — ar fad ar fáil ar an toirt a úsáid.
Éascaíochta an fhorbairt: Tá obair le MUI go breá mar nach gá duit an méid sin de chód a scríobh ar theastaíonn sé do fheidhmiúlachtaí coitianta ar nós modúil, foscéimeanna, roghnaighte titim, roghchlár etc. Ach, níl MUI ar fhonn ar chor ar bith nuair a thiocann sé go dtí na comhpháirt réamhstílithe seo a chustaimíoiriú. Fiú stíleanna a chur le comhpháirt rialta tá sé beagáinín geal a léamh mar gheall ar JSS. Thairis sin, má theastaíonn uait roinnt comhpháirt sheachtrach a úsáid, tá siad an-dhúshlánach a chustaimíoiriú ionas go bhfreagraíonn tú do bhraistint agus mothú MUI.
Feidhmíocht: B'fhéidir go bhfuil MUI an-fhada i bhfreagairt. Fadó, bhí roghchlár agam le 1000 iontrálacha, agus ní thiocfadh le MUI a bhreacadh gan iomrall ar a laghad 1 soicind. Tá stíleanna troma aici do éifeachtaí foluain, éifeachtaí foluain agus scáthanna a dhéanann sé ríomhdhlúthach.
Méid an tógála: Tá méid tógála MUI réasúnta mór i gcomparáid le framewairí UI eile. Is féidir é seo a bhainistiú trí iontrálacha dara-leibhéal a úsáid uaidh agus a bhaint ó MUI.
Éascaíochta an fhoghlaim: Tá dócúmeid an-chasta ag MUI le líon mór roghanna do chustaimíoirithe. Fágann sé seo go bhfuil sé an-dhúshlánach a fhoghlaim. Tá an córas stíleanna beagáinín difriúil freisin ó na roghanna coitianta atá ann. Dá bharr sin, téann sé in am a chleachtadh.
Bíonn dreach maith ag MUI ar an réamhshocrú. Is rogha an-bhreá a úsáid — ACHTAIN MÁ BHÍONN d'dhearadh ag úsáid a réamhstíleanna. Bheadh sé deas a dheimhniú go bhfuil na comhpháirt go léir agat ar gá duit a úsáid roimh ré. Mar sin féin, má bhíonn téama pearsanta agat ar gá duit a fhorbairt — seo an rogha is measa. Tá sé trom ar bhreacadh agus an-dhúshlánach a chustaimíoiriú. Bheadh tú níos fearr as rud ar bith eile a úsáid.
Styled Components
Úsáideann comhpháirt stílithe CSS i JS chun comhpháirt a stíleáil agus props a rith a théann i bhfeidhm ar stíleáil freisin.
Éascaíochta an fhorbairt: Úsáideann comhpháirt stílithe CSS i JS. I dtéarmaí éascaíochta an fhorbairt, is dócha go bhfuil sé ar an bhfear is measa. Mar sin, agus tú ag scríobh an CSS, is cinnte go bhfuil druilíneoir uait — stíl lint — chun fástú laistigh d'fhomhad JS. Is briathartha go páirt í aon loighic ar bith a bhaineann le props agus caithfear a chur leis mar fheidhm ag gach suíomh idirshuí. Is é an t-aon bhuntáiste a d'fhéadfadh a bheith ann ná go bhfuil sé níos éasca a dhul chuig comhpháirt stílithe ná rang i scarbhileog i gcomparáid le CSS rialta. Comhpháirt stílithe a chruthú do gach athrú beag ar theastaíonn uait a dhéanamh ar an dóigh is cinnte go bhfuil sé an-bhuartha i gcomparáid le rud éigin ar nós Tailwind nó Bootstrap a úsáid.
Feidhmíocht: Tá beagáinín ualach ag comhpháirt stílithe ar CSS rialta. Mar sin féin, tá sé réasúnta beag.
Méid an tógála: Tá beagáinín ualach ar CSS rialta anseo arís, ach an-bheag. I ndáiríre, i roinnt cásanna nuair nach bhfuil an iomarca stíleáin ann, d'fhéadfadh sé a bheith ina chúnamh do stílí a úsáid-comhpháirt a bheith agat méid tógála níos lú ná leabharlanna aicme fóntais ar nós Tailwind.
Éascaíochta an fhoghlaim: Tá comhpháirt stílithe réasúnta éasca a fhoghlaim ós rud é nach bhfuil ann ach roinnt comhréir bhreise agus idirshuí JS ar CSS rialta.
Bonn-stíle-comhpháirt mar fhramewark neamhspleách creidim go bhfuil sé beagáinín gan sprioc. Gan aon bhuntáiste suntasach ar SCSS agus níos mó den bhrocamas a cruthaíodh ag gach comhpháirt stíilithe do gach athrú stíle amháin, ba cheart dom dhul i gcoinne a úsáid. I ngach cás, domh, dealraíonn sé go bhfuil ach ualach a chur leis. B'fhéidir go bhfuilim mícheart ós rud é nach nduirt mé iad a úsáid ach cúpla uair i dtionscadail. Ach bhí m'iarracht air a úsáid i gcónaí ag críochnú leis an cheist — cén fáth a bhfuil sé ann?
React Bootstrap
Is leabharlann comhpháirt atá i React bootstrap arna tógáil ar an leabharlann aicme fóntais — Bootstrap. Soláthraíonn sé iarmhéid idir Tailwind agus Material UI, áit ar faighimid na ranganna fóntais ó Bootstrap agus na comhpháirt réamhdéanta ó React Bootstrap
Éascaíochta an fhorbairt: Tá comhpháirt an-éasca a úsáid ag React bootstrap ionas nach gá duit do loighic féin a scríobh do chomhpháirt a úsáidtear go coitianta ar nós roghnaighte, modúil, etc. Tá sé freisin éasca na comhpháirt seo a chustaimíoiriú ag úsáid ranganna fóntais agus athróga téama. Thairis sin, mar gheall ar go bhfuil ranganna fóntais coitianta aici, déanann sé comhpháirt ó leabharlanna eile a stíleáil chun gur dhóigh leo go bhfreagraíonn siad do bhraith agus mothú React Bootstrap a éascú.
Feidhmíocht: Tá beagnach aon ualach ag comhpháirt React bootstrap ar CSS rialta. Tá a bhfeidhmíocht an-ghar do CSS rialta a úsáid.
Méid an tógála: Má bhíonn comhpháirt React bootstrap iontráilte agus páipéir go ceart, beidh go leor beag a dhul chun an méid tógála.
Éascaíochta an fhoghlaim: Tá comhpháirt React bootstrap simplí, cruinn-dócúmhnithe agus éasca a chur i bhfeidhm. Tá na ranganna bootstrap cosúil le Tailwind agus tá sé éasca a chleachtadh.
Tá React bootstrap ina iarmhéid an-bhreá idir feidhmíocht agus cairdeas forbróra. Ní gá duit cód a scríobh ar a úsáidtear i gcomhpháirt coitianta, gheobhaidh tú custaimíoirithe éasca le ranganna fóntais Bootstrap, agus tá feidhmíocht gur geal is CSS. Níl an raon leathan ranganna fóntais aici ar nós Tailwind, ach ligeann sí duit na stíleanna agus athróga ar fad atá uait a chur leis. Is ionann sé seo a dhéanamh, creidim go bhfuil sé i spás nós fearr.
Críoch
Mar is gnách i dtech, beidh sé ag brath ar do chás fheidhme an creat UI ar thaidhfinn tú.
Mura bhfuil tú ag iarraidh prótataip thapa — bheadh tú níos fearr as ag roghnú leabharlann comhpháirt. Idir MUI, Bootstrap agus eile — is féidir leat a roghnú bunaithe ar bhreithnithe ar nós an dreach/mothú réamhshocraithe, feidhmíochta bhreacadáin agus custaimíoirithe. Tá MUI trom ar fheidhmíochta agus deacair a chustaimíoiriú, ach má bheidh grá agat ar an dóigh ar osclaíonn sé agus nach bhfuil eilimintí UI go páirt throm agat, is rogha an-bhreá a bhí ann.
Má theastaíonn uait comhpháirt pearsanta a chruthú, bheadh tú níos fearr as le TailwindCSS nó React Bootstrap — áit ar dhéanann an CSS utils go héasca na stíleanna ar iarr tú a dhíbirt. Ba bhéadh mo rogha pearsanta Tailwind — cé nach bhfuil leabharlann comhpháirt foinse oscailte aici ar nós React Bootstrap, grá aici a fhéadfaidh a bheith ann a phríobháideach dóib agus an spéis fada d'na ranganna soláthraithe aici.
Má theastaíonn comhpháirt dhéanmhala duit ach nach bhfuil caint go bhfuil gréine aicme fada ar nós i TailwindCSS ann — d'fhéadfá a dhul ar Stílí Comhpháirt. Ligeann siad duit do stíleanna a scríobh i JS atá níos éasca a dhul i gcomparáid le CSS rialta. Go pearsanta, is ionann sé seo mo thaobh is olc de ar fad na framewairí, ach is breá le daoine eile a roghnú. Is bunaithe go hiomlán ar bhreithnithe taithí forbróra.
Cén creat UI atá i ngrá agat a úsáid? Ba bhreá liom a fhios!
