Material-UI - Die Komponentenhölle?!

Dawosch

Neues Mitglied
Hallo zusammen,
ich bin gerade dabei eine neue Web-Application zu erstellen und wollte nun endlich mal das Framework Material-UI benutzen.
Ich lese immer wieder, dass es quasi das Framework zum erstellen von ReactJS Anwendungen ist.
Zugegeben, ich bin ein Freund des Google Material Designs, vor allem die Icons überzeugen mich schon lange.

Daher habe ich mich auf die Suche gemacht und nach einer ReactJS Umsetzung gesucht.
Gesucht, gefunden. Der Quasi-Standard ist Material-UI.

"Super" dachte ich mir. Kurz installieren, sich aus dem Komponentenbaukasten bedienen und zum Schluss noch etwas stylen.

Los geht's:
Installation - Kein Problem
Komponenten kopieren und einfügen - Kein Problem
Komponenten sinnvoll kombinieren - Uff, jetzt wird’s schwer
Komponenten schnell stylen - VERGISS ES

Als Beispiel:
Ich möchte eine Navbar erstellen. Dazu nehme ich die Komponente App Bar.
Darin benötige ich ein Suchfeld. "Easy", gibt sogar schon ein Template auf der Seite. Also kurz das Code-Fenster öffnen und schauen, wie es funktioniert.

WTF???
200+ Zeilen für ne Navbar mit ein paar Buttons und nem Suchfeld???
Ok dachte ich mir, dann mal schauen wie man ein Suchfeld in der Navbar platziert:

HTML:
<div className={classes.search}>
    <div className={classes.searchIcon}>
        <SearchIcon />
    </div>
    <InputBase
        placeholder="Search…"
        classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
        }}
        inputProps={{ 'aria-label': 'search' }}
     />
</div>

WAS ZUR HÖLLE IST DAS???
Die Lösung ähnelt ja quasi nativem HTML, ist meiner Meinung sogar noch etwas komplizierter als plain HTML.
Und dann noch die Farbe. Im Beispiel ist diese blau. Bei mir lila. Ein schlichtes Grau wäre doch angemessen.
Ok, sei es drum, dann den Style einfach global definieren.
Die Lösung, entweder nen Style in jeder Komponente definieren, oder über eine MUI-Komponente sämtliche Primär, Sekundär und Terizäre Farben und deren Derivate definieren. PUH!!!

EDIT:
Ok, den Punkt mit dem Style nehme ich zurück. Für eine einfache Umsetzung reicht es die Palette auf Root-Ebene zu definieren, sofern man das Farbschema von Material-UI verwendet. Die "Unterfarben" werden dann automatisch gesetzt.

Versteht mich nicht falsch.
Ich bin Entwickler und bin durchaus in der Lage so etwas selbst zu machen bzw. das Framework zu benutzen, aber ich sehe den Vorteil für dieses Framework einfach nicht. Wo nimmt es mir Arbeit ab?
Benutzt jemand von euch Material-UI und findet es gut?
Warum finden Leute Material-UI besser als z.B. React-Toolbox (auch Material Design)?

Grüße
 
Zuletzt bearbeitet:

alinnert

Mitglied
Ich hab Material-UI noch nicht verwendet, aber ich kann trotzdem mal auf ein paar Punkte eingehen:

WTF???
200+ Zeilen für ne Navbar mit ein paar Buttons und nem Suchfeld???

Kontext ist hier ganz wichtig! Diese 200 Zeilen beinhalten einige imports und vor allem auch Styles (Stichwort: CSS-in-JS). Warum man hier aber selbst CSS schreiben muss, versteh ich auch nicht.

WAS ZUR HÖLLE IST DAS???
Die Lösung ähnelt ja quasi nativem HTML, ist meiner Meinung sogar noch etwas komplizierter als plain HTML.

Hier bin ich mir nicht so ganz sicher, was du nicht verstehst. Das sind zwei HTML-Elemente und zwei React-Komponenten. Wenn du React schon kennst, sollte das nicht neu für dich sein.

Ansonsten kann ich nicht viel dazu sagen. Ich mach meine Styles primär selbst, weil ich meine Projekte oft nicht ins Material-Design gepresst bekomm, oder es unpassend ist. Grundsätzlich mag ich's aber schon.

Eine Alternative wäre auch noch die Original-Komponenten von Google zu verwenden: https://material.io/develop/web/
Da diese aber framework-neutral sind, könnte es etwas schwieriger sein, diese in React sinnvoll zu verwenden. Probiert hab ich's aber noch nicht.
 

Dawosch

Neues Mitglied
Ich hab Material-UI noch nicht verwendet
Schon einmal ganz schlecht für eine qualitative Hilfe.

Diese 200 Zeilen beinhalten einige imports und vor allem auch Styles (Stichwort: CSS-in-JS). Warum man hier aber selbst CSS schreiben muss, versteh ich auch nicht.
Ok danke. Zum Glück ist der Kontext jetzt klar.

Hier bin ich mir nicht so ganz sicher, was du nicht verstehst. Das sind zwei HTML-Elemente und zwei React-Komponenten. Wenn du React schon kennst, sollte das nicht neu für dich sein.
Ich schätze du hast meine Aussage leider nicht verstanden. Der Code ist klar, aber an welcher Stelle nimmt mir Material-UI Arbeit ab, wenn plain HTML weniger Code ist?

Ansonsten kann ich nicht viel dazu sagen. Ich mach meine Styles primär selbst, weil ich meine Projekte oft nicht ins Material-Design gepresst bekomm, oder es unpassend ist. Grundsätzlich mag ich's aber schon.
Klasse, das einzige wofür ich Material-UI in meinem Edit lobe nutzt du nicht einmal

Eine Alternative wäre auch noch die Original-Komponenten von Google zu verwenden: https://material.io/develop/web/
Da diese aber framework-neutral sind, könnte es etwas schwieriger sein, diese in React sinnvoll zu verwenden. Probiert hab ich's aber noch nicht.
Ok, also ist deine Aussage die original Komponenten zu nutzen und sagst selbst, dass das im ReactJS Umfeld wenig Sinn macht.


Versteh mich nicht falsch, aber dein Post hat keinerlei Mehrwert. Er ist weder informativ noch Hilfreich noch kannst du eigene Erfahrungen mit Material-UI einbringen.
Von daher stellt sich mir die Frage, was du mit deinem Post bewirken wolltest?

Ja, ich mag einen freundlichen Umgang miteinander, aber Posts, Feedback und Hilfe sollte doch irgendwie beigesteuert werden.

Grüße, Dawosch
 

asc

Mitglied
devCommunity-Experte
Wenn du keine Antworten/Diskussion haben willst, warum stellst du deinen Rant dann in ein Forum?

Nach deiner ersten Reaktion sehe ich deine Fragen am Ende des Ursprungsbeitrages auch sehr kritisch, denn ich befürchte, dass es dir lediglich darum geht deinen Frust raus zulassen wenn sich jemand findet der Material-UI mag.

Vielleicht wären deine Gedanken in einem Blog besser aufgehoben.

Viele Grüße
 

JR Cologne

Administrator
Teammitglied
Versteh mich nicht falsch, aber dein Post hat keinerlei Mehrwert. Er ist weder informativ noch Hilfreich noch kannst du eigene Erfahrungen mit Material-UI einbringen.
Von daher stellt sich mir die Frage, was du mit deinem Post bewirken wolltest?

Ja, ich mag einen freundlichen Umgang miteinander, aber Posts, Feedback und Hilfe sollte doch irgendwie beigesteuert werden.

Hallo Dawosch,

manchmal gibt es leider einfach niemanden, der dir so richtig bei deinem Problem helfen kann, da nicht jeder mit jeglichen Technologien und Frameworks schon mal gearbeitet hat und entsprechende Erfahrung vorweisen kann.
Dies ist vermutlich auch der Grund, warum du bisher noch kaum hilfreiche Antworten erhalten hast.

Was man an dieser Stelle allerdings auch sagen muss: Deine Frage ist nicht ganz eindeutig gestellt. Benötigst du in irgendeiner Form Hilfe, um etwas bestimmtes zu realisieren, oder möchtest du einfach über die Sinnhaftigkeit von Material-UI diskutieren?

Beides ist natürlich völlig legitim, aber es ist nicht sonderlich zielführend, wenn du kritisierst, dass jemand versucht, auf deinen Thread einzugehen, wenn du dir doch eigentlich eine Diskussion erwünschst.
Die Motivation, auf einen solchen Thread zu antworten, ist dann nämlich entsprechend gering.

Versuch doch stattdessen einfach die Diskussion mehr in die von dir gewünschte Richtung zu lenken, indem du deine Intention und Fragestellung näher erläuterst.
Aber manchmal kann es eben auch sein, dass nichts Vernünftiges/Hilfreiches für dich herumkommt. Das passiert in einem Forum leider auch mal und das muss man dann wohl oder übel akzeptieren.

Viele Grüße
JR Cologne
 

alinnert

Mitglied
Schon einmal ganz schlecht für eine qualitative Hilfe.

Könnte an meinem mangelnden Wissen liegen. Könnte aber auch daran liegen, dass ich herausfinden möchte, was genau dein Frage ist, damit ich überhaupt weiß, ob ich dir helfen kann, oder nicht. Einige Fragen drehen sich um Thema X, obwohl das Kernproblem ein allgemeineres ist.

Ok danke. Zum Glück ist der Kontext jetzt klar.

Ja. Dein Post klang so, als wären es 200+ Zeilen HTML. Weil mehr als HTML brauchst du rein theoretisch nicht - wenn das Framework entsprechend gestaltet worden wäre.

"Hier bin ich mir nicht so ganz sicher, was du nicht verstehst." → "Ich schätze du hast meine Aussage leider nicht verstanden."

Ach so!

Der Code ist klar, aber an welcher Stelle nimmt mir Material-UI Arbeit ab, wenn plain HTML weniger Code ist?

Dazu wäre es hilfreich, wenn du dir den Quellcode der Komponenten anschaust. Selbst wenn man Material-UI kennt, kennt man nicht unbedingt dessen Quellcode und die exakte Antwort auf diese Frage.

Ok, also ist deine Aussage die original Komponenten zu nutzen und sagst selbst, dass das im ReactJS Umfeld wenig Sinn macht.

Nein. Ich zeige dir eine Alternative auf, falls du die noch nicht kennst. Vielleicht kommst du mit der besser klar. Um das zu wissen, müsstest du sie vorher aber ausprobieren.

Von daher stellt sich mir die Frage, was du mit deinem Post bewirken wolltest?

Das ist ganz einfach zu beantworten: Ich wusste auch nicht, was du mit deinem Post bewirken wolltest, daher hab ich dir weitere Infos versucht zu entlocken, damit es einfacher ist, dir zu helfen. Die Alternative wäre, unklare Fragen einfach zu ignorieren. Das möchte ich halt nicht.
 

Dawosch

Neues Mitglied
Warum finden Leute Material-UI besser als z.B. React-Toolbox (auch Material Design)?
Meine Frage war, ob wer schon Erfahrung mit Material-UI gesammelt hat und mir erläutert, wieso er Material-UI benutzt.
Ich habe keine Hilfe oder sonstiges erwartet, sondern Erfahrungen von Leuten, die Material-UI benutzen und warum.
Und wenn dann jemand in seinem ersten Satz schreibt, er habe kein Erfahrung mit Material-UI gesammelt, dann ist es für mich Post-Farming.
Zudem finde ich die beiden anderen Fragen auch verständlich, ihr offensichtlich aber nicht.

Wir sollten uns also alle mal fragen, ob man zu einem Thema wirklich helfen kann oder nicht.

Von daher Entschuldigung, dass meine Antwort sehr Spitz und provokant formuliert war.
 

alinnert

Mitglied
Meine Frage war, ob wer schon Erfahrung mit Material-UI gesammelt hat und mir erläutert, wieso er Material-UI benutzt.

Das klingt schon sehr anders. Anfangs klang das wie "Material-UI ist total doof. Wer nutzt denn sowas?" ← Die Frage könnte man auch beantworten, tut man aber i.d.R. nicht, da es eindeutig eine rhetorische Frage ist. Normal verwendet man den Titel des Threads, um die Frage kurz und knapp zusammenzufassen und damit andere erfahren, was der Threadersteller überhaupt möchte. Das hilft hier halt auch nicht sonderlich.

Und wenn dann jemand in seinem ersten Satz schreibt, er habe kein Erfahrung mit Material-UI gesammelt, dann ist es für mich Post-Farming.

Post-Farming? Von jemandem, der beim Aufbau des Forums aktiv dabei war und daran interessiert ist eine eigene Software zu entwickeln und sich eher damit befassen müsste, wie man ebenjenes unterbinden könnte?
(Bringt das in diesem Forum überhaupt was? Es gibt schließlich auch ein Punktesystem.)

Zudem finde ich die beiden anderen Fragen auch verständlich, ihr offensichtlich aber nicht.

Seine eigenen Fragen findet man immer verständlich, das ist nichts besonderes. Warum wir das anderes sehen, haben wir bereits erläutert.

Wir sollten uns also alle mal fragen, ob man zu einem Thema wirklich helfen kann oder nicht.

Ich bin jemand, der sich regelmäßig auf Amazon in der Q&A-Sektion über Leute aufregt, die auf Fragen mit "Keine Ahnung" antworten. Das wird also nicht das Problem sein. Hier mal ein kleines Beispiel:

Jemand meinte mal, dass er mit AngularJS nicht wirklich klarkommt, weil er die ganzen Facetten des Frameworks nicht versteht. Darunter hat er Promises aufgezählt. Stell dir jetzt eine entsprechende Frage in einem Forum zu diesem Thema vor. Muss man sich mit AngularJS auskennen, um ihm Promises erklären zu können? Muss ich mich mit Material-UI auskennen, um dir mit allgemeinen React- oder UI-Framework-Fragen helfen zu können? Manche Probleme lassen sich auch lösen, indem man alternative Wege aufzeigt, oder Gedankenknoten löst, die mit dem Ursprungsthema nicht direkt was zu tun haben müssen. Genau darauf hab ich mit meiner Antwort abgezielt.
 
Oben Unten