Tailwind vs Material UI vs Styled Components vs React Bootstrap

Tailwind vs Material UI vs Styled Components vs React Bootstrap

Pokud jde o UI frameworky, existuje jich možná stovky. V tomto článku budu porovnávat ty, které považuji za nejpopulárnější — na základě následujících kritérií:

1. Snadnost vývoje — snadné psaní, snadné čtení, rychlé změny
2. Výkon — Rychlost vykreslování
3. Velikost buildu
4. Snadnost učení

Pojďme tedy na to!

TailwindCSS

Tailwind je knihovna utility tříd, která poskytuje širokou řadu snadno použitelných tříd, které vám umožňují manipulovat běžné CSS vlastnosti. Když tyto třídy spojíte, dostanete požadovaný styl.

Snadnost vývoje: Pokud jde o snadnost vývoje, miluji Tailwind! Svůj className píšete přesně tam, kde potřebujete styly, nemusíte jít do jiného souboru (jako u CSS) nebo dokonce na jiné místo v tomtéž souboru (jako u JSS), abyste viděli styly v praxi. To poskytuje fantastickou zkušenost pro vývojáře. V některých případech se můžete rozhodnout vytvořit stylopis — např. styling variant tlačítka. V tom případě můžeme vytvořit stylopis a použít direktivu theme k využití tailwindových proměnných motivu a vytvoření konzistentních stylů. Ačkoli někteří lidé mohou přijít na to, že čtení dlouhého seznamu řetězených tříd v jejich značce je obtěžující — já osobně to nacházím velmi pohodlné.

Výkon: Rychlost vykreslování je přibližně stejná jako nativní HTML a CSS, protože jde jen o třídy v stylopisech.

Velikost buildu: Aby bylo možné poskytnout utility třídy pro všechny případy použití, s nimiž se setkáváme během vývoje, samozřejmě musí být velikost těchto knihoven velká. Nicméně použití knihoven, jako je PurgeCSS, pomáhá odstranit všechny nepoužívané třídy z konečného buildu. Tailwind má vestavěnou možnost k tomu. Končíme tedy s velikostí buildu, která je pravděpodobně velmi blízká použití nativních css tříd.

Snadnost učení: Zpočátku může trvat nějakou dobu, než si zvyknete na classNames pro různé atributy. Jsou však poměrně intuitivní a snadno zapamatovatelné. Tailwind bych hodnotil jako velmi snadný na učení.

Tailwind je mou osobní volbou ze 2 důvodů — 1. jejich výchozí styly vypadají úžasně — elegantně a čistě 1. jejich sortiment utility tříd je obrovský a efektivně pokrývá téměř každý běžný případ použití. To jsou důvody, pro které bych si zvolil Tailwind před dalšími knihovnami utility tříd, jako je Bootstrap.

MUI

MUI je UI toolkit, který poskytuje framework pro motivy, framework pro stylování a běžné komponenty — všechny okamžitě k dispozici.

Snadnost vývoje: Práce s MUI je velmi dobrá, protože nemusíte psát mnohem kódu potřebného pro běžné funkčnosti, jako jsou modály, akordeony, rozbalovací selekty, nabídky atd. Nicméně MUI je hrozná, pokud jde o přizpůsobení těchto předem stylovaných komponent. I přidání stylů do běžných komponent je trochu ošklivé na čtení kvůli JSS. Navíc, pokud potřebujete použít některé externí komponenty, je velmi obtížné je přizpůsobit tak, aby odpovídaly vzhledu a dojetí MUI.

Výkon: MUI je pravděpodobně nejpomalejší na vykreslování. Jednou jsem měl rozbalovací nabídku s 1000 položkami a MUI ji nemohla načíst bez aspoň 1sekundového zpoždění. Mají těžké styly pro efekty najetí, vlnové efekty a stíny, které to činí výpočetně náročným.

Velikost buildu: Velikost buildu MUI je poměrně velká v porovnání s dalšími UI frameworky. To lze zvládat použitím dovozu na druhé úrovni při importu z MUI.

Snadnost učení: MUI má velmi komplexní dokumentaci s velkým počtem možností přizpůsobení. To jej činí velmi obtížným na učení. Systém stylování se také poněkud liší od obecně dostupných možností. Proto si na něj zvyknutí chvíli trvá.

MUI vypadá dobře standardně. Je to velmi dobrá možnost k použití — POUZE POKUD váš design využívá jejich výchozí styly. Bylo by dobré předem potvrdit, že mají všechny komponenty, které potřebujete použít. Nicméně, pokud máte vlastní motiv, který potřebujete vyvinout — toto je nejhorší volba. Je těžké na vykreslování a velmi obtížné na přizpůsobení. Bylo by lépe vybrat si cokoli jiného.

Styled Components

Styled components používají CSS v JS, aby vám umožnily stylovat komponenty a předávat props, které také ovlivňují stylování.

Snadnost vývoje: Styled components používají CSS v JS. Pokud jde o snadnost vývoje, myslím, že je to pravděpodobně nejhorší. Takže při psaní CSS samozřejmě potřebujete linter — style lint — aby umožnil parsování v souboru JS. Jakákoliv logika zahrnující props je zdlouhavá na psaní, protože musí být přidána jako funkce na každém místě interpolace. Jedinou potenciální výhodou je, že v porovnání s běžným CSS je snadnější navigovat na stylovanou komponentu než na třídu v stylopisech. Vytvoření stylované komponenty pro každou malou změnu, kterou potřebujete, je určitě velmi frustrující v porovnání s používáním něčeho jako Tailwind nebo Bootstrap.

Výkon: Styled components mají mírnou režii oproti běžnému CSS. Nicméně, to je poměrně minimální.

Velikost buildu: Zde opět existuje mírná režie oproti běžnému CSS, ale velmi minimální. Ve skutečnosti, v některých případech, kdy není příliš mnoho stylování, může použití styled-components pomoci mít velikost buildu menší než knihovny utility tříd, jako je Tailwind.

Snadnost učení: Styled components se poměrně snadno učí, protože používají jen nějakou další syntaxi a JS interpolaci oproti běžnému CSS.

Styled-components jako samostatný framework se mi zdá trochu zbytečný. Bez výraznější výhody oproti SCSS a více nepořádku vytvořeného každou stylovanou komponentou pro každou jedinou změnu stylů, radím se proti používání. V každém případě se mi to zdá, že jen přidává režii. Mohu se mýlit, protože jsem je používal jen pár krát v projektech. Ale moje zkušenost s jejich používáním vždy skončila otázkou — proč to existuje?

React Bootstrap

React bootstrap je knihovna komponent postavená na základě knihovny utility tříd — Bootstrap. Poskytuje rovnováhu mezi Tailwindem a Material UI, kde získáme utility třídy z Bootstrapu a hotové komponenty z React Bootstrap

Snadnost vývoje: React bootstrap má snadno použitelné komponenty, takže nemusíte psát svou vlastní logiku pro běžně používané komponenty, jako jsou selekty, modály atd. Je také snadné tyto komponenty přizpůsobit pomocí utility tříd a proměnných motivu. Navíc, protože mají běžné utility třídy, je také snadné stylovat komponenty importované z dalších knihoven tak, aby odpovídaly vzhledu a dojetí React Bootstrap.

Výkon: React bootstrap komponenty mají téměř žádnou režii oproti použití běžného CSS. Jejich výkon je velmi blízký použití běžného CSS.

Velikost buildu: React bootstrap komponenty, pokud jsou importovány a bundlovány správně, budou mít velmi malý dopad na velikost buildu.

Snadnost učení: React bootstrap komponenty jsou jednoduché, dobře dokumentované a snadné na implementaci. Bootstrap třídy jsou podobné Tailwindu a jsou snadné na zvyknutí.

React bootstrap je velmi dobrá rovnováha mezi výkonem a přátelskostí pro vývojáře. Nemusíte psát kód, který se používá v běžných komponentách, dostanete snadné přizpůsobení s Bootstrap utility třídami a výkon je téměř nativní. Nemá tak širokou řadu utility tříd jako Tailwind, ale umožňuje vám přidat všechny styly a proměnné, které potřebujete k vytvoření podobné funkčnosti. To se mi zdá jako sladké místo.

Závěr

Stejně jako všechno v technologii bude volba, který UI framework si vybere, záviset na vašem případu použití.

Pokud potřebujete rychlý prototyp — budete lépe s volbou knihovny komponent. Mezi MUI, Bootstrap a dalšími — můžete si vybrat na základě úvah, jako je výchozí vzhled/dojem, výkon vykreslování a přizpůsobitelnost. MUI je výkonně těžká a obtížná na přizpůsobení, ale pokud se vám líbí, jak vypadá, a nemáte zvlášť těžké prvky uživatelského rozhraní, je to skvělá volba.

Pokud chcete vytvářet vlastní komponenty, budete lépe s TailwindCSS nebo React Bootstrap — kde CSS utils velmi usnadňují vložení stylů, které chcete. Moje osobní volba by byla Tailwind — ačkoli nemá open-source knihovnu komponent jako React Bootstrap, prostě miluji jejich výchozí styly a vyčerpávající povahu tříd, které jimi poskytují.

Pokud potřebujete vlastní komponenty, ale nelíbí se vám dlouhé řetězení className, jako v TailwindCSS — mohli byste se podělit o Styled Components. Umožňují vám psát své styly v JS, které je snadnější navigovat v porovnání s běžným CSS. Osobně je toto moje nejméně oblíbené ze všech frameworků, ale někteří lidé to opravdu preferují. Toto je čistě na základě úvah o zkušenosti vývojáře.

Jaký UI framework máte rádi pracovat? Rád bych věděl!