Tailwind vs Material UI vs Styled Components vs React Bootstrap
Quando si tratta di framework UI, ce ne sono probabilmente centinaia. In questo articolo, confronterò quelli che ritengo i più popolari — in base ai seguenti criteri:
- Facilità di sviluppo — facile da scrivere, facile da leggere, veloce da modificare
- Performance — Velocità di rendering
- Dimensione della build
- Facilità di apprendimento
Iniziamo allora!
TailwindCSS
Tailwind è una libreria di classi utility che espone un'ampia gamma di classi facili da usare che ti permettono di manipolare proprietà CSS comuni. Quando concateni queste classi, ottieni lo stile desiderato.
Facilità di sviluppo: In termini di facilità di sviluppo, adoro Tailwind! Scrivi i tuoi classNames proprio dove hai bisogno degli stili, non devi andare in un altro file (come con CSS) o nemmeno in un altro punto nello stesso file (come con JSS) per vedere gli stili in azione. Questo offre un'esperienza di sviluppo fantastica. In alcuni casi, potresti effettivamente voler creare un foglio di stile — ad es. styling delle varianti per un pulsante. In questo caso, possiamo semplicemente creare un foglio di stile e utilizzare la direttiva theme per sfruttare le variabili tema di tailwind e creare stili coerenti. Sebbene, alcuni potrebbero trovare fastidioso leggere il lungo elenco di classi concatenate all'interno del loro markup — personalmente lo trovo molto conveniente.
Performance: La velocità di rendering è circa la stessa di HTML e CSS nativi poiché si tratta semplicemente di classi in un foglio di stile.
Dimensione della build: Per fornire classi utility per la varietà di casi d'uso che incontriamo durante lo sviluppo, ovviamente, la dimensione di queste librerie deve essere grande. Tuttavia, l'uso di librerie come PurgeCSS aiuta a rimuovere tutte le classi inutilizzate dalla build finale. Tailwind ha un'opzione integrata per farlo. Così, finiamo con una dimensione della build che è probabilmente molto vicina all'utilizzo di classi CSS native.
Facilità di apprendimento: Inizialmente potrebbe volerci un po' di tempo per abituarsi ai classNames per i diversi attributi. Tuttavia, sono abbastanza intuitivi e facili da ricordare. Valuterei Tailwind come molto facile da imparare.
Tailwind è un mio preferito personale per 2 motivi — 1. i loro stili predefiniti hanno un aspetto incredibile — eleganti e puliti 1. la loro gamma di classi utility è enorme e copre quasi tutti i casi d'uso comuni in modo efficace. Questi sono i motivi per cui sceglierei Tailwind rispetto ad altre librerie di classi utility come Bootstrap.
MUI
MUI è un toolkit UI che fornisce un framework di tema, un framework di styling e componenti comuni — tutti immediatamente disponibili all'uso.
Facilità di sviluppo: Lavorare con MUI è molto buono poiché non devi scrivere molto del codice richiesto per funzionalità comuni come modali, accordion, select a discesa, menu ecc. Tuttavia, MUI è terribile quando si tratta di personalizzare questi componenti pre-styled. Anche aggiungere stili ai componenti regolari è un po' brutto da leggere a causa di JSS. Inoltre, se hai bisogno di utilizzare alcuni componenti esterni, sono molto difficili da personalizzare in modo da corrispondere all'aspetto e alla sensazione di MUI.
Performance: MUI è probabilmente il più lento nel rendering. Una volta avevo un dropdown con 1000 voci, e MUI non poteva caricarlo senza almeno un ritardo di 1 secondo. Hanno alcuni stili pesanti per effetti hover, effetti ripple e ombre che lo rendono computazionalmente intensivo.
Dimensione della build: La dimensione della build di MUI è abbastanza grande rispetto ad altri framework UI. Questo può essere gestito utilizzando importazioni di secondo livello ogni volta che si importa da MUI.
Facilità di apprendimento: MUI ha una documentazione molto complessa con un gran numero di opzioni per personalizzazioni. Questo lo rende molto difficile da imparare. Il sistema di styling è anche leggermente diverso dalle opzioni generali disponibili. Quindi, abituarsi ad esso richiede tempo.
MUI ha un buon aspetto per impostazione predefinita. È un'opzione molto buona da usare — SOLO SE il tuo design fa uso dei loro stili predefiniti. Sarebbe bene confermare in anticipo che hanno tutti i componenti che devi usare. Tuttavia, se hai un tema personalizzato che devi sviluppare — questa è la peggiore opzione. È pesante nel rendering e molto difficile da personalizzare. Faresti meglio a usare qualcos'altro.
Styled Components
I componenti styled utilizzano CSS in JS per permetterti di stilizzare componenti e passare prop che influenzano anche lo stile.
Facilità di sviluppo: I componenti styled utilizzano CSS in JS. In termini di facilità di sviluppo, penso che sia probabilmente il peggiore. Quindi mentre scrivi il CSS, ovviamente hai bisogno di un linter — style lint — per consentire il parsing all'interno di un file JS. Qualsiasi logica che coinvolga prop è verbose da scrivere poiché deve essere aggiunta come funzione ad ogni sito di interpolazione. L'unico potenziale vantaggio è che rispetto al CSS regolare, è più facile navigare verso un componente styled rispetto a una classe in un foglio di stile. Creare un componente styled per ogni piccola modifica di cui hai bisogno è decisamente molto frustrante rispetto all'utilizzo di qualcosa come Tailwind o Bootstrap.
Performance: I componenti styled hanno un leggero overhead rispetto al CSS regolare. Tuttavia, questo è abbastanza minimo.
Dimensione della build: Anche qui, c'è un leggero overhead rispetto al CSS regolare, ma molto minimo. In effetti, in alcuni casi in cui non c'è troppo styling, l'utilizzo di styled-components potrebbe aiutarti ad avere una dimensione della build più piccola rispetto alle librerie di classi utility come Tailwind.
Facilità di apprendimento: I componenti styled sono abbastanza facili da imparare poiché utilizzano solo una sintassi aggiuntiva e interpolazione JS rispetto al CSS regolare.
Styled-components come framework autonomo mi sembra un po' inutile. Senza alcun vantaggio significativo rispetto a SCSS e più disordine creato da ogni componente styled per ogni singolo cambio di stile, sconsiglierei di usarlo. In ogni caso, per me, sembra semplicemente aggiungere overhead. Potrei sbagliare poiché li ho usati solo un paio di volte nei progetti. Ma la mia esperienza di utilizzo ha sempre portato alla domanda — perché esiste?
React Bootstrap
React bootstrap è una libreria di componenti costruita sulla libreria di classi utility — Bootstrap. Fornisce un equilibrio tra Tailwind e Material UI, in cui otteniamo le classi utility da Bootstrap e i componenti già pronti da React Bootstrap
Facilità di sviluppo: React bootstrap ha componenti facili da usare, quindi non devi scrivere la tua logica per componenti comunemente usati come select, modali ecc. È anche facile personalizzare questi componenti utilizzando classi utility e variabili tema. Inoltre, poiché hanno classi utility comuni, diventa anche facile stilizzare i componenti importati da altre librerie per corrispondere all'aspetto e alla sensazione di React Bootstrap.
Performance: I componenti React bootstrap hanno quasi nessun overhead rispetto all'utilizzo di CSS regolare. Le loro prestazioni sono molto vicine all'utilizzo di CSS regolare.
Dimensione della build: I componenti React bootstrap, se importati e raggruppati correttamente, avranno un impatto molto ridotto sulla dimensione della build.
Facilità di apprendimento: I componenti React bootstrap sono semplici, ben documentati e facili da implementare. Le classi bootstrap sono simili a Tailwind e sono facili da assimilare.
React bootstrap è un ottimo equilibrio tra performance e user-friendliness per gli sviluppatori. Non devi scrivere codice che viene utilizzato nei componenti comuni, ottieni personalizzazioni facili con le classi utility Bootstrap, e le prestazioni sono quasi native. Non ha una gamma di classi utility così ampia come Tailwind, ma ti permette di aggiungere tutti gli stili e le variabili di cui hai bisogno per creare funzionalità simili. Per me, questo sembra il punto dolce.
Conclusione
Come tutto in tech, quale framework UI scegli dipenderà dal tuo caso d'uso.
Se hai bisogno di un prototipo veloce — faresti meglio a scegliere una libreria di componenti. Tra MUI, Bootstrap e altri — puoi scegliere in base a considerazioni come l'aspetto/sensazione predefinita, le prestazioni di rendering e la personalizzabilità. MUI è performance-heavy e difficile da personalizzare, ma se ti piace il suo aspetto e non hai elementi UI particolarmente pesanti, è un'opzione fantastica.
Se vuoi creare componenti personalizzati, faresti meglio con TailwindCSS o React Bootstrap — dove gli utility CSS rendono molto facile iniettare gli stili che desideri. La mia scelta personale sarebbe Tailwind — sebbene non abbia una libreria di componenti open source come React Bootstrap, amo semplicemente i loro stili predefiniti e la natura esaustiva delle classi fornite da loro.
Se hai bisogno di componenti personalizzati ma non ti piace il long className chaining come in TailwindCSS — potresti optare per Styled Components. Ti permettono di scrivere i tuoi stili in JS che è più facile da navigare rispetto al CSS regolare. Personalmente, questo è il mio preferito minore di tutti i framework, ma alcune persone lo preferiscono davvero. Questo si basa puramente su considerazioni di esperienza di sviluppo.
Quale framework UI ami usare? Mi piacerebbe saperlo!
