Material UI.

hallo und herzlich willkommen im winterlichen webcafé hallo lieber Kay winterlich ist total

begeistert hallo felix ich sag das im speziellen deshalb weil ich mich nämlich tatsächlich im winter befinde ich bin gerade in kitzbühel und eigentlich skifahren aber wir wollen noch eine folge diese woche aufnehmen und deswegen habe ich mein ganzes equipment mitgeschleppt und Kay während du immer stehst liege ich gerade im bett weil hier die beste akustik ist hat das gerade schon gesagt in der vorton aufnahme machen wir mal so kleines testrecording da klingt das so als hättest du dich in irgendeiner kissenburg verschanzt weil es ist alles sehr viel weniger schallig und hallig und ich stelle mir vor wie du da vor verschneitem fenster in so einer decke

eingekauert irgendwo vom kamin sitzt ja genau so ist es der kamin ist zwar unten im wohnzimmer aber ich habe hier herrlichen blick auf die kitzbüheler berge und ja habe es mir gemütlich gemacht habe eine schöne holzdecke also akustisch ist das eigentlich optimal hier fast ein tun studio und ja bin ganz froh dass mit dir aufnehmen kann und wir haben auch ein schönes thema uns heute rausgesucht bevor wir dazu aber kommen würde ich sagen erzählst mir mal was für einen spektakulären tee du mitgebracht hast weil ich heute nämlich gänzlich unspektakulär unterwegs bin ich habe auch gar keinen tee also man muss ja dazu

sagen für unsere verhältnisse nehmen wir ja im grauesten morgen auf also im prinzip mitten in der nacht um kurz vor zwölf und das heißt ich habe mir mal wieder die chance einen café zu trinken und diesmal habe ich aus der lüdinghausener rösterei das ist ein bisschen südlich von münster habe ich eine röst kaffee für unsere siebträger maschine und er wird beschrieben mit einer brille zurecht drücken hausmischung aus robusta und arabica fruchtig mit schokoladen note schonend in der trommel geröstet und die habe ich mir hier angesetzt zu einem leckeren cappuccino und ich muss sagen der geht ganz gut weg er ist nämlich schon halb leer ja das hört sich aber richtig fein an ja wunderbar ja

dann bist du genauso klassisch unterwegs wie ich habe nämlich heute keinen tee natürlich irgendwie aus meiner schublade ziehen können habe hier aber ein beutelchen gray gefunden kann dazu auch gar nicht viel mehr sagen weil ich einfach wegschmissen habe die tüte aber ist ein toller gray geht gut runter ganz wunderbar ich finde es gut dass du jetzt mal wieder so die messlatte ein bisschen niedriger gelegt hast damit jetzt beim nächsten mal wieder ein bisschen punkten kannst immer nur nach oben geht es nicht ja da bringt wieder was spannendes mit genau das thema heute lautet material ui und genau

genommen wollen wir einerseits über material ui reden aber dann vielleicht auch so ein bisschen gucken was es noch für alternativen gibt und in welchen situationen material ui das richtige framework ist aber vielleicht erzählen wir den leuten da draußen erst mal was material ui überhaupt ist und Kay hast du eine gute definition oder soll ich mich mal daran probieren also die definition die material ui selber hat also wir reden hier von material ui.com da gibt das ist ein bisschen variationen müssen wir gleich darüber reden die beschreiben sich selber als open source reakt component library wird implements googles material design genau das ist es also eine

komponenten bibliothek für reakt um das noch mal zu übersetzen die sich an dem material design von google orientiert und die idee ist relativ einfach es gibt sich verschiedene varianten auch man möchte als app entwickler oder webseiten entwickler nicht jedes mal das rad neu erfinden beziehungsweise den button neu erfinden und deswegen bietet material ui so eine breite palette von bausteinen die man wieder verwenden kann um sich da sein eigenes ui zusammenzubasteln genau das können dann buttons sein formularelemente aber auch so grids oder so cards also alles was man eigentlich von diesem material design kennt und material design ist ja damals von google entwickelt worden eigentlich eine

konsistente design sprache die für diese ganzen android systeme aber ich glaube auch für ja google docs und was google alles eben an anwendungen hat dann verwendet wurde und in dieser design sprache gibt es eben diesen baukasten der aber mit google erstmal nichts zu tun hat außer dass eben dieses material design verwendet wird genau und die komponenten können wir eben nutzen können dann super konsistente anwendungen schnell entwickeln und können uns eigentlich auch die funktionalität konzentrieren und müssen uns eben über design und so keine gedanken machen und das praktische ist natürlich dass dann da sachen wie barrieren

barrierefreiheit und so weiter browser unabhängigkeit dass das eben alles schon mitgedacht wurde von den leuten die es entwickelt haben dieses material design das hast du gerade kurz angerissen das finde ich einen ganz spannenden punkt das hast du gerade gesagt seit damals google entwickelt eben als so einheitliche design sprache für all ihre dinge die sie so haben also die website natürlich aber auch allem voran das android betriebssystem wobei man da aufpassen muss dass das wirklich nur für die betriebssysteme gilt wo das native android drauf ist die allermeisten

samsung und co haben ja ihr eigenes ui da drauf stimmt und das besondere daran war damals relativ neu dass es eben nicht irgendwie so eine art von corporate design ist wo die sagen so unsere farbe ist jetzt grün und deswegen machen wir unser interface grün oder sowas sondern die haben sich gedacht wie muss

sich ein ui verhalten was für regeln muss das befolgt das ist ja rein digital also da kann man in der theorie mit alles mitmachen aber welche regeln können wir aufstellen so dass es zum einen durchgehend kohärentes design ist wo wir ein paar grundlagen definieren und wo aber die leute dann wenn sie das design weiter denken

mit eigenen ideen kommen können und was die sich gedacht haben ist ja was ist denn wenn diese ganzen interface elemente die wir in der digitalen welt haben so tun als wären sie echte elemente

also da gibt es zum beispiel klassisch ein basis baustein ist ein paper und da wiederum sind dinge drauf und die idee ist okay du hast eine schreibtisch das ist dein hintergrund da drauf liegt ein stück papier so wie du es auch auf

schreibtisch hast und da drauf ist zum beispiel ein text wie wird sich das in der realität verhalten das papier wirft einen kleinen schatten weil es ja optisch also im 3d raum sich hervornimmt vom schreibtisch und deswegen hat es einen kleinen schatten

und da drauf wiederum wenn da irgendwelche dinge drauf liegen dann haben die auch wieder schatten also die haben versucht die reale welt im design abzubilden und dann da regeln rausgeschafft mit

wie verhalten sich schatten und wie sind elemente aufeinander gestapelt und wie können die miteinander interagieren und solche späße und dann relativ stimmiges grundkonzept rausgearbeitet was man dann auf ganz viele andere elemente übertragen kann

und dieses material ui über das wir jetzt sprechen ist eben eine interpretation von diesem design für konkret react und es gibt ganz viele andere ähnlich klingende frameworks und tools die versuchen dieses einheitliche google material design

das eben nur ein abstraktes design konzept ist in verschiedene technologien zu übertragen es gibt auch noch eins das ist nur mit css und dann gibt es auch noch für view und alles andere aber das ist so diese grundlegende damals relativ gute idee gewesen von google zu sagen ein design konzept was man dann erweitern kann

und ich finde das als entwickler so schön weil das wirklich das ist schon so angerissen total logisch ist man kann eigentlich eine ui logisch aufbauen und es gibt für alles eine erklärung warum das jetzt auf einer bestimmten ebene sein soll

oder warum eben irgendwas einen schatten wirft oder einen dolleren schatten als ein anderes element oder einen breiteren schatten oder warum eine bestimmte farbgebung da ist also denken wir an primary und secondary geschichten also zum beispiel an buttons dann ist das alles eben sehr logisch strukturiert und das gefällt mir natürlich als entwickler besonders gut dass

man eine ui erklären kann und vor allem auch anderen entwicklern ja eine ganz gute hinweise geben kann wenn die ui die die jetzt gerade mit den komponenten gebaut haben vielleicht nicht so wahnsinnig logisch ist

und dann kann man sagen guck mal hier das ist doch eher eine sekundäre funktion nicht so wichtig macht da doch lieber ein secondary draus und das finde ich halt so schön in der entwicklung

genau die herausforderung die man ja beim entwickeln von ui ist hat ist dass jeder entwickler ja so ein bisschen für sich denkt was braucht er gerade was macht er gerade hat vielleicht auch eigene vorzüge was so design angeht und die idee von diesem material design und dann in der implementierung auch von dem material ui ist eben dass die entwickelnden menschen sich

nicht selber gedanken darüber machen wie etwas aussieht sondern überlegen eher was sie brauchen um ihre aufgabe zu erfüllen um ihr ui abzubilden und dann gibt das material design und dann auch das material ui dafür eben schon elemente vor also wenn du irgendwelche

dinge in einer liste abbilden möchtest dann musst du dir nicht gedanken machen wie diese liste aussieht sondern das material design material ui das nutzen wir jetzt anonym die sagen okay hier ist wie eine

eine liste funktioniert und wenn du eine liste bauen möchtest dann benutzt du dieses listen element genau so und das ist einerseits ganz charmant weil du dann als entwickler nicht groß nachdenken muss wie genau optisch du jetzt irgendwelche

dinge implementiert und außerdem ist es dann auch kohärent durch die ganze anwendung hindurch das fällt natürlich dann auseinander wenn man irgendwas dann doch mal

absichtlich abweichend designen möchte dann geht dieses ganze konstrukt natürlich kaputt aber bis dahin haben die entwickelnden

möglichst wenig traktion damit ein design zu bauen genau und eine idee davon ist ja auch dass die leute da draußen die die anwendung benutzen auch eine wiedererkennbarkeit haben also diese buttons die man verwendet die liste man verwendet auch die art wie man damit

interagiert die ist dann eben bestenfalls schon bekannt von android von anderen google produkten oder eben auch von anderen leuten die material design in welcher form auch immer dann

einsetzen zum beispiel eben als material ui und dadurch sind die anwendungen bestenfalls sehr intuitiv genau die konkrete ausprägung über die wir jetzt heute sprechen wollen oder beziehungsweise schon halb gesprochen haben ist eben material ui oder mui liebevoll genannt mui.com

und das ist eben eine interpretation von diesem material design explizit für reakt die gibt es schon seit 2014 hat auch gar nichts mit google zu tun also das ist ein eigenständiges team was damals angefangen hat mit so einer kleinen komponenten bibliothek

und jetzt über die zeit immer weiter gewachsen ist immer größer geworden ist und ich glaube dieses mui ist auch ich habe jetzt die zahlen gerade nicht noch mal davor aber einer der wenn ich sogar die größte

ui bibliothek die es für reakt da draußen gibt also unglaublich lange gibt sie schon unglaublich viele bausteine haben die und inzwischen ist das auch eine richtige firma

geworden die neben diesem basis material ui mui core nennen die das also das open source framework oder komponenten bibliothek mit dem man eben diese designs bauen kann haben die auch noch andere sachen nämlich auch eigene kostenpflichtige templates oder

erweiterte komponenten wo man dann geld für bezahlen muss also das ist ein richtiges ökosystem geworden inzwischen genau da kommen wir gleich noch mal drauf das ist nämlich für mich einer der nachteile dass inzwischen auch bezahlte varianten gibt ich möchte aber noch mal kurz darauf eingehen in welchen fällen wir mit ui gut einsetzen können

und wofür es praktisch ist und dann kommen natürlich naturgemäß auch dahin wo es vielleicht nicht so sinnvoll ist einzusetzen und hast du eine idee so grob wo wir das immer einsetzen

wir setzen es immer ein wenn wir react haben genau das hängt jetzt aber damit zusammen dass wir relativ spezielle software entwickeln dass wir nämlich im wesentlichen ja web anwendungen bauen viel auch so interne anwendungen die jetzt nicht ein besonderes

augenmerk aufs design legen oder die haben keinen besonderen anspruch ans design sondern die sollen eher funktional sein und das würde ich nämlich sagen ist genau der kosmos in dem man material ui gut einsetzen kann

weil in dem moment wo man jetzt was für den end user macht das total schick neu vielleicht auch anders aussehen soll müsste man mit material ui ziemlich viel umsteilen und das will man eigentlich nicht sondern du willst eigentlich material ui so nutzen wie es ist du kannst

ein theme drauf packen du kannst also schon was an den abständen machen du kannst was an den farben machen du kannst was an den fonts machen aber eigentlich für zum material ui ungefähr so nutzen wie es eben immer aussieht also man kennt ja auch sehr schnell wenn irgendwie material ui eingesetzt wird

genau die meisten kunden kommen ja auf uns zu und wollen irgendeine anwendung von uns also irgendeine inhaltliche funktion die wir denen dann bauen und da ist es denen gerade egal wie das optisch aussieht

da ist sowas natürlich ideal weil es out of the box ganz viele dinge liefert die gut funktionieren und die auch gut aussehen aber wenn jetzt natürlich ein kunde kommt der schon einen unheimlich guten designer bezahlt hat eine total fancy webseite zu bauen

da dann so material ui drauf zu zwängen ist dann wahrscheinlich eher nicht so das richtige der fall da hast du schon ganz recht genau das haben wir auch immer wieder dass leute schon design mitbringen und dann überlegt man halt wie kriege ich jetzt dieses design vernünftig umgesetzt und dann ist material ui normalerweise

nicht das richtige da gibt es dann alternativen die ganz gut funktionieren wir haben jetzt bisher das glück gehabt dass wir meistens material ui einsetzen konnten

so dass wir mit diesem reinen ui und styling und so erstmal wenig zu tun hatten was wir zwar können aber was natürlich auch praktisch ist wenn man es dann erstmal links liegen lassen kann und sich wirklich um die funktionalität kümmern kann

das ist dann eben eine individuelle abwägung bei jedem projekt weil dieses material ui eben schon so viele sachen out of the box mitbringt die man ansonsten aufwendig selber programmieren müsste dass man entweder sagt okay ich versuche es jetzt doch mit material ui und verbiege es optisch so dass es zu meinem design passt oder ich suche vielleicht eher eine andere komponenten bibliothek die dann eher schon die design sprache spricht die ich haben möchte weil wirklich komplett selber bauen das kann ich für so

projekte in unseren größen eigentlich gar nicht mehr empfehlen da hat man so viel overhead oder mehr aufwand um ein bisschen der deutschen sprache zu bemühen für einfach die absoluten basis bausteine die man so braucht für eine webseite das hat man schon bei so fertigen bibliotheken einfach viel komfortabler

genau also irgendeine bibliothek willst du ja auf jeden fall nutzen ob das jetzt material ui ist das ist jetzt eine die wir gerne mögen aber es gibt natürlich auch tolle andere bibliotheken die da draußen sind vielleicht ganz interessant wir haben ja jetzt ein größeres projekt

ich würde mal sagen abgeschlossen dass wir über zwei oder drei jahre entwickelt haben also wirklich eine lange zeit und da hatte der kunde tatsächlich ein eigenes team das material ui noch mal in eine eigene design sprache übersetzt hat also die haben material ui als basis genommen und haben die komponenten aber ja fast schon größtenteils so angepasst dass ein eigenes design draus wurde

Kay wie hast du das wahrgenommen war das erfolgreich war das sinnvoll also es stimmt natürlich dass dieses material ui einfach schon sehr viel opinionated ist wie man so sagt und sich dadurch dass es sich an diesem material design orientiert eben schon sehr starke vorstellungen hat davon wie dinge zusammenpassen deswegen finde ich es durchaus okay zu sagen man nimmt sich die grundlage material ui und auch material design und denkt das aber weiter dann muss man natürlich nur aufpassen dass man das wirklich auch konsequent macht

und die gefahr ist immer dass ein einzelne entwickler das vielleicht nicht so 100 prozent auf dem schirm haben und die leute darüber auch nicht und dann hast du ganz schnell so das problem dass es uneinheitlich wird

genau das uneinheitliche ist natürlich so eine geschichte wenn dann musst du dann alle komponenten angehen oder das theme so konsistent umschreiben dass es eben überall vernünftig aussieht und ich kann jetzt aus meiner eigenen erfahrung sagen ich war da überhaupt nicht von begeistert dieses material ui so umzubiegen dass das eben weitestgehend eigenes design war also man hat schon noch gesehen dass es material ui ist aber es wurde schon an vielen stellen geschraubt und dadurch sind halt irre viele bugs entstanden also sei das jetzt in responsive ansichten oder ja wenn man dann alternative

designs von den komponenten verwendet hat die dann vielleicht in dem theme nicht berücksichtigt wurden und wir hatten ganz ganz viele bugs die damit zu tun hatten dass dieses design system was darauf geschnallt wurde ja irgendwie nicht so gut mit material ui funktioniert hat wie das dann ursprünglich gedacht war und wenn man es einfach gelassen hätte hätten wir halt keine probleme gehabt aber natürlich auch ein standard design was natürlich jetzt keinen vom hocker gehauen hätte aber ich war insgesamt da nicht so begeistert von und ich finde wenn man material ui einsetzt dann sollte man das dezent ja seinen eigenen ansprüchen

anpassen aber dann muss man auch hinnehmen dass es eben aussieht wie material design das ist am anfang angesprochen dass sowas wie accessibility was ja in unseren breitengraden einfach schlicht ignoriert wird bei diesem material ui schon out of the box fast perfekt ist dadurch dass das eben so ein riesiges projekt ist was über jahre immer wieder iteriert ist haben die so viele sonder regeln und sonderformen also das ist so gut ausgearbeitet

dass sobald man da versucht selber tiefgreifende einzugreifen und irgendwelche änderungen zu machen kann es ja eigentlich nur schlechter werden und das ist wahrscheinlich so ein beispiel gewesen von die wollten es ein bisschen ändern haben es dann aber nicht ganz genau so gemacht wie material ui das gerne hätte die haben da auch ideen wie man das anpassen kann und sowas aber es wird dann schnell fucklig

und dann kann es natürlich schnell passieren dass man es dann eher verschlimmbessert und irgendwas auf den ersten blick vielleicht optisch anders aussieht aber im hintergrund responsiveness accessibility diese ganzen dinger dann eher kaputt sind

genau hast du eine idee was für frameworks man einsetzen könnte oder bibliotheken wenn man jetzt wirklich selbst stylen wollte ich habe mir nämlich mal geguckt was so die alternativen dazu sind und man hört natürlich auch so links und rechts immer was andere leute so einsetzen

ja es gibt zwei abweichende konzepte davon die man sich überlegen kann das eine ist material ui ist ja wirklich schon ein komplett fertiges paket also das bietet die bausteine und gleich ein design dafür mit

und bei baustein da müssen wir uns nicht so etwas wie ein button vorstellen was man in einer zeile html und css gerade noch selber machen können sondern sind auch wirklich komplizierte oder aufwändige bausteine dabei wie input felder die sich verschiedene error states und hilfe states und sonst irgendwas haben

das kannst du also nicht mal so eben selber schreiben oder listen oder interaktive elemente so modale die aufgehen also schon relativ komplizierte bausteine

und die komplett selber zu entwickeln das ist natürlich die eine option dann kannst du es ja machen wie du willst aber es ist auch eben sehr aufwendig und da geht dann sowas wie tailwind css rein

das ist ja jetzt keine komponenten bibliothek sondern eine css bibliothek die geben dir einfach viele individuelle css regeln an die hand und damit kannst du dir dein komplett eigenes design system bauen

aber das ist natürlich sehr aufwendig weil diese ganzen dinge so modale und so weiter muss dann alles selber bauen also das ist die eine variante zweite variante die so ein bisschen dazwischen ist ist das konzept der unstyled components da gibt es bei material ui auch eine variante den das mui systems das ist im prinzip

das material ui ohne das design also nur das html und javascript logik unten drunter wo dann vielleicht schon ein modal dabei ist das kann ich selbst noch nicht

ja aber es macht eigentlich nichts außer die logik und da kannst du dann deine eigene design sprache draufsetzen also das ist so ein bisschen auch so ein zwischending dass man sagt es gibt bibliotheken die geben dir die komponenten und die logik die dahinter steckt aber kein design und das kannst du dann selber da draufsetzen das ist so ein bisschen das zwischending

interessant ich habe nämlich von base ui gelesen das ist wohl von den machern von material ui aber eben dann ansteilt also das bringt eben kein kein style in dem sinne mit sondern erst mal nur die komponenten

ich weiß nicht ob das überschneidung hat oder noch was ganz anderes ist ja genau die entwickeln sich da so ein bisschen mehr richtung es gibt wie gesagt das material ui das ist das fertig designte

konzept dann gibt es base ui oder im ui systems das sind im prinzip nur die komponenten und drunter und dann entwickeln die gleichen entwickler auch noch joy ui nennen die das das ist im prinzip

geschwisterkind von material ui was sich eben nicht an diesem material design orientiert sondern ein eigenes design system drauf bringt und in der richtung gibt es einige andere bibliotheken es gibt noch chakra ui oder

wie es mit dem schlimmen namen schatzen schätze n oder so ne ich weiß auch nicht wie man es ausspricht die haben alle so ein bisschen unterschiedliche schwerpunkte die sich eben nicht so sehr an dem material design festhalten das konzept ist immer das gleiche entweder volles design

baukasten sowie material ui oder an style das ist so in der mitte oder eben komplett selber bauen ja genau radix ui und dieses schätze n oder wie auch immer man es ausspricht das sind ja so die new kids

und block die im moment so ja ziemlich gehypt sind würde ich sagen genau haben wir noch nachteile von material ui die wir anbringen müssen die leute da draußen wissen müssen bevor sie sich jetzt euphorisch da reinstürzen und material ui nutzen was ich an sich nur jedem empfehlen kann aber so ein paar nachteile haben wir schon

ja also ein tja ich weiß nicht mal ob ich es nachteile nennen würde aber eben diese verheiratung mit material design die muss man sich eben bewusst vor augen führen und das ist jetzt hier konkret material design 2 das ist auch nochmal wenn man ins detail geht eine entscheidende unterscheidung es gibt ja inzwischen bei diesem material design drei iterationen die neueste ist material design 3 diese ganzen neuen smartphone modelle die basieren da drauf material ui

heißt das jetzt weil man das super fancy individualisieren kann und das ist relativ kompliziert ins web zu übertragen weil da ein paar fancy dinge dabei sind und da tut sich das material ui team auch relativ schwer also da ist seit ewigkeiten ein port für angedacht

das heißt dieses material ui basiert auf dem design zwei um da jetzt mal ganz ins detail rein zu picken und wenn man sich eben nicht an diesem material design orientieren möchte oder an den eigenarten orientieren die google da aufstellt also ist einfach die falsche wahl

so man kann da schon viel dran machen aber das muss man im hinterkopf haben dass sowohl material design als auch material ui relativ konkrete vorstellungen davon haben wie du welche elemente verwendest

und wie die im zusammenhang stehen also bestes beispiel es gibt wenn man so eine liste abbilden möchte im material ui relativ konkrete vorgaben wie du welche komponenten zusammenstöpseln möchtest damit das am ende ein kohärentes bild gibt

damit die abstände passen damit es responsive ist und so weiter und so fort sobald du das nicht so genau machst wie die das machen fällt es halt an irgendeiner stelle auseinander gleiches beispiel mit dieser card element ist auch ein ganz prominentes

bauteil bei material ui das ist eine karte mit so einem header und dann content und so actions die leute die mal schon mal irgendeine google anwendung vor sich hatten haben es vielleicht schon gesehen und da ist es auch so die haben relativ konkrete vorstellungen

davon wie man das verwendet und sobald man es nicht so verwendet wie die sich das vorstellen geht es halt schnell kaputt und fällt auseinander und damit meine ich jetzt passen

passen irgendwelche abstände nicht mehr passen irgendwelche größen nicht mehr zueinander ist es vielleicht nicht mehr so responsive das ist alles natürlich nicht dramatisch weil das letzten endes nur ui ist aber die idee ist ja eben dass man aus einem gusten interface hat wo wenig passieren kann man kann schon fast sagen die vorteile von material sind eigentlich auch die nachteile man hat eben ein vorgebendes design system man muss sich nicht viele gedanken machen aber wenn man das möchte ist es eben auch gleichzeitig nachteil genau das ist eben so wie bei diesen ganzen frameworks nenne ich es jetzt mal allgemein die so stark opinionated sind

also bestes beispiel ist ja eben auch Laravel das hat so viele vorstellungen davon wie man dinge macht und wenn du sie genauso machst wie die sich das vorstellen ist es ein perfektes framework was dir super viel arbeit abnimmt aber sobald man ein bisschen davon abweicht und vielleicht diese hintergründe nicht so im kopf hat dann geht es auch schnell kaputt und das ist eben eine sache da muss man sich schon sehr einlesen auch mal in dieses material ui und dieses material design um zu verstehen wie die bausteine da zusammenhängen wenn man das dann gemacht hat ist es super schnell für prototyping

also dadurch dass man sich dann gar keine gedanken mehr ums ui machen muss sondern nur noch die eigene logik implementieren kriegt man da so unglaublich schnelle ergebnisse runter für mich privat habe ich mal irgendwelche kleine helper tools gebaut innerhalb von einem tag rissen produkt fertig was schon einiges kann weil ich mich als entwickler eben nur auf die ganze geschäftslogik im hintergrund konzentrieren kann und kein bisschen irgendwie ui machen muss du kannst ja sogar zwischen deinen eigenen anwendungen dann komponenten auch hin und her schieben wenn du react und material ui benutzt dann kannst du es eigentlich wieder verwenden jetzt hast du eben

schon gesagt dass das auf material ui 2 basiert und das ist auch einer der nachteile die ich mir hier kurz notiert habe das wirkt einfach insgesamt auch ein bisschen oldschool schon fast ne also es ist halt nicht mehr so wahnsinnig modern das ist halt so dieses android von vor fünf jahren sagen wir mal damals hat er jeder bootstrap verwendet und wenn man eine anwendung hatte die nach bootstrap aussah also das hat einen angesprungen das hat man direkt gesehen und das ist jetzt nicht per se schlecht aber ja irgendwann hat man das halt so ein bisschen satt gesehen und das oft gesehen und dann haut ein das nicht mehr so wahnsinnig vom

hocker und das wird mit material ui wenn es nicht schon passiert es wird es definitiv passieren dass man sagt ja das ist halt so eine 2020 anwendung vielleicht so in der richtung und ja das muss man natürlich im hinterkopf haben und da hoffe ich natürlich darauf dass die leute von material ui sagen hier in den neuen versionen machen wir das auch optisch noch ein bisschen anders und gehen da mit der zeit und machen das wieder interessant aber das kann man nicht so richtig voraussetzen und das definitiv ein nachteil dass man mit der optik heutzutage eigentlich kein mehr vom hocker hauen wird ja das ist so ein bisschen das

problem dass auch das material ui team gefangen hält dass sie sich ebenso an diesem design orientieren und das design ändert sich nicht mehr und ich habe schon so oft irgendwelche prs gesehen wo jemand gesagt hat hier wäre das nicht cool das so und so zu machen und die meinung wäre ja aber das design gibt es halt nicht her und die versuchen das schon wirklich mit allen regeln der kunst zu brechen diese vorgabe aber die haben sich eben mit diesem material ui dem material design verschrieben und deswegen versuchen die es auch möglichst so zu machen wie die es machen und haben da gar nicht so künstlerische

freiheit irgendwas zu verbessern auch wenn es das vielleicht wäre es wird immer mehr gelöst aber das ist das grundproblem und dann habe ich noch einen riesen nachteil aufgeschrieben wo ich mir gar nicht sicher bin wie nachteilig der ist aber der hat schon für mich so geschmack und das ist ganz klar diese ja ich glaube neue also zumindest kannte ich die jetzt noch nicht so lange diese neue bezahlte version es gibt ja jetzt drei verschiedene versionen es gibt diese core version die ist frei auch nach mit open source lizenz also alles super und dann gibt es im ui x pro nennt sich das und im ui x premium und das ist dann 180

us dollar pro entwickler im jahr und das premium kostet sogar 588 us dollar wenn die zahlen jetzt gerade stimmen aber ich glaube so p mal daumen in der richtung pro entwickler und ja da sind funktionen gebündelt also in dem pro sind da so sachen drin wie dass man tabellen noch mal anders sortieren kann oder in diesem grid system sind da spezielle funktionen drin und die kann ich eben nur nutzen wenn ich diese pro oder premium version nutze und jetzt habe ich natürlich so ein bisschen das gefühl da rutschen immer weiter funktionen rein die vielleicht für uns im alltag auch wichtig sind ich habe aber keine lust 180 dollar pro

entwickler im jahr zu zahlen jetzt für die einfache variante schon und das wäre definitiv ein grund warum man sich das überlegen muss ob man material weiter einsetzt es ist ja so da ist ein kostenloses tool was uns

unglaublichen mehrwert bietet und uns erlaubt unheimlich schnell komplexe anwendungen zu bauen die wir dem

kunden also unseren kunden verkaufen und dafür nutzen wir kostenloses tool an dem wir auch wir haben es gerade

gesagt einen gewissen anspruch haben was updates angeht was accessibility angeht und wir erwarten auch dass wenn die irgendwelche sachen ändern dass das dann nicht kaputt geht oder sowas also wir verlangen da eigentlich von einem kostenlosen tool hundertprozentige perfektion also sehr viel arbeitsleistung ohne dass wir dafür geld bezahlen weil kostenlos open source mlt hast du gerade gesagt so wer bezahlt das ganze da sitzen ja trotzdem leute dahinter die das berufsmäßig machen und die da sehr viel zeit einstecken und irgendwie auch geld bekommen wollen und man sieht das bei sehr sehr vielen open source projekten dass die versuchen sich zu

auch wieder da als beispiel laravel da gibt es dieses basis laravel framework das ist kostenlos und inzwischen aber ein relativ elaboriertes ökosystem da drumherum mit forge und cloud und so weiter und das wird dann so kreuz subventioniert das heißt die bezahlten pro varianten von so einer kostenlosen alternative helfen so ein bisschen die kostenlose alternative zu stützen und ich kann mir vorstellen dass es hier bei diesem material

ui genauso ist die wollen so diese basis weiterhin kostenlos anbieten und müssen aber trotzdem dass irgendwie kreuz finanzieren und deswegen gibt es da pro

auskopplungen von wo man für irgendwelche bausteine mehr geld bezahlt und offensichtlich ist das notwendig da geht es ja gar nicht darum wie ich das finde weil wir bezahlen denen ja nichts das wäre natürlich die

die alternative dass wir sagen wir kaufen das kostenlose material ui von denen dann können sie sich auch nur ganz darauf versteifen ja was ich finde ist halt die haben das erst kostenlos angeboten und jetzt

nehmen die funktionen raus oder dazu die praktisch sind und sagen die sind jetzt premium und wenn das von einfach an klar gewesen wäre dann hätte man es von einfach an für sich bewerten können und dann sagen können jo

die bezahlten funktionen sind jetzt für mich nicht so spannend die core variante reicht mir das passt und da finde ich den ansatz von lara will eigentlich besser dass das framework an sich erstmal kostenlos ist und ich dann aber zum beispiel ein hosting paket oder so was total praktisch sein kann was ich dann dazu buchen kann das aber nicht unbedingt muss also dass die quasi aus ihrem ökosystem das geld schöpfen und nicht eigentlich aus deren kernprodukt das finde ich hier halt schwierig bei material ui ja also bei material ui muss ich

muss ich jetzt dazu sagen ich hatte noch nicht das gefühl dass die einem irgendwas aus der kostenlosen variante wegnehmen um sie in die pro variante zu packen und all die sachen die in der pro variante drin sind habe ich noch nicht gebraucht das sind dann erweiterungen für ohnehin schon sehr komplizierte module also

zum beispiel tabellen es gibt bei material ui der kostenlose variante sehr viele möglichkeiten für tabellen wo man auch schon tabellen

gestalten kann mit sticky headern und unterschiedlich fancy varianten das ist alles kostenlos und dann gibt es ein pro upgrade für diese tabellen wenn man so möchte und da gibt es noch sehr viel elaboriertere sortieren und filter varianten und so was

fertig out of the box und ich habe bis jetzt mit diesen tabellen noch nicht so viel gemacht ehrlich gesagt aber ich bin noch nicht zu nicht zu dem punkt gekommen wo ich sagte oh da habe ich jetzt unbedingt was gebraucht was hinter so einer pro bezahlschranke versteckt ist vielleicht kommen da andere leute mit anderen anwendungsfällen eher hin mir ist es noch nicht negativ aufgefallen deswegen störe ich mich jetzt auch nicht daran dass es da irgendwelche pro upgrades gibt die verkaufen zum beispiel auch schon fertige templates wo man sich so der sport nicht selber design muss sondern es schon fertig bekommt

und zum teil auch sachen die funktionalität sind also man kann ich weiß gar nicht ob es pro oder premium ist da gibt so ein export für die tabellen dass direkt eine excel oder csv daraus exportiert wird das finde ich ist gar nicht unbedingt die idee von material ui weil das ja eher ein design ist als dass das jetzt funktionalität bietet und da finde ich zum beispiel okay dass man sagt ich biete euch eine zusätzliche funktionalität an die ihr kaufen könnt ja oder date picker gibt es auch in der kostenlose variante und dann gibt es aber super fancy date picker wie man sie auch von booking oder so kennt wo man

zeiträume abstecken kann und sowas die gibt es dann pro also ich kann schon die notwendigkeit nachvollziehen weil so wie wir gibt es wahrscheinlich die allermeisten anderen entwickler die das einfach nutzen dann einen unglaublichen wirtschaftlichen mehrwert raus generieren dadurch erwartungen an das team stellen also weil gar nicht wissen wie viele issues da offen sind weil irgendwelche teams das nutzen und dann damit so fehler reports hingehen von denen sie auch gesehen werden wollen und das alles aber kostenlos deswegen gibt es glaube ich fast keine alternative dazu dass die da pro varianten anbieten und so wie es jetzt konkret aktuell

bei material ui ist habe ich da absolut keine reibungspunkte mit ja das ist ja auch so ein bisschen jetzt kann man sagen open source andere kriegen das auch in dem war linux oder so aber man muss ja schon immer das einzelne projekt sich auch angucken weil es gibt ja nur ganz wenige die wirklich jetzt aus reiner freundlichkeit jetzt ein großes open source projekt entwickeln sondern aufstehen ja schon irgendwie firmen dahinter die das entweder selbst nutzen und dann von der ganzen community profitieren die das ganze weiterentwickeln gibt ja immer ganz unterschiedliche ansätze und hier ist es ja eine firma die offensichtlich auch geld verdienen muss die das ding hier zur verfügung stellt

und natürlich müssen die über irgendeinen weg geld verdienen deren ansatz ist es jetzt diese pro varianten zu verkaufen ich weiß gar nicht ob die noch andere einkommens quellen haben klar also das gehe ich natürlich mit dass eine firma irgendwo auch geld verdienen muss die variante kann man sich dann so ein bisschen drüber streiten ich habe mal nachgelesen wie das ist Kay weil das sind ja jetzt jährliche developer lizenzen was passiert dann wenn ich jetzt eine anwendung entwickelt habe für meinen kunden und der benutzt diese anwendung mit einem pro feature sagen wir mal das ich eingebaut habe und jetzt habe ich aber keine lust bis zum st nimmerleins tag

diese pro lizenz zu bezahlen weißt du was die material leute dazu sagen ich weiß nicht was die konkreter zu sagen aber üblicherweise bei solchen modellen ist es ja dass wenn deine lizenz ausläuft dass du dann die letzte version unter deiner lizenz quasi für immer nutzen kannst wenn das upgrade willst musst du wieder geld bezahlen da hast du den nagel schon ganz gut auf dem kopf getroffen ich habe chatgpt als erstes gefragt und der sagte in dem moment wo meine lizenz ausläuft muss ich alles löschen oder darf das projekt das programm nicht weiterverwenden das ist aber falsch ich habe nämlich dann in der euler oder dem end users license

agreement ist es ja nachgelesen unter punkt 322 wer es dann ganz genau nachlesen will ich kann es auch kurz vorlesen die schreiben hier perpetual das nicht genau wie man es ausspricht in production licensee is allowed to perpetually use in a production environment any versions of the software released before the end of the license term ich weiß nicht ob man es jetzt richtig verstanden hat aber übersetzt heißt es eben genau das was du gesagt hast also in dem moment wo ich diese developer lizenz habe kann ich das natürlich nutzen kann ich das updaten und so weiter und so fort und in dem moment wo ich die lizenz nicht mehr habe kann ich das programm aber

weiter nutzen perpetual ich spreche es bestimmt falsch aus aber das ist eben dauerhaft also ich kann es dauerhaft nutzen in der version bis wohin ich bezahlt habe und ich könnte natürlich später für updates also ich sage manchmal jetzt ein halbes oder ein jahr später will ich jetzt ein update fahren dann erneue ich meine lizenz noch mal kann dann meine updates mir holen und kann die lizenz dann aber auch wieder kündigen und das ding in production weiter benutzen das finde ich so von der idee ganz fair und wenn wir dann darüber sprechen dass man ja in den meisten sachen schon nicht länger als ein jahr

entwickelt also reichen diese 180 us dollar für einen entwickler dann auch aus und dafür kann ich diese features dann nutzen klar jetzt bin ich natürlich auch ein großer fan von updates und so weiter aber das ist jetzt vielleicht bei einer design bibliothek nicht das allerwichtigste da ständig updates zu machen und dann finde ich sogar noch ganz fair vom pricing her das ist ein relativ beliebtes konzept das gibt es ja zum beispiel bei php storm auch da haben wir auch eine bezahlte lizenz und da ist auch so wenn wir das nicht mehr bezahlen dann können wir quasi die version wie sie ist weiter benutzen

für immer und kriegen dann aber halt keine updates mehr ach das wusste ich gar nicht ja das ist relativ verbreitetes konzept so wir müssen da mal einen eigenen podcast zu machen wo wir über das thema open source sprechen weil ich glaube da steckt viel drin was jetzt so ein bisschen von material ui weg führt gerne aber das finde ich ein ganz spannendes thema ein anderer punkt der mich bei material ui viel mehr aufregt da muss ich jetzt noch mal zurück ist wieder sehr technisch das sx prop was meint der man damit also bei material ui gibt es wie gesagt fertige komponenten so ein button zum beispiel da kann ich so ein button aus der bibliothek importieren

und dann kann ich da meinen text reinschreiben und vielleicht noch eine farbe geben und fertig ist dann habe ich den einen button und überall wo ich den button auf diese art verwende sieht der gleich aus und das bedeutet einheitlicher stil und wenn ich dann im theme was ich natürlich auch machen kann die farbe ändere dann geht das durch die ganze anwendung durch und so ist die idee bei allen komponenten dass sie im prinzip schon ready to use sind ja wieder englisch fertig zum benutzen und wenn ich sie so einsetze wie es die dokumentation mir vorgibt und eben die dinge anpassen die für meine anwendung wichtig sind also texte ändern oder vielleicht bisschen logik rein dann funktioniert das wunderbar

und die allermeisten properties die so eine react komponente aus dem design hat die kann ich eben dafür nutzen um so

übergreifende semantische entscheidungen zu treffen davon wie sich elemente verhalten sollen und es gibt es gibt aber eine prop das sogenannte sx prop die haben sie jetzt jungs eingeführt und die ist gleichzeitig super mächtig und super gefährlich weil was ist im

prinzip macht ist in line styles auf der einzelnen komponente oder kann man schon sehen wo das hinführt es gibt den dass die möglichkeit jede einzelne komponente individuell mit css regeln zu überschreiben und

insbesondere bei neuen entwicklern die sich mit dem material eu beschäftigt habe ich schon öfter gesehen dass sie dieses sx prop missbrauchen ich sage es so um eben bestimmte sachen hinzubekommen die sie vielleicht für individuelles

design haben wollen oder vielleicht auch um irgendwelche fehler wieder zu kaschieren die sie vorher gemacht haben weil sie bausteine nicht richtig verschachtelt haben und das ist natürlich die hölle wenn dann einmal in der anwendung da jemand mit anfängt geht eben diese ganze nachhaltigkeit verloren über dieses einheitliche design was man machen kann

also die idee ist was ich allen leuten einprügel ist lass die finger von diesem sx prop oder generell von individuellem styling in dem zusammenhang und benutzt die komponenten so wie man sie haben möchte und benutzt die komponenten auch nur mit semantischen eigenschaften so dass wir an der zentralen stelle im theme sagen können da gibt es so fancy sachen wie style

overrides oder default props die man auf alle komponenten gleichzeitig setzen kann wo man das wunderbar anpassen kann und so wenn man schönes ui gebaut hat ohne individuelles styling kann man da wunderbar in der theme so ein bisschen rumspielen und dann mit einem schlag die ganze anwendung design aber eben aufpassen dass man dann beim implementieren der einzelnen element seiten oder element bausteine oder module sich eben nicht auf das design konzentriert sondern

wirklich streng nach vorschrift die material ui bausteine verwendet damit man dann abschließend im ganzen da das

style drauf packen kann also ich gehe absolut mit dass ich das oft sehe dass die leute komponenten nicht nicht richtig verwenden und dann zum beispiel einen abstand noch mit reinhacken in dieses sx property damit das wieder vernünftig aussieht und das ist natürlich ein anwendungsfall wo das nicht passt ich muss aber ganz ehrlich sagen ich bin da nicht so kritisch bei dem sx property sondern ich finde es eigentlich extrem praktisch seitdem es das gibt weil das eigentlich diese ganzen individuellen styles an einer stelle bündelt und ja man das auch direkt sehen kann dass da was individuell gestylt ist und ich finde es einfach

nur praxisnah weil als es das noch nicht gab hat man sich halt immer tierisch verbogen doch hier und da dosiert eigene styles drauf zu packen und ganz ohne eigene styling geht es meiner meinung nach schon nicht also die praxis zeigt schon hier und da muss ich schon noch mal ein bisschen nach justieren damit es einfach noch mal ein tick geschliffener aussieht weil dann doch jedes design irgendwie noch ein bisschen anders ist und ja es gibt einfach anwendungsfälle in denen muss ich dann doch noch mal ein button rein quetschen und der muss dann halt noch mal ein tick schmaler sein als er vielleicht jetzt vorgegeben ist und da muss ich einfach über dieses sx property gehen ich muss

natürlich ganz genau wissen was ich da mache und mich trotzdem irgendwie auch an diesem material ui oder material design guidelines halten aber ich finde schon sehr praktisch und definitiv notwendig und praxisnah dass es das gibt da graust es mir natürlich wenn du sagst dass da ein button ausnahmsweise mal kleiner sein soll aber das ist wahrscheinlich der unterschied ich gehe ja mehr so ran als qualitätssicherungs mensch der code reviews macht und eben darauf achtet dass möglichst viele unterschiedliche programmierer eine einheitliche anwendung programmieren die sich nachher leicht warten lässt und du bist ja mehr so ein bisschen der designer oder der feinschliff mensch

der an individuellen strüber geht und sagt ich als übergreifender designer entscheide jetzt dass hier ausnahmsweise irgendwas so und so aussehen soll da haben vielleicht ein bisschen unterschiedliche ansätze und ich stimme dir zu dass wenn man diese sx prop richtig einzusetzen weiß ist es ein unglaublich mächtiges tool dadurch dass es auch die ganze zeit eng mit dem theme verknüpft es kann man super elegante und schnelle lösungen schaffen wenn man doch irgendwas abweichen möchte aber man muss eben sehr genau wissen was man tut sonst insbesondere bei großen anwendungen mit vielen entwicklern geht das leicht nach hinten los das hast du jetzt gerade auch gesagt dass das mit dem theme so einhergeht

und das ist ja das schöne ich kann bei den spacings also bei einem margin zum beispiel da muss ich jetzt keine pixel werte eingeben weil sie übrigens ganz oft sehe sondern du kannst wirklich auch werte wie eins oder zwei angeben und das orientiert sich dann an dem standard abstand der im theme definiert ist oft sind das dann zum beispiel acht pixel und wenn ich zwei eingebe habe ich eben abstand von 16 pixel und daran kann ich mich in diesen xx properties auch weiter halten oder ich kann die farben aus dem theme weiterverwenden oder schriftarten und so weiter und so fort es ist fantastisch also wirklich dieses xx prop gleichzeitig

fluch und sägen muss eben genau wissen was man tut ganz genau okay ich wäre schon am ende mit vor und nachteilen und habe das gefühl wir haben schon ganz guten überblick wenn du noch was ergänzen möchtest dann ist jetzt die zeit dafür ja ich klinge so ein bisschen wie der große staubsauger vertreter der allen material ui verkaufen möchte aber ich finde es halt wirklich gut es gibt schwachstellen das stimmt wir haben es noch gar nicht über die performance gesprochen also dadurch dass es so riesig ist kann das schon alleine der entwicklung mal sein dass die ide recht lange braucht um die ganzen sachen zu

indizieren aber auch dafür gibt es in der dokumentation hinweise wie man das lösen kann barrel imports ist ja das zauberwort also es ist wirklich dadurch dass es auch so groß ist eine sehr gut gepflegte bibliothek und wenn einem das design egal ist und man react verwendet und sich ein bisschen informiert hat was material design ist und material ui ist dann ist das meiner meinung nach der beste pick für so eine komponenten bibliothek und es gibt so schnell so gute ergebnisse die also nicht nur gut aussehen sondern auch schon fancy animationen und so ein bisschen uix dabei haben das ist ja auch der grund warum wir das eigentlich fast

ungefragt für jede neue projekt einfach aufsetzen also große empfehlung von mir auch wenn es natürlich fallstrick gibt den man sich bewusst sein muss den worten kann ich mich eigentlich nur anschließen vielleicht nur so als mini ergänzung wir können ja wirklich sagen wir setzen material ui jetzt seit vielen jahren ein ich kann es gar nicht ganz genau benennen und ich kann aber wirklich sagen es ist abgehangen die komponenten funktionieren gut das ist zuverlässig und man kann es wirklich in produktiv umgebungen in business anwendungen kann man es wirklich tipptopp einsetzen und material ui hat mir ich müsste jetzt

darüber nachdenken aber noch keine probleme bereit in irgendeiner form ich habe auch noch nie ein bug report oder irgendwas geschrieben sondern es ist wirklich so wie es da ist es ist wirklich super gut entwickelt und funktioniert richtig klasse und wir machen noch ein podcast über open source so machen wir es Kay damit sind wir eigentlich schon am ende ich gehe wieder skifahren und ich wünsche dir noch eine ganz wunderbare woche dir auch und tschüss da draußen eine ganz wunderbare woche dir das ist das ist das ist das ist das ist das ist das ist das ist das ist das ist das ist das