Tailwind vs Material UI vs Styled Components vs React Bootstrap

Tailwind vs Material UI vs Styled Components vs React Bootstrap

Bei UI-Frameworks gibt es möglicherweise hunderte. In diesem Artikel werde ich diejenigen vergleichen, die meiner Meinung nach am beliebtesten sind — basierend auf den folgenden Kriterien:

1. Entwicklungsfreundlichkeit — einfach zu schreiben, einfach zu lesen, schnell zu ändern
2. Leistung — Rendergeschwindigkeit
3. Build-Größe
4. Lernfreundlichkeit

Dann lass uns anfangen!

TailwindCSS

Tailwind ist eine Utility-Klassenbibliothek, die eine breite Palette leicht zu verwendender Klassen bietet, mit denen Sie häufige CSS-Eigenschaften bearbeiten können. Wenn Sie diese Klassen verketten, erhalten Sie das gewünschte Styling.

Entwicklungsfreundlichkeit: In Bezug auf Entwicklungsfreundlichkeit liebe ich Tailwind! Sie schreiben Ihre Klassennamen genau dort, wo Sie die Stile benötigen, Sie müssen nicht zu einer anderen Datei (wie bei der Verwendung von CSS) oder sogar zu einem anderen Punkt in derselben Datei (wie bei der Verwendung von JSS) gehen, um die Stile in Aktion zu sehen. Dies bietet ein fantastisches Entwicklungserlebnis. In einigen Fällen möchten Sie möglicherweise tatsächlich ein Stylesheet erstellen — z. B. Styling-Varianten für eine Schaltfläche. In diesem Fall können wir einfach ein Stylesheet erstellen und die Theme-Direktive verwenden, um Tailwinds Theme-Variablen zu nutzen und konsistente Stile zu erstellen. Allerdings könnten manche Menschen es lästig finden, die lange Liste verketteter Klassen in ihrem Markup zu lesen — ich persönlich finde es sehr praktisch.

Leistung: Die Rendergeschwindigkeit ist etwa gleich wie bei nativem HTML und CSS, da es sich nur um Klassen in einem Stylesheet handelt.

Build-Größe: Um Utility-Klassen für die ganze Vielfalt von Anwendungsfällen bereitzustellen, auf die wir während der Entwicklung stoßen, muss die Größe dieser Bibliotheken natürlich groß sein. Die Verwendung von Bibliotheken wie PurgeCSS hilft jedoch, alle ungenutzten Klassen aus dem finalen Build zu entfernen. Tailwind hat eine integrierte Option dafür. So erhalten wir eine Build-Größe, die wahrscheinlich sehr nahe an der Verwendung nativer CSS-Klassen liegt.

Lernfreundlichkeit: Anfangs kann es einige Zeit dauern, sich an die Klassennamen für die verschiedenen Attribute zu gewöhnen. Sie sind jedoch ziemlich intuitiv und leicht zu merken. Ich würde Tailwind als sehr leicht zu erlernen einstufen.

Tailwind ist aus 2 Gründen mein persönlicher Favorit — 1. ihre Standardstile sehen erstaunlich aus — elegant und sauber 1. ihre Vielfalt an Utility-Klassen ist riesig und deckt fast jeden häufigen Anwendungsfall effektiv ab. Dies sind die Gründe, warum ich Tailwind anderen Utility-Klassenbibliotheken wie Bootstrap vorziehen würde.

MUI

MUI ist ein UI-Toolkit, das ein Theme-Framework, ein Styling-Framework und gängige Komponenten bereitstellt — alle sofort einsatzbereit.

Entwicklungsfreundlichkeit: Die Arbeit mit MUI ist sehr gut, da Sie nicht viel Code für häufige Funktionalitäten wie Modals, Akkordeons, Select-Dropdowns, Menüs usw. schreiben müssen. MUI ist jedoch schrecklich, wenn es um die Anpassung dieser vorgefertigten Komponenten geht. Selbst das Hinzufügen von Stilen zu regulären Komponenten ist aufgrund von JSS etwas hässlich zu lesen. Wenn Sie externe Komponenten verwenden müssen, sind diese sehr schwer anzupassen, damit Sie das Aussehen und Verhalten von MUI beibehalten.

Leistung: MUI ist wahrscheinlich das langsamste beim Rendern. Ich hatte einmal ein Dropdown mit 1000 Einträgen, und MUI konnte es nicht ohne mindestens eine 1-Sekunden-Verzögerung laden. Sie haben einige schwere Stile für Hover-Effekte, Ripple-Effekte und Schatten, die rechenintensiv sind.

Build-Größe: Die Build-Größe von MUI ist im Vergleich zu anderen UI-Frameworks ziemlich groß. Dies kann durch die Verwendung von Importen der zweiten Ebene beim Importieren von MUI bewältigt werden.

Lernfreundlichkeit: MUI hat sehr komplexe Dokumentation mit einer großen Anzahl von Anpassungsoptionen. Dies macht es sehr schwierig zu erlernen. Das Styling-System unterscheidet sich auch etwas von den allgemein verfügbaren Optionen. Daher dauert die Gewöhnung Zeit.

MUI sieht standardmäßig gut aus. Es ist eine sehr gute Option zur Verwendung — NUR WENN Ihr Design ihre Standardstile verwendet. Es wäre gut, vorher zu bestätigen, dass Sie alle benötigten Komponenten haben. Wenn Sie jedoch ein benutzerdefiniertes Theme haben, das Sie entwickeln müssen — dies ist die schlimmste Option. Es ist beim Rendern schwer und sehr schwer anzupassen. Sie wären besser dran, alles andere zu verwenden.

Styled Components

Styled Components verwenden CSS in JS, um Sie beim Styling von Komponenten zu ermöglichen und Props zu übergeben, die auch Styling beeinflussen.

Entwicklungsfreundlichkeit: Styled Components verwenden CSS in JS. In Bezug auf Entwicklungsfreundlichkeit denke ich, es ist wahrscheinlich das Schlechteste. Während Sie also CSS schreiben, benötigen Sie offensichtlich einen Linter — Style Lint — um das Parsing in einer JS-Datei zu ermöglichen. Jede Logik, die Props beinhaltet, ist ausführlich zu schreiben, da sie als Funktion an jeder Interpolationsstelle hinzugefügt werden muss. Der einzige potenzielle Vorteil ist, dass es im Vergleich zu regulärem CSS einfacher ist, zu einer Styled Component zu navigieren als zu einer Klasse in einem Stylesheet. Eine Styled Component für jeden kleinen Änderungsbedarf zu erstellen ist definitiv sehr frustrierend im Vergleich zur Verwendung von etwas wie Tailwind oder Bootstrap.

Leistung: Styled Components haben einen geringen Overhead gegenüber regulärem CSS. Dies ist jedoch sehr minimal.

Build-Größe: Hier wiederum gibt es einen geringen Overhead gegenüber regulärem CSS, aber sehr minimal. In der Tat könnte die Verwendung von Styled Components in einigen Fällen, in denen nicht zu viel Styling vorhanden ist, Ihnen helfen, eine Build-Größe zu haben, die kleiner ist als Utility-Klassenbibliotheken wie Tailwind.

Lernfreundlichkeit: Styled Components sind ziemlich leicht zu erlernen, da sie nur zusätzliche Syntax und JS-Interpolation über reguläres CSS verwenden.

Styled Components als Standalone-Framework scheint mir etwas sinnlos zu sein. Ohne signifikanten Vorteil gegenüber SCSS und mehr Unordnung, die durch jede Styled Component für jede einzelne Stiländerung entsteht, würde ich davon abraten. In jedem Fall scheint es für mich einfach Overhead hinzuzufügen. Ich könnte mich irren, da ich sie nur ein paar Mal in Projekten verwendet habe. Aber meine Erfahrung mit ihrer Verwendung hat immer zu der Frage geführt — warum existiert das?

React Bootstrap

React Bootstrap ist eine Komponentenbibliothek, die auf der Utility-Klassenbibliothek Bootstrap aufgebaut ist. Sie bietet ein Gleichgewicht zwischen Tailwind und Material UI, wobei wir die Utility-Klassen von Bootstrap und die vorgefertigten Komponenten von React Bootstrap erhalten

Entwicklungsfreundlichkeit: React Bootstrap hat benutzerfreundliche Komponenten, sodass Sie Ihre eigene Logik für häufig verwendete Komponenten wie Selects, Modals usw. nicht schreiben müssen. Es ist auch einfach, diese Komponenten mit Utility-Klassen und Theme-Variablen anzupassen. Darüber hinaus ist es durch häufige Utility-Klassen auch einfach, Komponenten aus anderen Bibliotheken zu stylen, um das Aussehen und Verhalten von React Bootstrap zu entsprechen.

Leistung: React Bootstrap-Komponenten haben fast keinen Overhead gegenüber der Verwendung von regulärem CSS. Ihre Leistung ist sehr nahe an der Verwendung von regulärem CSS.

Build-Größe: React Bootstrap-Komponenten haben, wenn sie korrekt importiert und gebündelt werden, sehr wenig Auswirkungen auf die Build-Größe.

Lernfreundlichkeit: React Bootstrap-Komponenten sind einfach, gut dokumentiert und einfach zu implementieren. Die Bootstrap-Klassen ähneln Tailwind und sind leicht zu gewöhnen.

React Bootstrap ist ein sehr gutes Gleichgewicht zwischen Leistung und Entwicklerfreundlichkeit. Sie müssen keinen Code schreiben, der in häufigen Komponenten verwendet wird, Sie erhalten einfache Anpassungen mit Bootstrap-Utility-Klassen, und die Leistung ist nahezu nativ. Es hat nicht so große Utility-Klassen wie Tailwind, aber es ermöglicht Ihnen, alle erforderlichen Stile und Variablen hinzuzufügen, um ähnliche Funktionalität zu erstellen. Dies fühlt sich für mich wie ein süßer Fleck an.

Fazit

Wie alles in der Technik hängt die Wahl des UI-Frameworks von Ihrem Anwendungsfall ab.

Wenn Sie einen schnellen Prototyp benötigen — wären Sie besser dran, eine Komponentenbibliothek zu wählen. Zwischen MUI, Bootstrap und anderen — Sie können basierend auf Überlegungen wie dem standardmäßigen Aussehen/Verhalten, der Rendering-Leistung und der Anpassbarkeit wählen. MUI ist leistungshungrig und schwer anzupassen, aber wenn Ihnen die Art und Weise, wie es aussieht, gefällt und Sie nicht besonders schwere UI-Elemente haben, ist es eine großartige Option.

Wenn Sie benutzerdefinierte Komponenten erstellen möchten, wären Sie mit TailwindCSS oder React Bootstrap besser dran — wo die CSS-Utilities es sehr einfach machen, die gewünschten Stile zu injizieren. Meine persönliche Wahl wäre Tailwind — obwohl es keine Open-Source-Komponentenbibliothek wie React Bootstrap hat, liebe ich einfach ihre Standardstile und die umfassende Natur der von ihnen bereitgestellten Klassen.

Wenn Sie benutzerdefinierte Komponenten benötigen, aber nicht die lange ClassName-Verkettung wie in TailwindCSS mögen — könnten Sie zu Styled Components greifen. Sie ermöglichen es Ihnen, Ihre Stile in JS zu schreiben, was leichter zu navigieren ist im Vergleich zu regulärem CSS. Persönlich ist dies mein am wenigsten bevorzugtes Framework, aber einige Menschen bevorzugen es wirklich. Dies basiert rein auf Überlegungen zur Entwicklererfahrung.

Welches UI-Framework liebst du am liebsten? Ich würde es gerne erfahren!