Moin zufolge 89 von einfach komplex heute, der seit Ende
2023 versprochene Deepdive in React Jazz eine Bibliothek, um
ja Elemente anzuzeigen im Web und Burkhard hat uns da was
vorbereitet. Es geht richtig tief rein, aber
wir gucken auch, dass wir jetzt nicht jeden und jede abholen,
aber zumindest die Leute, die jetzt vielleicht noch nicht so
tief drin sind, auch für die was dabei haben, wenn Burkhard für
der Plan. Ja, Moin für alle die die
Legotechnik kennen, die nehmen wir heute noch mal mit.
Den würde ich das später merken. Also nicht nur React muss, man
wird gelernt, es gibt auch Deepdive und lego Technik heute.
Ja, cool. OK, ich bin gespannt, alles
klar. Also vielleicht noch mal ganz
kurz als kleiner recup, ich hab mir dummerweise unsere alte
Folge gar nicht mal angehört, ich hab aber natürlich jetzt die
Mittel der Zeit genutzt, a la Germany JGBT und Co.
Mal noch mal Durchgeguckt, React kommt aus dem Hause Meta ne,
dort hat man irgendwie Performance Probleme gehabt mit.
Mit dem Newsfeed ja, und hat das dann dort in innerhalb von Meta,
also unter Facebook hat man das vielleicht eher entwickelt und
dann die erste Anwendung, die es dann verwendet hat, war
tatsächlich Chat ist. Die Kernidee ist irgendwie, dass
Benutzeroberflächen automatisch auf Veränderungen, also von
Datenzuständen reagieren, ne und deswegen auch der Name React.
Ich reagiere auf irgendeine Veränderung und das ist ziemlich
flott, ja und ich glaube auch, es wird dann häufig in einem.
Ab war schon einem Zuge genannt mit mit View, JS und und
Angular, aber letzten Endes ist der feine und kleine Unterschied
und da müssen wir jetzt aufpassen, zumindest hab ich das
gelesen, dass es sich bei den anderen beiden eher um
Frameworks handelt, während Racked ne Bibliothek ist,
tatsächlich die sich dann doch wieder auf ne kleinere auf nen
kleineren Teil des Ganzen fokussiert.
Ja gegenüber diesen anderen Frameworks ja so, das war meine
kleine Einleitung Booker zum Thema, das darfst du mich
korrigieren. Ja ne, du bist ne super
Einleitung, ja. Das sind so feine Details.
Ne, Wo sind die Unterschiede zwischen den Frameworks haben
wir glaube ich in der Folge davor n bisschen rausgehoben
aber du hast recht Gerrit, also man spricht ja gerne mal so von
opin United ja also wieviel Meinung bringt so nen Framework
Produkt im Reinen wie man es zu benutzen hat und wie Sachen
aufzubauen zu sind und da würde ich tatsächlich auch so sagen
React lässt einem am meisten Freiheit ja also es hat zwar
grundkonzepte und die wollen wir heute genau angucken.
Es ist aber nicht so n man wird nicht so eingegleist wie bei
anderen Frameworks, so relativ klar ist, wie ich wo was
hinschreiben muss und so weiter das werden wir noch.
Kennen. Anscheinend gibt es aber
tatsächlich, da auch beim bei der Benamung sag ich mal
wirklich der Unterschied, dass es viele sagen, es ist nicht ein
Framework, es ist tatsächlich eine Bibliothek, die sich
ausschließlich um die Darstellungsebene kümmert,
während Themen wie Routing oder sowas nicht von Racked mitgelöst
werden, was bei diesen echten Frameworks irgendwie eher der
Fall ist. So ne.
Ja, das kann man so sagen ich. Ich würd das so stehen lassen,
ich find das OK, wenn es ne Bibliothek ist, also man also
die in der echten Welt ist es ja so, dass du ne Bibliothek n
Produkt oder wie auch immer sofort aufbaust und Aufgeleist
mit dem ganzen Ecosystem, was darum gibt ja, also React gibt
es natürlich schon lange und es gibt ein riesiges gigantisches
Ecosystem und du kannst Routing, es gibt den React Dom Router und
so weiter da wollen wir halt nicht so im Detail sprechen,
aber das kannst du alles dran linken dran kleben sag ich mal
ganz grob gesprochen und dann dann bekommst du halt auch ja
Framework. Charakteristika mit rein.
Aber noch mal, du kannst also das React selber, da hast du
schon recht, Gerrit, das bringt das nicht gleich alles so aus
dem Hause mit und du hast halt noch mehr Freiheiten dir den
Router oder den Router oder den nächsten Router noch mit
Reinzuhängen und baust dir quasi deine deine Gesamtlösung noch n
bisschen modularer auf als es jetzt vielleicht in einem in
einem Angular oder Irgendsowas stattfindet.
Ja, das ist so. Ja OK, das erklär es doch ganz
gut. Müssen wir noch irgendeine
Grundlage kennen, bevor wir uns um Legotechnik und Rack kümmern?
Na ja, ich glaube also, die Zuhörer, die die, die uns ab und
zu schon mal hören, die, die haben, glaub ich, ja diese
Grundlagen von kleinen Server, Internet und so weiter das muss
man jetzt schon mal verstanden haben, das fangen wir, das
fangen wir jetzt nicht mehr an hier, also wir wollen, ja, wir
wollen ja direkt mal tief einsteigen, vielleicht nur so
viel gesagt, dass das React ist ne sogenannte Single Page
Application, also nur einmal ganz grob abgestochen, was wir
hier haben es es gibt, also wir sind in der Webtechnologie, es
gibt irgendwo nen Server der. Da da wird quasi ein Programm,
das erzähl ich gleich mal n bisschen genauer zur Verfügung
gestellt. Das wird im Klienten geladen, im
Browser und dann läuft quasi ne Webapplikation.
Ja, das kann alles Mögliche sein, ja es kann Facebook sein,
es kann unsere Applikation, alles mögliche kannste Leute
machen ja mit React, ja genau muss man erstmal nicht wissen,
so und dann können wir einsteigen und versuchen zu
verstehen was ist genau React ja was hab ich davon ja warum warum
nutze ich das so und und wie funktioniert das so ungefähr ja
Mhm alles klar. Ja, ready.
When you are Gerit nickt, dann können wir loslegen.
Ja, ich fang mal an mit dem Lego Technik Krams du das mal
eingleisen was da los ist. Also ich hab mir also manchmal
macht das halt Sinn mit Bildern zu sprechen, manchmal macht das
nicht so viel Sinn, dass das verwirrend und ich würde in
dieser Folge mal probieren so n Bild zu wählen und mal gucken
wie weit wir kommen. Ja und ich beschreibe mal das
Bild was wir haben ne also ich ich weiß nicht wer alles lego
Technik kennt, ich kennt sehr gut ich hab mein meine ganze
Jugend verbracht mit Lego Technik hatte davon sehr viel
ich fand das sehr cool. Also LEGO kennt jeder.
Das sind halt diese diese Blöckchen.
Ja weiß ich nicht, hier gibt es Stangen und Platten und so
weiter und das kannst du halt übereinander kleben und sofort,
ja die haben halt n Interface, was miteinander passt, sodass du
verschiedene kleine Blöcke aufeinander bauen kannst.
Das ist jetzt auch schon bei javascript wichtig, komm ich
aber gleich zu und das Macht und das Lego Technik das Wort
Technik, das braucht man nämlich für dieses Bild, das Technik ist
ja quasi, dass ich noch so Sachen hab wie Zahnräder,
Getriebe, ja schrauben differenziale.
Hydrauliksysteme, Elektromotoren und so weiter das ist quasi das,
was das Technik an dem Lego erweitert.
Sag ich mal. Ja, also grob gesprochen und
jetzt komm fang ich schon mal an mit dem Bild malen.
Ja grob gesprochen ist lego da kannst du was bauen ist sehr
statisch. Ja da kannst du da draußen mit
dem Finger dran tippen, passiert aber nichts ja weil es gibt
keine Logik, kein Getriebe, es macht nichts innen drin, ja es
ist halt schön, es ist da kannst du irgendwas?
Irgendwie ne Mickey Mouse bauen oder irgend so was. 3.
D ja kannst dir angucken, ist cool.
Ja das ist die coole HTML Seite, die statische ja passiert aber
nichts kannst du dich nicht mit lackieren kannst du lesen,
kannst du angucken, kannst dich freuen super ja Deko Technik
kannst du halt n ganzen Bagger bauen ne so n so n richtig
schönen Bagger mit einer Schaufel da kannst mit Pleumatik
drinne, da läuft da irgendwie n Motor der macht pumpt irgendwie
in so n Kompressor rein dass du Luft hast.
Dann hast du Ventil ja also da hast du, da hast du erst was
Schönes zum Angucken und dann kannst du Knöpfchen drücken
kannst du am Hebeln drehen und so weiter und das Ding macht
sogar was, ja. So, und das ist was wir ne
moderne Webanwendung nennen, weil wir wollen nämlich ganz
viel interagieren und ganz viel machen.
Ja, und so weiter und und und. Der Bagger der Lego Technic
Bagger ist das was React ist. Ja, und da sag ich jetzt voraus,
weil React ermöglicht uns mal ganz grob mit den Steinchen was
die HTML Bauteile sind, die statisch sind die zu kombinieren
mit einer Business Logik. In einer also ne.
Also ich mit mit Knöpfen und so weiter mit mit einer Methodik wo
ich auf Events reagieren kann auf auf und zwar auf 2 Sorten
von Events die die vom User kommen weil ich im Browser
irgendwas klicke und mache oder die die von einem Backend kommen
weil sich da irgendwas verändert hat, weil vielleicht ein anderer
User irgendwas geklickt hat und ich synchronisiert werden soll,
da brauche ich dann auf einmal Logik für ja und das ist die
Technik in Sambagger und. Diese Kombination, die ist ja
komplex. Ja, wenn ich so n Bagger baue
auch mit lego Technik, da braucht man fette Anleitung und
so, da hat sich jemand n bisschen was überlegt, dass das
alles so klappt, da muss ich nämlich jetzt auf einmal
statische Blöcke mit funktionierender Technik bei uns
jetzt hier mehr Logik verknüpfen und dafür ist React nen
Framework, dass ich das gut machen kann und ne Übersicht
behalte bei so einem komplexen Wesen wie n Bagger ja oder bei
so einem komplexen Wesen wie einer fetten Webanwendung bei
möglichen Sachen passieren müssen.
Das mal so vorausgeschickt, das wird unser Bild ja.
Ja, und und und vor vor React war das gar nicht möglich.
Ja, es klingt jetzt fast so, als konntest du nicht interagieren
mit Webseiten, bevor es React gab.
Doch doch, kannst du schon alles?
Ja, also es ist ja also am Ende. Was machen wir denn hier am
Ende, die die Tools jetzt ganz technisch unten drunter sind?
Javascript ja javascript ist ne Programmiersprache die die fügt
dem die fügt statischen Webseiten dynamische
Möglichkeiten hinzu, ja. Und das kann ich jetzt auch mal
sagen. React funktioniert immer noch
mit javascript. Ja es ist ne ist ne Bibliothek,
im Prinzip ne javascript Bibliothek, aber wenn ich nur
das blanke Javascript hab, dann ist es dann muss ich ja trotzdem
noch sehr viel selber machen also es ist diese ganzen
Getriebe und also bei auch bei bei bei Legotechnik muss ich ja
jetzt nicht auch noch die wie soll ich sagen die Schläuche mir
ausdenken und die selber bauen und diese ganzen Ventile und so
weiter und die und die wie sagt man die Diplomatik wie heißt
denn das wenn das Zylinder ja danke den Zylinder und so weiter
das ist halt vorgefertigt ja und?
Dass der dass wenn du da dann oben Luft reinpumps, dass der
dann rausfährt. Und wenn du unten Luft
reinpumps, dass er, wie sie sich wieder reinfährt und so weiter
also so Minimalsachen sind da quasi schon fertig.
Ja, und diese Minimalsachen, das sind so Sachen, die kriegst du
dann von React mit. Ja und hier noch mal die
Einsortierung, die sind halt schon ziemlich minimal und das
ist das coole, es geht ja immer ums Abstraktionslevel ja, React
ist noch, ja es bringt dir was mit, aber es ist auch noch nicht
riesig, ja es sind es sind ganz kleine Komponenten.
Die aber schon nen mehr riesigen Mehrwert bieten um dir den
Bagger zu bauen. Aber du musst jetzt nicht noch
ne Cut Zeichnung machen von deiner von deinem Zylinder oder
Irgendsowas, der ist halt schon dabei.
Ja genau und wenn man wenn man sich jetzt ansucht ansieht, dann
kann man also wenn man sich jetzt so n so n Bagger kauft im
Geschäft ja und pack den aus und schmeiß den mal so auf den Tisch
aus den ganzen Plastiktüten raus dann dann hab ich halt meine
ganzen Teilchen ja also Zahnräder seh ich Schläuche seh
ich und sofort ja und die und jetzt in unserem Beispiel sind
die immer erstmal alle grau ja haben keine Farbe ja das.
Dazu kommt man nämlich auch noch.
Die muss ich nämlich die, die ich, die Anmale, das ist nämlich
auch noch ne Sache, da hat React auch sehr viel Möglichkeiten,
wie ich das machen kann und das bringt mich auch noch zu einem
anderen Punkt, selbst wenn ich jetzt, ich springe mal voraus
und sage, OK, wir bauen jetzt quasi mit React ne Anwendung,
also wir haben es jetzt geschafft n Bagger zu bauen, ja
dann habe ich den zusammengesteckt und der
funktioniert kann ich ausprobieren, dann sieht es so
aus für den Entwickler, ja dann ist der dann ist der Bagger da.
Und bei Lego Technik bin ich jetzt fertig.
Ja, den kann ich dann benutzen, das ist ein React Analogie
nicht, da habe ich dann aber nur auch ne funktionierende
Webseite, bin aber auf dem Development Server, hab das noch
nicht fertig deployed, so würde ich nicht in Produktion gehen ne
das will ich jetzt noch mal sagen bei React alleine damit
macht man heute keine fertige Webanwendung, man braucht noch
einen sogenannten Bundler ein Tool.
Was was, wenn ich den React Code fertig habe, also den Bagger
gebaut hab, fertig? Was dann noch mal drüber geht
und was bestimmtes Macht in dem Bild vom Lego Technik könnte man
sagen so ich bau noch mal alles auseinander alle Teile hab mir
gemerkt wie das sein muss und jetzt mach ich überall
Sekundenkleber zwischen diese plastikblöcke ja dass das nie
wieder jetzt ist. Mein Ziel ist, das Ding darf nie
wieder auseinanderfallen ne und dann mach ich noch irgendwie nen
nen Lack drauf also nicht farblichen Lack sondern einfach
nen Lack drauf und so weiter und sofort ja so dass das Ding.
Production Ready ist ja, dass ich den halt auch in die
Sandkiste mitnehmen kann oder unter das Wasser tauchen oder
was weiß ich so. Ja und vielleicht werden noch
mal bestimmte Teile optimiert, wo ich irgendwie n zu schweres
Teil gemacht hab, nämlich n leichteres oder Irgendsowas das
ist der Wandler. Ja und das sind im im echten
Leben sind das sind das, da gibt es eigentlich 2 Tools 2 also die
ich so kenne 2 wichtige Tools, das ist der sogenannte CRA, das
liest man immer, heißt aber CRA steht für Create React App, das
ist das ältere Tool. Das funktioniert im Hintergrund
mit Webpack. Darüber haben wir auch schon mal
gesprochen und im Prinzip ist das so, was ich sage, dass dann
dem gibst du quasi deine fertige React Anwendung, die du halt
kodiert hast und der nimmt es quasi noch mal auseinander,
guckt was kann er damit optimieren, so dass es trotzdem
Bagger bleibt und gleiche Funktionalität, aber dass es
quasi noch geschmeidiger funktioniert, das ganze Ding
leichter ist. Ja dann wird er halt quasi
zusammengeklebt und fertig gemacht, ja und dann kriegst du
quasi nur hochoptimiertes javascript.
Was das Gleiche ist, aber noch schneller, ist ja vielleicht 30%
und noch viel kleiner ist von der vom also im Code ist es dann
halt kleiner von den Kilobytes ne, dann ist es wichtig den
Bagger, den muss ich ja jedem Nutzer ne Kopie von dem Bagger
hinladen wenn der in seinen Browser geht, dann ist der
Bagger lebt quasi wenn er fertig gebandelt ist auf dem Server und
jeder Nutzer der dann in den Browser kommt bekommt ne Kopie
vom Bagger zum Spielen ne und der Bundler macht halt den
Bagger leichter beziehungsweise den Code.
Klein ja, weil ich will nicht lange fette Megabytes
runterladen, das ist wichtig, ja, heutzutage.
Und der Bandler kommt aber immer einmal zum Einsatz, ganz ähnlich
wie weiß ich nicht. N Compiler oder sowas.
In dem Moment wo dir die Software zur Verfügung stellst
oder released quasi ganz genau. Ja, und tatsächlich ist das, je
größer deine React Anwendung wird auch n krasses Ding.
Ja also das der kann dann schon mal 20 bis 30 Minuten oder
länger bundeln, damit der halt deinen Bagger durchoptimiert und
zusammenklebt sag ich mal, dass der gut passt.
Ja. OK, das passiert also jedes Mal
mit unserer. Eigenen Software wenn du.
Wenn ich dann hier so lese, genau, ja, so ist es und der
Bunlas hat hat dann ganz andere. Also man optimiert 2 Dinge ja
und die sind sehr sehr unterschiedlich für den
Entwickler, während der baut willst du ist dir das völlig
wurscht, also da wird noch nicht mal alles immer neu gebaut, da
ist wichtig, dass du sofort ausprobieren kannst.
Ja, als Entwickler veränderst du was am Bagger und dann willst du
sofort gucken, geht das jetzt ja hab ich das hab ich das Zahnrad
richtig da dran gemacht, ja. Das sind, das ist auch wichtig,
und das sind, das Macht auch, das Macht auch normalerweise
React nicht, das sind auch Tools, die Drumherum sind.
Meistens ist das im Bundler mit enthalten, der Bundler macht es
fertig für Produktion, der hilft dir aber auch, dass du damit
cool entwickeln kannst. Ja, dass du sofort wieder den
funktionierenden Bagger hast, den du ausprobieren kannst.
Ja, mal grob gesprochen, das ist der Development Server, der
sogenannte und der, der führt, der, der führt dazu, dass nicht
immer der ganze Bagger noch mal neu gebaut werden müssen,
sondern nur die Teile, die du gerade brauchst.
Die werden dann noch mal schnell ausgetauscht und so weiter ja.
Aber das das soll mal genug da sein.
Ich will nur noch mal erwähnen, was heute der moderne Wandler
ist wird es wird vit ausgesprochen glaube ich.
VITE funktioniert innen drinne auch ganz anders als als Create
React App und ist glaube ich in vielen Belangen create react App
voraus. Ja also es ist moderner, es ist
schneller, ist das was da rauskommt führt schneller aus
und so weiter ist also. Wenn jemand jetzt heute n React
Projekt anfangen würde, würde ich sagen, guckt euch mal Beat
an. Ne, das ist das modernere wird
tatsächlich basieren noch auf dem CRA, weil das damals als wir
angefangen haben The Shit war sag ich mal, ist jetzt auch
schon wieder n bisschen outdated, aber es ist auch nicht
einfach, das kann ich jetzt auch schon mal sagen, den Wandler
einfach auszutauschen das das kann mehr Schmerzen geben als
man denkt. Ja das vor allen Dingen bei
einer großen Software, OK. Hat das gepasst?
Mit dem Bildgerät hast du ne Vorstellung was was jetzt so
REACT ist und also React noch mal zu wiederholen, dass wir das
abgeschlossen haben, ist quasi der der der Baukasten, die
Steine, die Tarnräder und der Bundler ist quasi so n Finisher
zum Schluss so. Das das hab ich schon alles
nachvollziehen können und was mir noch nicht ganz klar ist und
ich weiß nicht, das ist vielleicht eher Grundlagen als
Deepdive. Was ist eigentlich dieses
grundlegende Problem was irgendwie React gelöst hat sag
ich mal als es damals eingeführt wurde, weil deine Aussage war ja
ja klar, waren Webseiten schon davor.
Interaktiv oder oder oder Web Produkte wie auch immer, aber
irgendwas muss ja dazu geführt haben, dass das, dass man gesagt
hat, so, jetzt brauchen wir was neues, ja, und das muss ja
irgendwas grundlegend verändert haben, weil jetzt ist es ja
extrem verbreitet und überall im Einsatz, also wo hat das
angesetzt, kannst du da noch was zu sagen?
Ja, also ich meine es. Du hast halt das Problem, dass
du, dass du, wenn du wenn du Webanwendungen machst, die nicht
nur statisch sind, dann hab ich ja schon gesagt, dann brauchst
du halt irgendwie Logik, ja. Wenn du das irgendwie anfängst,
Bild alleine, ohne ohne irgendwelche Struktur
aufzuschreiben und das groß wird, dann endest du
normalerweise im Chaos da und dem Spaghetti ja, weil weil es
ist nämlich auch so, dass dass Logik und also dass Komponenten,
die du anzeigst und aber auch Logik sich ganz viel
wiederholen, ne. Also wieviel 1000 knöpfe hast du
zum Beispiel auf einer Webanwendung?
Ja und wieviel 1000 mal machen die halt einfach wieder on click
ja und wieviel 1000 mal willst du irgendwie wenn bei on click
irgendwas ausführen? Ne innere Logik ja irgendwas
machen und sofort ja und so ist es auch, da passt das Bild auch
wieder in Lego Technik du hast halt immer mal wieder nen
Zahnrad und n Getriebe ja und den Bagger hast du viele davon
ja und die sehen immer wieder gleich aus so und das ist das
Problem das React gelöst hat, es hat das extrahiert den kleinsten
gemeinsamen Vielfachen. Wie schaffe ich es,
Wiederverwendbarkeit und Organisation reinzubringen in
sowas komplexes, was Building, Blogs und Logik hat?
Ja und und und und auf Events reagieren muss ich aus
verschiedenen Quellen kommen können.
Ja und ich glaube das ist gar nicht so einfach, das ist
nämlich n. Ja man muss sich überlegen, was,
was wollen wir denn machen ne ich geh das mal durch, ja wir
müssen nämlich Events von Usern empfangen und drauf reagieren ja
und und das drauf reagieren heißt wir müssen da muss dann n
bestimmtes Stück Logik laufen. In dem in der React Anwendung
wenn ich den Knopf drücke mal zum Beispiel was in einer
anderen Farbe an oder irgendwas das ist die Logik, ja dann hab
ich im schlimmsten Fall noch nen Backend, das denkt React noch
mal gar nicht mit, das ist nen Backend ist nicht nötig ja ne
Backend Interaktion mit für für ne React Anwendung aber das ist
ja meistens so, dass ich irgendwie noch n Backend
synchronisiere, dann dann muss ich quasi vom Backend aber auch
Events entgegennehmen wenn ich bin synchronisiert oder jemand
anders hat was gemacht und du musst synchronisieren also da
hab ich quasi auch wieder eventeingang.
Ja, und mein Bagger, aber nicht vom User, sondern vom vom
Backend. Das muss auch wieder Logik haben
und dann muss ich alles synchronisieren und dann muss es
auch noch schön angemalt werden. So und das das hat React klar
gezogen und zwar in der Kern in dem Kern Design, Konzept der
Komponente, da steigen wir jetzt mal ein mit dem Deepdive OK das.
Heißt, man könnte vielleicht sagen, dass man vorher schon
genau beschreiben musste, wie etwas passiert.
Also. Das heißt, ist das zu ändern?
Hier ist was zu ändern, dann muss da noch mal irgendwie die
Farbe geändert werden oder sowas, das hab ich mal ändern
gesagt, aber du weißt was ich meine, jetzt kann man nur noch
eher sowas sagen wie was möchte ich eigentlich und es passiert
wie ja also von wie zu was. Das also das wichtigste Konzept,
und da gehen wir jetzt drauf ein, ist das React bietet mir in
seiner Bibliothek das die sogenannte Komponente und ne
Komponente ist was sehr weites, aber wir gehen das mal durch,
ja. Ne Komponente kann bestehen aus
aus darstellenden Blöcken, ne, also jetzt im Web gesprochen
einfach Sachen die die man anschauen kann, Knöpfe und so
weiter darstellende Elemente einer Logik einer Business Logik
ja und optional quasi an Anleitung wie das auszusehen
hat. Also anmalung ja ich hab ja
gesagt die Steine sind alle grau am Anfang ja so und das ist
wichtig und die Komponente kann aber einen beliebigen die kann
jetzt beliebig groß oder klein sein und.
Das ist das erste. Ja, also erstmal hab ich ja nur
die Steine locker liegen. Wenn ich jetzt die ersten 23
Steine aufeinander baue und baue quasi quasi nen Minimodul von
dem Bagger n ganz kleinen Teil und so wenn du die wenn du mal
so durchgehst so diese Anleitung kennt jeder von Legotechnik die
sind so ja im Prinzip könntest du sagen und und manchmal ist
das auch, sogar das gibt so ganze Kapitel ja aber manchmal
machst du ein 2 Seiten baust du irgendwas zusammen und dann wird
noch mal so n Bild gezeigt von einem kleinen Teil was jetzt
fertig ist. Das legst du meistens zur Seite
und dann baust du was anderes so ja du baust so.
Aus aus den kleinen Steinen baust du so kleine Module.
Ja, und wenn du die Module hast, dann fängst du auf einmal an,
die Module ineinander zu kleben. Ja und dann und manchmal geht
das auch erst, wenn du beide Module fertig hast.
Dann verbindest du die mit dem Schlauch und vorher hätte das
nicht geklappt oder irgend so was, weil die dann nicht bauen
kannst, weil der Schlauch andauernd rumhübelt und so
weiter ja das sind die Komponenten ja alles was ne
alles was ne Mixtur ist von Steinen die du aufbaust und
deren Zahnräder, das ist mal die Logik ja oder die Hydraulik, die
Schläuche, das ist nämlich mal die Logik, das kannst du ja
schon mal bauen n Stück. Betriebe mit n Stück Stein mit
bestimmten Farben, die du ausgewählt hast.
Das ist ne Komponente in React. Ja und die und jetzt jetzt gehen
wir noch mal kurz, wir wollen ja nicht nur hier über Legotechnik
schwadronieren, sondern auch über React, die die Steine jetzt
noch mal ganz ehrlich gesagt, das sind im Prinzip die HTML
Bausteine, ja die HTML Elemente, ja das sind ja die die Dinger
die die wir sehen können in der in der UI ja im Web ja.
Und die Farbe, das ist das CSS, ja die, die das das anmalen.
Ich kann ja sagen irgendwie n diff Element hat zum Beispiel
Background Color red, dann wird das ganze Viech halt, dann ist
es halt mit einem Rechteck was rot ist ja zackboom ne und in
einem React Komponente das ist wichtig wenn wenn es das hat,
das ist optional, es muss es kann auch nur Logik haben ne es
kann auch nur Steine haben, das ist auch wichtig zu verstehen ne
es kann ne Komponente geben die hat keine Zahnräder und keine
Schläuche, das ist einfach nur n Stück.
Was weiß ich. Die Schaufel mit dem Gelenk oder
Irgendsowas ja zusammen ja dann, dann kann das erstmal nichts
machen, weil da nichts dran ist. So ist Test.
Irgendwie ist n statisches Teil, aber es macht vielleicht
trotzdem Sinn das zu haben. Ja weil ich es irgendwie noch
mal verbrauche oder irgendsowas ja, die Schaufel war jetzt n
blödes Beispiel, hatten Bagger nur eine von ja aber was weiß
ich irgendwie. Keine Ahnung so n Kettenglied
oder Irgendsowas. Ja da brauch ich dann halt ganz
viele und so weiter das ist dann halt das Kettenglied, ist
vielleicht auch schon mal aus aus mehreren Sachen gemacht, so
und dann brauch ich halt ganz viel, kannst du dir das
vorstellen? Ne ganz.
Gruppe, das sind ja so so Baugruppen aus
Einzelkomponenten. Richtig, man muss halt einmal
raffen, aber man muss halt einmal verstehen, und das ist
das grundlegendste Konzept, deswegen wiederhol ich das noch
mal in, in, in, in, in React und das ist das coole und das machen
andere Frameworks anders. Ja, in React ist ne Komponente
die Mixtur aus. Bausteinen, also nur sichtbaren
statischen Elementen und optional aber schon der Logik
mit drin. Ich Kapsel also in ein Modul,
wenn ich will, Logik, Bausteine und deren Farbe und jetzt kommt
der springende Punkt und jetzt bietet REACT ne ganz krasse
Möglichkeit diese Bausteine ineinander zu nesten ne, also
ich kann jetzt und und das ist ja das ist völlig willkürlich,
das ist jetzt im Ermessen des Entwicklers.
Was sind meine Komponenten? Ne Komponente ist tatsächlich
abgeschlossen, das sehe ich, das ist auch ganz klar, das ist
nämlich ne nen Pfeil typischerweise n React JS ne
Komponente hat immer nen Pfeilnamen und ne Komponente
jetzt auch mal richtig gesprochen ist eigentlich nur ne
Funktion, das ist ne javascript Funktion, die hat Parameter die
da reinkommen und die nennt man Properties sozusagen gleich noch
was ja und in wenn die wenn diese wenn diese Komponente
anzeige Bausteine hat, dann können diese Bausteine jetzt
aber wieder andere Komponenten schon sein.
Das ist der Knackpunkt. Ja, du kannst Komponenten
komponieren, andere Komponenten in Komponenten haben ja und wild
ja und das Bild ist, wenn man jetzt quasi von der Anleitung
rückwärts blättern würde, in der in der in der Legotechnik, dann
hast du ja zum Schluss immer größere Sachen.
Ja, du fängst an mit vielen kleinen Modulchen und später
siehst du OK das das ist der ganze Unterbau von dem Kahn zum
Beispiel, ja, und der besteht jetzt aus diesen 15 Dingern, die
ich gemacht hab, ja. Und jetzt?
Jetzt ist die React denke, ist der gesamte Unterbau von dem
Kran, ja nennen wir ihn unterbaupunkt JS wird in einem
Pfeil stehen, der halt, das heißt halt Unterbau JS ja und
wenn du wenn du da in diese Komponente reinguckst in diese
Bausteine, die wird die die wird dann Bausteine laden und
benutzen die du vorher gebaut hast.
Das heißt du kannst in den in der Komponente, die der kleinste
Baustein ist NHTML Element Input Div Button oder Irgendsowas ja.
Da kannst du nicht mehr kleiner, aber du kannst abstraktere
Bausteine du vorher definiert hast, einladen in ne Komponente
die generischer ist und das ist total wichtig, weil die Logik
miteinander spielen musst. Du musst, du musst nämlich jetzt
sagen, der Unterbau, der braucht ja ne Schnittstelle, du wirst ja
die Zahnräder müssen ja ineinandergreifen, ne, du baust
ja ne kleine Komponente und wenn das aber funktionieren sollen
und die Schläuche und so weiter du musst ja verbinden, ne, du
musst ja von oben. Von dem Gesamtunterbau deine
Schläuche weiterhangeln nach unten bis zur kleinsten
Komponente, dass wenn der wenn der Nutzer später irgendwie den
Knopf aufdreht, mach mal Schaufel hoch, Pneumatik an, ja,
dass das auch alles läuft, ja vergisst du da n Schlauch
berührt sich da n Zahnrad nicht funktioniert das nicht so und
das ist die Kern, das ist die Kernlösung wo React quasi dem
Programmierer das bietet, dass wir Logik auch weiterreichen
können in geschachtelte Komponenten und das nennt sich
Properties ja. Das ist ganz wichtig.
Ja, das ist der Erste, das also das erste Konzept ist
Komponenten, das zweite Konzept ist, sind dann die Properties,
da gehen wir gleich, aber du hast ja was auf der Zunge
gehört. Ja, ich glaub ihr habt das schon
verstanden. Nicht.
Mir ist nur wichtig, dass wir das auch noch mal auf ne echte
Webanwendung übertragen und nicht nur von Bagger reden.
Und ich als du es. Gerade erzählt hast, musste ich
die ganze Zeit an ihren Ikea denken.
Ja, das ist sehr ähnlich, würde auch passen, also so ne
Komponente zusammen paar Schubladen schiebst die dann in
den Schrank und der Schrank wird vielleicht n Teil deiner Küche
und Pipapo also so so so ne Art aber in in irgendeiner
Anwendung. Stell ich mir, jetzt weiß ich
nicht irgendwas vor, ich, ich, ich löse irgendwas aus, ich
drück irgendwas und dann verändern sich ganz viele Dinge
gleichzeitig auf dem auf auf meine Anzeige und meine UI
gerade. Ja.
Weil es eben diese Kommunikation unter den Komponenten gibt.
Ja, weil die hintereinander genestet sind, vielleicht so
irgendwie. Ist genau richtig.
Gerrit ist genau richtig und das das das und das nehmen wir noch
alles genau auseinander wie das ist.
Tatsächlich ist das nämlich wichtig.
Es hat ne Hierarchie, wie du schon gesagt hast.
Ob du jetzt Ikea nimmst oder oder mein Beispiel mit dem
Bagger. Und wenn du jetzt was drauf
drückst, dann verändern sich viele Sachen, aber nur die, die
in der Hierarchie durchfließen von abstrakter Komponente zu
weniger abstrakter bis zur bis zur letzten Komponente runter.
Man spricht auch von einem Baum und jetzt noch mal wirklich das
Beispiel, das ist der Dom ja ne Webseite wenn du HTML siehst ist
genauso aufgebaut, du hast Elemente die du hier einander
nestest. Ja ganz außen ist das HTML Tag.
Und diese Texte gehen ja auf und schließen sich ja und innerhalb
der Text machst du wieder Text und wieder Text.
Ja, und das realisiert quasi, das ist das Ergebnis davon, du
programmierst das in javascript diesen Komponenten und was e Act
daraus produziert, ist dieser virtuelle Dom, wie man es auch
nennt, das ist im Prinzip ne HTML Seite, die genau das macht,
ja und die schickt halt wenn du auf on Klick n Button klickst
und du musst quasi ganz viele Sachen verändern, dann musst du
deine. Wenn du es jetzt erst mal ganz
naiv machst, ich sag gleich, was es noch für Möglichkeiten gibt,
aber dann musst du deine Komponenten, die alle jetzt sich
jetzt verändern sollen, ineinander genestet haben und
diesen diesen State Change, was es ja ist.
Also die Zustandsveränderung ich klicke jetzt, was ja
durchreichend zu allen Komponenten, dass die das auch
merken, ja weil du die ineinander komponiert hast.
Ja, und das machst du, indem du Properties weitergibst.
Ja, Properties sind einfach Eigenschaften, ne die die werden
dann einfach weiter runtergegeben.
Kann jetzt jedes. Element auf der untersten Ebene,
sagen wir mal also die kleinsten Komponenten, die
Klassenbausteine können, die Teil von mehreren solcher
Hierarchien sein. Ja OK, müssen Sie also, also was
heißt das, müssen Sie ja mal, macht ja Sinn o.
K genau das macht Sinn, das kannst du machen.
Das das ist genauso. Ja, also es ist so, dass die
Komponenten so n bisschen, also wenn du die als als als Pfeil
hinschreibst, dann sind die wie ne klasse, wir hatten ja auch
schon mal Klassen und Distanzen und so weiter du kannst
Komponenten. Mehrfach einsetzen und die
behalten aber ihren eigenen, die haben ihre eigene Vorstellung
von ihrem State. Ja so und ich, ich mach das noch
mal kurz an dem Bagger Beispiel noch mal.
Klar es ist so wenn du wenn du jetzt den Bagger lädst quasi
sagen wir mal der User klickt im Browser auf unsere auf unsere
Bagger Web application ne so dann hängt der Bagger schlapp so
der hat nen Default state ne hängt schlapp, Schaufel hängt
runter das Ding ist irgendwie gerade ausgerichtet irgendsowas
ja und wenn du jetzt das erste Mal was machst mit dem Bagger.
Zum Beispiel Schaufel hochfahren oder irgend so was.
Dann hast du ja dann produzierst du ja von außen erstmal ein
Event und dann ergibt sich eine Zustandsänderung und zwar in
sehr vielen Komponenten, möglicherweise ja, weil das
Hochfahren von der Schaufel ist ja schon mal ein komplexes Ding,
ja weil was weiß ich, was da alles passieren muss.
Ja, bestimmte Zylinder müssen etwas rausfahren, aber es ist
nicht nur einer, sondern es sind vielleicht 3, weil die Schaufel
dreigelenkig ist und so weiter und diese Zustandsänderungen,
die müssen quasi dann gespeichert werden.
Also der State muss erhalten bleiben in in in den
Komponenten. Ja, die müssen wissen was war
mein letzter Zustand. Ja, denn ich hab ja vorher
gesagt sind alles nur Funktionen, früher war das zum
Beispiel nicht so, das war früher war waren die waren die
Komponenten, das kann man auch noch mal auf der Tonspur sagen,
Klassen von javascript und die Klassen wurden dann instanziert
und die Instanzen haben immer die Eigenschaften, dass sie sich
ihren Zustand merken können, ja die haben halt immer n
bestimmten State, ja den kann sich dann verändern ne also ich
sag dann die Schaufeln n bisschen hoch.
Dann ist es der Zustand, dann kann ich den wieder verändern,
dann kann ich quasi, und das ist wichtig, ich muss ja relativ von
dem wo ich bin, ne Änderung durchziehen.
Ja, im Code ist das immer realisiert, normalerweise über
Instanzen, das ist so, wenn man objektorientiert denkt, ist es
das, dann hab ich, dann hab ich den Zustand in Instanzen
gespeichert, so war es auch bei React, früher hat man
festgestellt, dass gar nicht so cool aus Performancegründen und
aus anderen Gründen und jetzt sind das halt Funktionen und ich
muss diesen Zustand über sogenannte Hooks, da sag ich
gleich noch mal was zu. Quasi in diese Funktion mit
reinbringen, weil Funktionen an sich sind pur und zustandslos ja
das ist ja dann so, dass sie jedes Mal wieder vergessen,
hängt der Kran wieder schlapper, da war er wieder schlapper.
So, jetzt hab ich jetzt hab ich die die die die Properties
genannt, also sind die diese Properties sind quasi die
Zustandsbeschreibungen und Änderungen die ich weitergebe in
die in die unterliegenden Komponenten, das ist Prinzip die
Schnittstelle sowie wie ne Rest API eine Schnittstelle ist für
Webkomponenten sind die Properties.
Jetzt mal im ganz Kleinen in so einer Projektanwendung die
Schnittstelle zwischen meinen Komponenten, die ich gesagt hab,
ja. Und die Properties sind
vermutlich jetzt individuell pro Element oder pro Komponente.
Also was ich ich kann halt weiß ich nicht true of false sein als
property oder ich kann. Nee, die Properties sind immer
Key Value Pairs, ne, die sind ja nur true false, die sagen zum
Beispiel irgendwie was weiß ich selected oder irgendsowas ja
wenn du ne ich bin ausgewählt oder nicht, da könntest Du sagen
selected und vom Typ bulien ne. Und die Properties werden
definiert von der Komponente selber.
Also wenn hier zum Beispiel die Komponente Checkbox hätte ja die
macht nichts anderes als ne Checkbox Hinzumalen, dann könnte
die als Schnittstelle haben selected und dann und wenn die
Oberliegende sagt Selected false, die gibt das tatsächlich
auch so rein, die sagt dann selected als Objekt selected
Doppelpunkt false ja die überliegende Komponente sagt,
die muss gefälligst jetzt deselektiert werden, da sagt die
Selected false, dann macht die Komponente Checkbox.
Ah, krieg, ich krieg ich selected falls ich mach meinen
Haken da raus. Ja, sagt die obere Selected
True, da macht ihr den Haken da wieder rein und der bleibt da so
lange drinne bis bis sie wieder ne neue Ansage kriegt.
Ja und das und jetzt ist es wichtig, dass wenn es gibt,
nämlich also die Komponenten hab ich ja gesagt, ich hab 2 Dinger,
die haben ja die Logik und und das Angemale ja also also die
Box quasi einfach nur von der Checkbox, die ist ja immer da,
ja. Und die muss aber re rendert
werden. Das ist jetzt auch noch mal so n
Konzept, wenn wenn man so mit React Leuten spricht die die
sprechen immer von re rendering. Ja wir müssen gucken dass es re
rendering hier ist. Das ist richtig re rendert und
so weiter und sofort ja, denn das ist jetzt aber auch noch n
wichtiger Punkt ja denn wenn du oben die Property änderst auf
True, dann wird zwar die Logik in dem Java Script sagen, ja ja
das soll jetzt mal gerendert, also das ist jetzt True, die
Checkbox ist eigentlich angehakt wenn aber der React Prozess
jetzt nicht den virtuellen Dom. Wo ich vorhin vorhin gesprochen
hab, ne, also quasi die die Webseite die quasi simuliert
wird und dem Browser hingeklatscht wird, so
funktioniert das ja die ganze Zeit.
Ja das sag ich grad, dann mach ich grad noch mal kurz ne
Auszeit dazu. Ja, also wie sieht das aus
normal aber in einem ganz alten System, da hat der Server uns ne
fertige HTML Seite hin gepupst und der Browser hat ja einmal
hin gerendert, dann war der Browser fertig, da kommt der
auch nicht in Schweiß, der kriegt einmal vom Server das
Ding und zeigt das an, bei React ist es im Prinzip so, da läuft
ja das javascript im Browser im Client und der simuliert nen
Server selber. Und die ganze Zeit also mit mit
unglaublich viel hoher Frequenz, zum Beispiel.
Ja, das kann, das kann irgendwie, das kann 60 Hertz
sein oder irgendwas so schnell wie dein, wie dein CPU, das halt
so ab kann, wird halt ständig diese ganze Webseite unterm
Arsch vom Browser neu gebaut. Ja deswegen ist das reaktiv,
deswegen ist das so schnell ja es es tut so, es ist deswegen
auch virtueller Dom ja weil weil es virtualisiert wird als hätte
ich den Server ja React React beamt den Server lokal auf dem
Browser ja. Und es muss aber, damit du was
siehst, tatsächlich auch das neu rendern, den virtuellen Dom.
Ja, wenn jetzt die Select von der Logik auf True steht, dann
muss jetzt neu hingemalt werden vom Projekt, dass die dass
tatsächlich das HTML Element auch auf Selected steht, das tut
es ja, das kannst du auch beobachten mit den ganzen Dev
Tools und so weiter ja es muss also einmal Zack diesen diesen
diesen virtuellen Dom austauschen, ja.
Es tauscht tatsächlich nicht den ganzen Dom aus, und das sind die
ganzen Optimierungen, die es da gibt, sondern, und deswegen ist
es auch schnell, es muss nicht die ganze Seite laden, sondern
es tauscht tatsächlich nur Klick, klick dieses Element aus
an der Stelle in der Hierarchie von diesen, von diesen
Komponenten, die da reingemacht sind, ja, zack, zack und der
Browser merkt, Oh guck mal selected, jetzt muss ich den
Haken dran malen und dann siehst du es, so funktioniert das ja
OK. So, und wenn wir das verstanden
haben, dann sind die Properties, also die Schnittstellen zwischen
den Komponenten und die fließen, und das ist n Problem, die
fließen halt nur in die Richtung von oben nach unten durch, ja
oder auf der Seite, das ist quasi nen Baum.
Ja kannst du dich vorstellen wie n Baum oben drückst du nen Hebel
n globalen Hebel, der wertet in der Logik aus, das muss ich
alles machen ja ich muss zum Beispiel bei der Komponente muss
ich n Haken dran machen weil die Komponente will ne andere Farbe
haben und so weiter und dann fließt das alles so runter, alle
Properties werden verändert. Von allen Komponenten, die
Properties verändert haben, wird da virtuell Dom wieder neu
gebaut und dann klack, klack, klack, klack, Klack krieg ich
das alles angezeigt, ja, wunderbar.
Ja, was ist das Problem? Das Problem ist, manchmal hast
du so Änderungen. Also du hast im Code ne feste
Verdrahtung von deinen Komponenten wie die Hierarchie
ist. Und jetzt hast du sowas wie ich
will. Das Theming von Light auf Dark
schalten und das ist ne krasse Sache, weil jede verdammte
Komponente selbst deine Checkbox, ja die kann halt jetzt
nicht mehr einen kleinen weißen Background zeichnen.
Sondern die muss jetzt irgendwie auf einmal so n so n leicht
hellen Hintergrund zeichnen und der Haken da drin muss auf
einmal weiß werden, nicht mehr schwarz.
Muss das denn ne weitere Property sein, die dann jetzt
die Checkbox hat? Ja, das wenn man das jetzt, wenn
man jetzt was nicht hätte, was ich jetzt gleich erkläre, was
für Act hat, dann müsste ich, wenn ich das Umschalte, dann
müssten alle Komponenten die Property seaming oder nee oder
light oder Mode, sagen wir mal Mode ja in Blintieren der
entweder light oder Dark ist ja. So und jetzt jetzt jetzt kannst
du dir ja vorstellen, dann kriegst du ja als Entwickler ne
Plug. Ja, also da musst du ja was muss
die Checkbox Light oder Dark noch verstehen müssen da unten
drinne, ja und dann muss ich das alles weiterreichen, ja dann
kriegt dann Krieg, dann krieg ich ja immer mehr Properties,
dann sind die Properties pro Komponente werden immer dicker
und ich muss immer weiter runterleiten das ist wieso n
Gewitter quer durch die Komponenten ja und ich muss es
ganz oben anfangen, dass es auch überall verstanden wird ja und
dann gibt es aber vielleicht Komponenten.
Denen ist da scheißegal ob Light oder Dark ist, weil die machen.
Zum Beispiel hab ich ganz am Anfang gesagt, nur ne Logik, die
malen nichts an. Ja so und die müssen dann aber
die hängen aber trotzdem irgendwo mit in dieser in diesem
diesem Baum und dazwischen ne und die müssen dann den Krams
aber weiterreichen obwohl sie es selber gar nicht brauchen, nur
weil die Schnittstelle darunter das irgendwie wieder braucht und
so ja merkt man das ist Kacke ja gibt es hat hat er vielleicht
auch gemerkt, ist Kacke ja so gibt es da halt n zweites
Konzept wie ich quasi Zustände verteilen kann nennt sich
Kontext Kontext. Kontext ist quasi ne Abkürzung.
Ja Kontext schnall ich quasi drumherum um ne ganze
Hierarchieebene, im Notfall um die ganze Anwendung bei bei
sowas wie Light Dark mach ich das meistens ganz außen
drumherum. Ja, also ist quasi die
abstrakteste Komponente sag ich mal.
Ist keine Komponente, ist halt Kontext und und den Kontext ich
kann mich quasi in den Komponenten wo ich es brauche,
die können sich an den Kontext subscriben ja der Kontext ist
jetzt hat jetzt auch diese Parameter Mode.
Wer kann jetzt sagen Light und Dark?
Wenn jetzt meine Checkbox das braucht, dann sagt sie, ich
subscribe mich und das mache ich in der Komponente gegen den
Kontext theming oder wie auch immer wir nennen ja oder Light
Dark Switch oder Irgendsowas ja das wäre auch ne Klasse, ja die
wird irgendwo beschrieben ne und wenn der Kontext sich jetzt
ändert und das ist n Knopf ja den drückst du ja einmal zentral
in der UI irgendwo, ja dann. Dann kannst du bei jeder
Komponente sagen, ja, ich bin dran interessiert an diesen
Änderungen und jetzt, weil ich muss dann tatsächlich mich
irgendwie in irgendwie rendern, ja, und dann dann ist einfach
mal diese ganze Hierarchie aufgelöst, die du sonst hast.
Mit mit Schachtelung von Komponenten, sondern du kannst
quer durchs Beet sagen, ich bin interessiert, ich bin
interessiert dich auch, ja, und wenn du es dann änderst, dann
machen die Flubble und alle haben sich neu hingezeichnet und
so funktioniert es auch in Wirklichkeit, so funktioniert
Seeming zum Beispiel weil das ist ne.
Das ist halt so ne Änderung jetzt beim Bagger.
Ja da könnt man sagen, OK, da gibt es oben den Knopf, sagen
wir mal unser Bagger hat ganz viel LED Beleuchtung, die Steine
sind nicht nur hier so wie wie wie wie normalerweise lego
Technik, aber die haben quasi LEDS da drin ja und der Bagger
leuchtet halt rot ja und dann drückst du oben auf den Knopf
und dann wird da halt der ganze Bagger erstmal grün ja das sind
ja auch nicht alle Steine die leuchten können so ja aber
irgendwo sind irgendwelche Steine die sind halt grün, die
haben miteinander nichts zu tun, ja weil irgendwie unten die in
der Kette ist irgendwie was grün ist oben im im Träger und so
weiter so ja. Und aber damit das funktioniert,
gibt es quasi Kabelverteilung in diese einzelnen Dinger und die
müssen nichts miteinander zu tun haben, die müssen nicht das
normale Interface der Komponenten haben, das nennt
sich Kontext, damit muss man sparsam umgehen, weil hatten wir
gerade geredet, weil weil dann ganz viel rendern muss, da das,
manchmal hat man das nicht mehr so auf dem Schirm als
Entwicklung, man hatte n großes Ding, also wenn sich der Kontext
ändert, dann muss das ist teuer für React, weil aber auf einmal
auf ganz vielen Ebenen. Komponenten neu gerendert werden
und wenn Komponenten neu gerendert werden, dann müssen
alle Unterkomponenten neu gerendert werden, weil das geht
nach Regeln in React. Aber es muss ja quasi wenn du ne
abhängige Komponente hast von einer überliegenden Komponente,
dann musst du die im Notfall auch sich wieder anpassen und so
weiter das heißt man muss damit n bisschen aufpassen ja aber der
ist. So nutzt man dieses, dieses
dieses context Feature, um tatsächlich jetzt auch.
Styling zu vergeben oder oder zu implementieren oder ist das
wiederum Nein, das das sortieren wir jetzt auch aus, wenn du
Styling sagst. Styling ist auch Teil einer
Komponente, jede Komponente kümmert sich um ihr Styling
allein erstmal ja und dazu gibt es auch, also beim Styling wirst
du irre bei React, das ist auch einfach historisch so krass
gewachsen, kommt immer wieder vor und zurück, aber was man mal
sagen kann ist, dass die Idee einer Komponente ist auch ihr
Styling zu beschreiben, ja und ihr Styling zu ändern, aber das
ist quasi. Komponentenlogik Gekapselte
Komponentenlogik und du kannst es natürlich über Properties
wieder ändern. Du kannst halt sagen, mach
irgendein Styling und so weiter der Kontext ist ich hab nur n
Beispiel genommen von dem Styling, der Kontext ist immer
dann wichtig wenn du ja wenn du irgendwie ne ne state
Veränderung haben willst die mit dem sonstigen normalen Flow von
deiner Dings nichts zu tun hast. Da wo du halt wild irgendwie
Sachen anderes Beispiel ist zum Beispiel Drag and Drop, das wird
typischerweise auch beim Kontext gelöst.
Ja du kannst. Kannst dir ja vorstellen und
unser Baggerbeispiel passt da jetzt nicht mehr, aber ist egal.
Ja du hast halt quasi oft ist das so, dass die Komponenten
natürlich auch miteinander was zu tun haben.
Also wenn du ne große App hast zum Beispiel, dann hast du
irgendwie nen Panel links und n Panel rechts ja so wie bei uns
zum Beispiel Wir haben n Panel links wo wir die die die Backend
Logik aufbauen und Panel rechts wo irgendwie dieses Frontend
Preview gerendert wird ja dann gibt es quasi wenn du dir das n
Code angucken würdest, dann gibt es 2 große Komponenten, das
heißt halt irgendwie flow Bilder.
Und das, das ist quasi die abstrakteste Komponente für die
ganz was da alles drunter kommt im Flow Builder.
Und dann kommen die ganzen Dinge und die ganzen Funktionen, die
du ziehen kannst. Und dann gibt es ne andere
Komponente und die haben beide nichts zu tun miteinander, die
hängen quasi nicht direkt zusammen.
App Preview ja jetzt willst du aber zum Beispiel vom Flow
Builder irgendwas rüber Dragon in den App Preview, du
Kombinierst auf einmal Sachen die architektonisch im Baum
nicht zusammen zusammenhängen. Ja und da kannst du wieder so n
Kontext nehmen. Und sagen OK, wenn wenn aber
jetzt hier dieses Drag Event passiert, dann sagen wir beiden
Bescheid ja, in diesen verschiedenen Welten, ja, weil
die müssen der, der, der, der, der der Drop, der der das, das
das das UI vidget muss auf einmal sagen, oh ich muss
zuhören, da kommt jetzt gleich einer angeflogen und dann muss
ich mit dem was machen in meiner Logik ja.
Und dann macht er da gelbe Raben oder grünen Hintergrund, solche
Sachen. Meinst du genau dann, du fängst
schon an zu decken und dann dann leuchtet irgendwo auf einer ganz
anderen Seite was auf. Ja und das das ist auch n
typischer Fall für Kontext, weil du das das das speist du nicht
über die Properties ab da bist du irre ja sonst muss dir.
Das der Groschen gefallen, wenn sich das jemand angucken will
muss man mal n Video von der Heisenberg anschauen, sieht man
das auch. Ja, das war n cooles Beispiel,
Druck and Drop, ja. Also es gibt es gibt so n paar
Klassiker wo da wo das wieder genommen wird ja Druck and Drop
seaming halt ne so globale seaming Einstellungen ja mach
mach alle Ecken n bisschen runder oder irgendsowas ja das
gibt es ja auch ganz oft. Ja das sind so die Type.
OK, Guthaben wir Kontext, dann wolltest du Styling machen oder
die Hooks. Nee, zum Styling hatte ich was
gesagt, das lass ich erst mal kurz so stehen.
Also das Styling passiert quasi in der Komponente selber, ich
will, ich will noch mal was wichtigeres anderes sagen, die
Hooks, ja die Hooks auch noch nicht.
Ich würd jetzt noch mal sagen, was passiert.
Wie kommt normalerweise eigentlich auch Krams in ne
Komponente rein? Ne?
Also jetzt mal am Bagger ich ich drücke halt n Knopf am Bagger
oder ich ich leg n Hebel um ja was ist denn das jetzt in der
React Welt? Ja das ist das kommt eigentlich
aus den Building Blocks ja wenn wir zum Beispiel es gibt ja
Building Blocks, Input Element oder Button ja also es gibt
bestimmte es gibt es gibt bestimmte Bauteile sag ich mal
die sind halt dafür gemacht dass sie nen Input aufnehmen können
ne. So im HTML gibt es die halt so
wie im Lego Technik. Ja und jetzt passiert was
Wichtiges jetzt ist jetzt gibt es quasi in der Wir sind jetzt
in der Komponente noch ja und dann haben wir zum Beispiel
unten in den in der in dem JSX wie man das nennt, das JSX ist
quasi rendert quasi so ne das sieht so aus wie ein bisschen
HTM mit Javascript on Board ja das ist immer ein Teil der so
ein JSX Teil das ist das steht immer Return kleiner Klammer auf
und so weiter und dann kommt das JSX, das ist quasi die.
Wenn ne Komponente das hat, die muss das nicht wie gesagt, aber
dann rendert die. Das ist der Teil den du dann
auch sehen wirst. Dann rendert die was ja so und
dann steht beim Button zum Beispiel Button und da steht da
on Click und das ist das on click Event.
Ja und dann steht da drinne typischerweise handle Click also
on Click, das kommt dann quasi von das ist das ist Browser HTML
Technologie ja wenn ich dann da drauf drücke ja auf den Button
dann wird ne Funktion die ich da einhänge.
Von meiner Komponente, das ist wichtig.
Die Logik ist in der Komponente mit drin, ne unten in der
Funktion ist Return dieses ganze JSX, da gibt es dann den Button
und da steht on Klick und dann kommt das handle Klick und das
handle Klick ist ne ist ne Funktion in meiner Funktion von
dem von dem in der Komponente die auch ne Funktion ist und das
handle Klick muss ich jetzt implementieren, das ist dafür,
dass die Komponente in sich selbst reaktiv wird.
Ne, sonst ich. Ich muss ja irgendwie diese user
Events reinschneiden. So ja so und dann dann muss die
erstmal selber damit klarkommen bevor die überhaupt anderen
Bescheid sagen kann. Wir haben jetzt gerade sehr viel
gesprochen, wie wird Information weitergereicht ja wenn aber
jetzt ich muss ja auch erstmal die Information initial
verarbeiten, ja darüber rede ich jetzt ja wie wie funktioniert
das als wenn ich auf den Knopf drücke bei React, dass überhaupt
irgendwas passiert, ja das ist genau das was ich jetzt
beschreibe on klick handle Klick ist ne Funktion und jetzt gibt
es n zweites wichtiges Konzept. Wenn ich ne, wenn ich quasi die
den den Zustand der Komponente in sich selbst verändern will,
weil ich nicht von einer anderen Komponente das bekomme, sondern
von außen durch n on click Event durch den User.
Ja du bist ja keine Komponente Gerrit, wenn du da auf den Knopf
drückst, sondern du bist ja n User, das ist ne andere
Geschichte, ja dann brauche ich, muss ich aber auch diesen
Zustand persistierend speichern, das muss ich ja, damit muss ich
ja umgehen können. Ja und das nennt sich State.
Blöderweise, da muss man aufpassen.
State hat eigentlich das Wort, ist eigentlich viel generischer,
weil das zu tun hat mit Objektorientierter Krams, aber
in in React muss man ganz klar sagen, gibt es die Props, die
heißen auch Props, eigentlich heißen die Properties nein,
niemand sagt Properties so wie weiß ich auch nicht, das ist wie
n Spitzname, Props sind die Props so das sind, wenn die sich
ändern, die kommen aber nur rein von Komponenten die über mir
liegen, ja dann triggert das ne Zustandsänderung, dann wird
React quasi neu rendern wie ich gesagt hab.
Oder aber, und das zweite Konzept, das haben wir jetzt,
ist der State, und den setzt du, weil Henry Click wird sagen Set
State zu irgendwas. Ja zum Beispiel checkt oder
sowas oder nicht. Wenn ich die Checkbox war oder
nee wenn ich der Button war, dann würde ich irgendwie keine
Ahnung was weiß ich ist egal. Ja aber also das ist der zweite
Weg wie ich quasi dann sage jetzt hab ich n neuen Zustand
erreicht, Logik wird Angeschmissen so ja und wenn ich
den State gesetzt hab dann render ich selber neu und.
Die meine State Variable, da kann ich jetzt irgendwas von
speichern on click. Ja da setz ich zum Beispiel
Activated oder Irgendsowas. Ja das ist dann was abstrakteres
Logik von dem von React und dieses Activated was ich jetzt
selber habe was n Zustand ist über den State gesetzt in mir
ist das der State kann ich weitergehen als Property zu
meinen untergebenen Komponenten, da wandelt sich dann nochmal zu
sagen kommt n User Event rein wird on click aufgerufen mach
ich handle click setze mir nen State i am activated.
Gleich true. Ja und und ich mach jetzt aber
nur n kleinen Teil von dem ganzen Business, dass ich
aktiviert bin, muss aber jetzt in meiner Anwendung heißen, dass
ich noch tieferliegende Komponenten neu rendere, weil
die irgendwie was andere Farbe anmalen müssen oder irgendsowas
und dann wird mein Activated ne property die ich nach unten
weiterreiche für die anderen Dinger ja und die heißt
vielleicht noch nicht mal so, das ist jetzt auch wichtig, weil
ich hab ja gesagt, die unterliegenden Komponenten
definieren alle selber was sie für n Interface haben.
Ich kann jetzt einfach mein activated true sagen.
OK weiß ich ich für mich hab ich das jetzt Activated genannt,
aber jetzt die unterliegen Komponente muss es halt checkt
heißen ja dann dann setz ich halt checkt gleich activated
fertig. Ja weil das ist ja alles
javascript ich kann ja programmieren, ich kann die
Variablen ja mappen die ich Bock hab und das wird den ganzen Tag
getan ne und dann jetzt merkst du vielleicht auch wie die
Wiederverwendbarkeit reinkommt das heißt ich hab gekapselte
Komponenten die haben die sind in sich schlüssig die haben
Logik die können wiederverwendet werden und jetzt kann ich die
quasi. Überall, wenn ich das geschickt
mache, wieder reinsetzen in verschiedene Sachen, ja, und
dann dann dann wird meine Anwendung schlank.
Ja und dann hab ich keinen Spaghetti mehr am Ende, ach so,
das sind die, das ist Props und State und jetzt hab ich noch
was, das muss ich auch noch, dass ich auch noch mal sagen auf
der Tonspur, weil das auch ganz wichtig ist.
Es gibt natürlich noch viel, viel mehr, also werkcamp muss,
gibt es ja Bücher, ja man muss das jahrelang lernen, so, aber
wenn wir es im Podcast machen, dann musst du wenigstens die
wichtigsten Dinger rauspicken, und das ist der Effekt, ja was
ist jetzt n Effekt? Ein Effekt ist quasi ein Händler
der inner Komponente beschrieben wird.
Das ist quasi so eine Art ständiger Sensor für innere
Änderungen, der Effekt wird getriggert durch genau diese 2
Dinger, entweder durch eine Prop Change oder durch eine Stage
Change. Ich kann eine Prop Change haben
weil eine überliegende Komponente von mir mir was
geändert hat oder ich kann einen Stage Change haben weil ich
direkt zum Beispiel auf irgendein User Input Geräuscht
habe oder irgend so was das sind ja sind beides Dinge.
Die dazu führen, dass ich irgendwie rendern muss, dass
irgendwie was neu ausgewertet wird und der Effekt ist jetzt
quasi, das ist total cool, das das, das ist ziemlich, das gab
es nicht immer in in, das ist auch das ist n sogenannter Hook
Use Effekt Hook ja wir lassen das mal weg, was diese Hooks
genau sind, das ist ist einfach Technik, ja, aber im Prinzip
kann man sich vorstellen wieso n Lauscher und dem Lauscher kann
ich sagen du du lauschst nicht einfach auf alles, der hat so n
Filter unten drin, das nennt man Dependency Aree der sagt du
Lauschst wenn sich die, die oder die State Property oder die
zusammen alle 3 einer alles kannst du alles angeben, ja wenn
da irgendwas passiert, dann werte mich aus und das ist ganz
oft ganz wichtig, weil du hast ganz oft Logik, die nicht nur
nicht nur nen Dummen einen Klick hat, sondern wo du kombinierte
Sachen machen musst. Wenn der User geklickt hat und
wenn vorher die Property auf irgendwas ist.
Das ist ja ganz oft so kompliziert, ja.
Meine Property ist auf, ich bin in Test Mode.
Ja und jetzt klickt jemand was was heißt denn das jetzt für
meine Logik? Ja, das heißt Ignorier das weil
ich bin in Testing Mode ich bin nicht in Baumode ja so oder ich
oder dann halt anders die Property oben ist zum Beispiel
jetzt in Baumode und jetzt klickt jemand was jetzt muss ich
was ganz anderes machen ja und jetzt brauche ich auf einmal die
Beziehung von 2 zustandsbeschreibungsparametern
ja die jetzt ausgewertet werden müssen und jetzt kommt der Use
Factor weil das kann ja. Zu unterschiedlichen Zeiten
passieren. Vor 5 Sekunden hab ich auf
Testing gedrückt und jetzt drückt mir jemand den Button ne
dann dann dann läuft ja nicht gleichzeitig was in meinem Code.
So jetzt kommt aber dann den Effekt Hook und dann sagt er
jetzt kannst du kleine kleine Logik schreiben, jetzt kannst du
der würde dann laufen weil der hör ich jetzt quasi auf bin ich
Test Mode und hab ich geklickt ja und jetzt machst du da drin
einfach wieder javascript Logik und kannst wieder Zustände
ändern im im Effekt Hook setzt du wieder den State um ja und
dann kriegst du komplexe Logik hin ne?
Und mit diesen konzepten Komponente Property
weiterreichen zum Zustand ändern.
States selber setzen durchs Zuhören von Events, die von
außen kommen und Effects, die quasi beliebig kombinieren
können, Logik und dann auch wieder statesänderung setzen
können, das sind die Kernelemente von so einer React
Anwendung. Ja und dann schachtelst du den
ganzen Kram und baust es wie ein Haus auf.
Und die große Kunst. Jemand, der gut React
programmieren kann, der hat n gutes Gefühl dafür, wie die
Komponenten geschnitten werden müssen.
Ja, weil das ist ja total habiträr, nicht zu groß, nicht
zu klein, wiederverwendbar, ja nein und so weiter und sofort,
ja und die dann kriegst du so, so langsam kriegst du dann so ne
Webanwendung hin, ne, ja wie wie wie kommt man dann zu so n also
Plan ich das irgendwie schreib ich einfach mal drauf los was
ist so n Best practice um da tatsächlich die Komponenten so
zu schneiden wie Sie Übungen, Übungen, ja Erfahrung, Übungen,
Fehler machen. Neu machen, keine Ahnung.
Da gibt es also es gibt, das ist einfach so unterschiedlich, das
ist kein, es gibt erstens kein Grundrezept, es ist, das ist wie
Architektur von Software, das musst du einfach, ich glaube es,
es erschlägt nur Erfahrung, Erfahrung, was kann was ist
schnell, was ist langsam. Du musst dich genau auskennen,
was ist denn React, was braucht lange zum Rendern, was zieht
große Renderingbäume hinter sich, was nicht und so.
Das kann aber auch Wurst sein, je nachdem was du für ne
Anwendung hast. Wir zum Beispiel Wir sind total
drauf achten, dass sich dass sich nur das Rerendert, was auch
wirklich rerendert werden muss, weil wir ganz viele Elemente
haben, ne und dass es uns ganz langsam wird und dann Anwendung
hast du irgendwie ne Tabelle auf einer Webseite ist auch
scheißegal, ne? Also da gibt es keinen, da gibt
es keinen, kein Grundrezept, aber man muss was wichtig ist
würde ich sagen bei React nicht einfach ausprobieren, sondern
deswegen habe ich auch diese Folge gemacht.
Lesen vorher verstehen ja. Projekt genau verstehen was gibt
es, wie funktioniert das alles, was passiert bei props,
Änderungen bei State, Änderungen, was sind die
Effekte, was löst da was aus? Diese wichtigsten Komponenten,
Konzepte, das sind sehr viele, noch viel mehr als ich jetzt
hier heute sage, aber die allerwichtigsten davon muss man
sauber verstanden haben und im ganz Kleinen ausprobieren und
mal debuggen, dass man ne Grundidee kriegt davon, was man
da macht und dann muss man noch mit viel Erfahrung einfach
rangehen, ausprobieren was passiert, gibt ja aber auch ganz
viele Beispiele, Tutorials, dann kann man mit KE sich auch
Tutorials ziehen und so macht mal ne to do Anwendung oder
irgend sowas ja. Kriegt man schon hin.
Ne, ich will noch eine Sache sagen, ich fällt mir gerade ein,
sonst vergesse ich die nachher mit dem Verschachteln von
Komponenten. Ja ich hab jetzt immer so getan
als könnte ich immer nur 1 zu 1 quasi verbaumen ja es gibt noch
was ganz Wichtiges, das hat auch wie Act toll gelöst.
Das nennt sich das ist so ne Map Funktion, die gibt es auch in
Javascipt ist die javascript Map Funktion wenn ich zum Beispiel
ne Tabelle anzeigen will ich mach mal n krasses Beispiel die
Tabelle selber, der Rahmen ist quasi ne Komponente jetzt könnte
ich sagen jeder einzelne das wird auch oft so gemacht jede
einzelne Row. Ist ne andere Komponente ist ne
unterliegende Komponente von der Tabelle.
Ja ich das ist nicht die ganze Tabelle, ist nicht in einer
Komponente ganz im Leben nicht, sondern es gibt die
Außenkomponente mit dem ganzen Filtergedöns, sortierungs, Logit
und so weiter und dann typischerweise hab ich für jede
Zeile ne Komponente und ja, aber jede Zeile ist ja gleich, es
sind nur andere Daten drin ja aber vom vom vom vom vom
Webkrams ist das gleiche. Ja jetzt gibt es ne Möglichkeit
zu sagen OK map mir quasi für die Daten die ich hier habe.
In in einem Blockbau und beim JSX kann ich sagen, OK, mach
davon ein Array von Komponenten. Ja, das nennt sich Mapping.
Ja, das optimiert React sehr krass.
Ja, das ist ganz wichtig, also das sind diese strukturgebenden
Elemente sag ich mal der Komponenten, du kannst also
entweder in der Komponente direkt eine andere Aufrufen oder
ein Array von anderen rendern, ja die dann wieder rendern
können und so weiter das soll ich nur noch mal sagen, weil das
ist wichtig, das muss man kapieren, wenn man denn das ist
ganz oft das Pattern, dass man so so tabellarische Sachen hat
und so weiter da immer da. Machst du sowas sofort mit dem
RER alright? Ist denn jetzt der Punkt
gekommen um noch mal Styling anzusprechen?
Weil das stimmt so als würdest du da noch was zu sagen.
Ja das stimmt ja, pass auf also das das Styling ist ja immer ja
ja und vielleicht noch ich hatte auch noch diese grauen
Baggersteine irgendwie im Bagger Bestandteile irgendwie so im
Hinterkopf so ja genau die grauen Steine ja noch ist unser
Bagger grau ja also wir haben jetzt nur, also der ist
funktional ja und fertig wenn wir ihn jetzt so gebaut haben
mit Kontext Effekt und alles ja aber er ist leider grau.
Genau hier kommt die Farbe rein. Na ja, die Farbe, die Farbe
machst du halt, da haben wir auch ne eigene Folge gemacht,
deswegen will ich das jetzt nicht nicht großartig sagen,
React hat keine vordefinierte, ist nicht opinionated man so
schön sagt, dem ist das Vorschuh des Anmals, das ist das machst
du selbst dann noch in der aber pro Komponente und jetzt gibt es
halt und jetzt stechen wir so ganz bisschen an, also React,
wie gesagt wird ja nie alleine genutzt, ich hab ganz am Anfang
schon gesagt ich muss immer hast erst mal n bundler und so weiter
und dann das nächste was du normalerweise aussuchst ist
irgendwie n Großes. Tatsächlich Framework würd ich
dann sagen, was quasi ja vor noch mal vordefinierte Module
und Ideen zum anmalen und so weiter standardisiert und auf
React aufsetzt. Jetzt noch mal unserem Lego
Technik Beispiel, das ist dann quasi so, als würdest du jetzt
irgendwie nicht n Bagger kaufen, den du wo du Blöcke hast,
sondern du kaufst jetzt irgendwie was weiß ich willst
jetzt irgendwie die Berglandschaft machen, ja und da
da gibt es dann halt schon ganz viele Bagger und ganz viele
andere Dinger sind also vorkonfigurierte Komponenten mit
vorkonfigurierter Logik, ja. Das ist nun n Framework, zum
Beispiel Material UI von Google. Ja, das kennen wir alle, das da
ganz viele Anwendungen sehen sehr ähnlich aus und haben
diesen Material Style von Google.
Ja und das ist trotzdem React ja aber React REACT an sich hat
keinen Material Style ja das heißt jetzt aber einfach ich hab
ne Bibliothek und benutze Komponenten die schon jemand für
mich geschrieben hat, nämlich Google.
Und weil ich, weil ich alles, was ich vorher gesagt hab, passt
jetzt ja, die Komponenten haben halt ne API Beschreibung quasi
ja das sind also die Properties müssen da beschrieben werden,
was macht die Komponente, was kann ich da konfigurieren ne
aber ansonsten benutze ich diese Komponente als Blackbox, die
heißt zum Beispiel Button Ne oder oder Akkordeon oder
irgendsowas ja da geb ich halt über die Properties rein was ich
haben will was das dann anzeigen soll die Daten quasi und die
Zustände und der ganze Rest ist fertig und wird von Google
gemacht und da ist das ganze Angemale auch drinne ja.
Das funktioniert dann so ja, da die die, da kannst du dann
quasi, da gibt es dann extra Sektionen, das ist aber alles
von Material UI gedacht, ja wie du dann ausdrücken kannst, dass
du bestimmt Elemente anmaßt und so weiter da will ich jetzt
nicht im Detail drauf gehen, ja, aber ja, im Prinzip geht das so
und da gibt. Es ich glaub der Punkt, der ist
total wichtig. Das war mir so nicht klar.
Also das MUI ist letzten Endes ein ein auf Projekt Aufsetzendes
Design Framework oder so was könnte.
Ich sagen ist ne komponentenbibliothek.
Ne Komponente benötigt. OK, das ist es auch.
Ich glaub, sie nennen sich vielleicht auch so.
Ja genau, die haben halt einfach ganz viele React Komponenten
geschrieben, die super funktionieren, ja die
funktionieren dann auf dem Telefon auch, ändern die dann
schön und die funktionieren dann auf dem Laptop und so da da
steckt ganz viel Arbeit drin ne aber die Komponenten sind so
schön geschnitten, dass du die einfach wiederverwendbar in
deinen Code einsetzen kannst. Ja und die haben sind von der
Abstraktionsherbe noch n bisschen höher als React so,
aber dann hast du halt quasi nen.
MUI Button, NMUI Akkordeon, MUI Navigation many MUI ist hat ne
auch ne freie Open Source Lizenz.
Ja sie ist ganz ganz einfach nehmen ja das Problem mit MUI
ist und ich kann ja auch n bisschen was also mein
Kopfschmerz ist das riesig weil die der Scheiß also das ist wie
das Projekt Framework ändert sich halt auch, das geht relativ
rasant durch die Version und auch durch die Ideen.
Ja ich hab ja gesagt da gab es mal Klassen da gab es Funktionen
so und jedes Mal baust du komplett deine Webanwendung um
ja. Und bei MUI genauso.
Ja, die gehen heute durch die Version und jedes Mal ist das
wieder anders. Wie du das Styling da dran setzt
und wie du die, also die brechen quasi mit ihrer eigenen Art wie
von den Komponenten die ganze Zeit ja ist irre, sieht zwar
irgendwie schick aus, aber du hast echt schon Schmerz, ist
halt moderne Webtechnologie, aber das willst du auch
erwarten, der Scheiß soll ja auch nicht aussehen wie immer
vor 10 Jahren ne die machen halt weiter gut und und von diesen
Komponentenbibliotheken gibt es halt verschiedene oder auf
verschiedenen Ideen Levels auch von abstraktionslevels ich sag
noch mal eine zum Beispiel dev extreme ja.
Ist auch im Prinzip ne Komponentenbibliothek für React,
da sind die Komponenten aber noch viel größer geschnitten.
Ja, während du bei MUI zum Beispiel typischerweise n Button
findest und so unsere Elemente wie n, dropdown und was weiß ich
Input, Elemente, Text, Fields und so weiter hast du bei DEV x
scheme riesig große Module. Ja, das heißt dann auf einmal da
Data Grid Chart und so und das hast du so, da musst du
überhaupt nicht mehr dran, dann bist du auf.
Also du hast einfach nen viel dicker vorgebautes Ding.
Ja so als quasi den Unterbau von Bagger kriegst du da schon
hingelegt. Ja so und dann kannst du das
auch konfigurieren und es wird auch angemalt und so weiter und
sofort ja, also das ist zu diesen Komponentenbibliotheken
und dann die Möglichkeit deinen Kram anzumalen gibt es
verschiedene irgendwie Act du kannst halt immer das ist was
was wenn du du kannst es auch machen ohne dass du irgendwas da
rein lädst. Das ist eigentlich im Moment
geht es fast wieder dahin ja ich nutze gar nichts, ich mach
wieder plain CSS. Und das ist schön.
Da hat jetzt React, das ist aber auch relativ neu, ne Möglichkeit
gefunden, das nennt sich CSS Modules, es könnte auch CSS
Components heißen, ist ja nicht schicker da, da sagst du quasi
ganz normal, du schreibst NCSS Style Sheet hin, aber nur n ganz
kleines und das ist Gescoped auf deine Komponente.
Das ist wichtig, weil CSS funktioniert eigentlich, CSS hat
ja mit diesen Komponenten Ideen von REACT nichts zu tun, CSS ist
immer global, das malt alles an was du hinterm Virtual Dom hast.
Ja. Das willst du aber nicht.
Du willst sagen, die Komponente die ist so angemalt und zwar
immer so und das interessiert die auch nicht, wie andere
Komponenten angemalt haben. Du willst das Kapseln ne und
jetzt gibt es das modular CSS und da schreibst du quasi n
kleines CSS hin, das aber gekapselt nur gültig ist für
diese Komponente, das ist halt cool.
Ja so kannst du es zum Beispiel geil anmalen ne oder nimmst du
halt inline Styles mit javascript kannst du immer
inline Styles setzen, das ist The Way geht der geht immer ja
da da kannst du immer typisch anmalen ne aber was du erreichen
willst ist quasi. Komponentenspezifisch anzumalen
ne, und da gibt es halt viele Lösungen.
Ja so ne so ne Lösung und so also das geht vor und zurück und
es ist grauselig und kriegst Kopfschmerzen.
Ja im Prinzip muss man sich eigentlich einmal für was
entscheiden und das dann durchziehen ne aber weil die
Historie sowieso ist. Wir haben auch 3 verschiedene
Systeme zum anmalen, ne ist ne Katastrophe.
OK, also schon ne Glaubensfrage irgendwie.
Glaubensfrage, so n leidiges Thema ich, ich kann es ich also
ich ja. Es wär schön, wenn es nur 1
gäbe, aber dass es, wie das so ist, manchmal haben sich
Standards durchgesetzt und manchmal nicht.
Und da wo es nicht durchsetzt, dann dann schmerzt du halt den
Schmerz ab. Ja von nicht standardisiertem
Scheiß o. K du dann hab ich letzte Frage.
Also von meiner Seite, was ist denn jetzt so wenn man in die
Zukunft schaut? Glaubst du Rack wird uns noch ne
lange Zeit begleiten oder kommen auch neue andere Dinge die das
wieder noch weiter verbessern und ersetzen könnten?
Also ich hab zum Beispiel von Swelte gelesen oder Solid Jazz
oder solche Sachen. Ach ja, es ist natürlich, da
werden immer noch Welt neue kommen und so weiter aber ich
glaube ganz fest daran, dass React was ganz langlebiges ist.
Das wird uns noch für immer begleiten.
Ne, so was heißt für immer, aber es ist dann es hat ne riesige
Community, es gibt einfach riesige Anwendungen die dann
geschrieben sind, es ist einfach to big to fail im Moment das das
würde das halbe Internet runterreißen, also den
Webauftrag des halben Internets wenn jetzt React zum Beispiel
tot wär, da hätten ganz viele Leute ganz viel Schmerzen und da
würden. Ganz viele große Firmen, auch
ganz viel Geld reinblasen wenn ihr jetzt zum Beispiel Meter
kein Bock mehr hätte, das zu entertainen oder irgend so was
aus Eigeninteresse. Also das ist, das ist einfach
die die Bibliothek, ja, und es ist auch immer, das sag ich
jetzt auch noch mal durch diese Art und Weise, wie es gebaut
ist, hat man ganz am Anfang gesagt, hat sie ja gefragt, was
sind die Unterschiede zwischen Felte und View und und, Angular
und so weiter und sofort. Ich würde sagen, React ist so
die Flexibelste von denen und diese, die und die wildesten
Anwendungen, was halt die krassesten Web Apps wo irgendwie
Sachen passieren, die man sonst nicht so sieht, die sind dann
mit hoher Wahrscheinlichkeit wahrscheinlich im React gebaut,
weil das halt die meisten Freiheitsgrade gibt durch dieses
Komponentenbasierte Krams und nicht so vorgebaut ist.
Und jetzt sag ich das noch mal kurz, das kann man jetzt
einordnen, ne während wir in React Komponenten machen können
die Kombination aus Logik anmalen und Steinen sind.
Oder auch nur Steine sind oder auch nur Logik sind oder auch
nur anmalen. Das gibt es auch, kannst dann
auch schön kombinieren, ist es zum Beispiel bei einem eng oder
so, da wirst du da wirst du, musst du erstmal lesen, hier in
dieses Fall schreibst du anmalen in dieses schreibst du die Logik
und in diesem Fall kommt nur das html, du kannst nicht das Bild
kombinieren, du bist vom Framework gezwungen es so zu
machen. Ja und damit bist du ein
bisschen limitiert, ja. Im Prinzip ist immer alles das
Gleiche im Leben. Ja man, du kannst sagen es ist
ne Low Coat Plattform für javascript oder Irgendsowas.
Ja und wie hackt es quasi auf einem Abstraktionslevel sehr
gering, sodass du damit alles Mögliche machen kannst.
Dafür ist die Learning Curve n bisschen stabiler und du kannst
auch Sachen ganz schön falsch machen.
Du kannst auch Scheiße bauen, die halt langsam ist und so.
Du kannst damit aber auch krassen innovativen Kram machen,
der ganz anders aussieht als bei anderen.
Ja und bei Angular, da bist du halt mit einer kleineren
Learning Curve schneller am Ziel, es läuft stabil und
performant, ja. Bist aber eventuell n bisschen
eingeengt an dem was du da so ganz krass machen kannst.
Ja, die ist halt so. Immer dann.
Gibt es halt hinter Use Case ist.
Genau. Und deswegen wird es auch so
sein, dass immer wieder solche neuen Frameworks aufkommen und
jedes bedient sein Use Case und ich will auch nicht sagen, dass
React das Beste ist für für jede Anwendung.
So, ich würde aber schon sagen, ist n ganz schönes Silverbullet
kannst du also ganz einfache Sachen auch schnell machen, auch
vor allen Dingen KI Unterstützung und so weiter
sowie sehr komplexe, also ist schon meine lieblings sag ich
mal Frontend bibliothek aber alle anderen sind.
Natürlich gerechtfertigt da und haben vielleicht n ganz ganz
anderen kleinen Fokus und so weiter und es wie es immer ist,
ja passt vielleicht für n anderen anderen Fall
Anwendungsfall besser. Cool, ja, super Deep Dive.
Ich hoffe das hat den Hörerwunsch erfüllt, der uns
dann noch erreicht hat über über den Kommentar in der 1.
Folge zum Thema. Ja, ich hoffe auch das war ne
Herausforderung irgendwie auf der Tonspur React zu erklären.
Das ist ja schon auch schriftlich und bildlich
irgendwie schwierig aus. Hat mich auch einfach n bisschen
bisschen. Mich hat es ziemlich lang
gekostet bis ich React durchdrungen hab, also allein
die Konzepte ja kannst ich weiß noch, ich erinnere mich noch wie
ich angefangen hab und war völlig verwirrt, dachte was ist
das für mich mir total geholfen. Und ich hab auch ganz viele
Sachen wiedererkannt, die Konzepte, unser Produkt sind und
die mir jetzt klar sind, warum die so sind oder was dich da so
getrieben hat. Ja, siehst du.
Ich, also ich glaube. Also es gibt ja, es gibt ja n
paar sehr erfolgreiche Sachen wie zum Beispiel React, einfach
in der Welt und warum ist es erfolgreich, weil die
Designentscheidungen gesund sind, flexibel und skalierbar,
und wenn man dann was Größeres baut, dann darf man ruhig mal
schielen, wie das die Experten gemacht haben.
Ja und dann kann man, dann ist man nicht ganz, dann ist man
wahrscheinlich nicht ganz falsch unterwegs mit seinen eigenen
Designentscheidungen, die man einfach n ne Level höher gepusht
hat, aber trotzdem ähnliche Sachen macht.
Das sollte man tun. Ja, da gucken, wo es, wo es gut
gemeint. Wird meine Device als Architekt,
weil es die Strukturen sind, immer die gleichen?
Ja, es ist nur das quasi das Tauchlevel ja so und aber
Konzepte kann man übernehmen auf auf verschiedene Abstraktions
Label und und und. React hat es glaub ich hat n
sehr ausgewogenes Konzept, da fehlt nicht so viel, das ist
schon ziemlich cool ja mhm. OK, dann würd ich sagen machen
wir Deckel drauf auf React JS machen wir und.
Wir freuen uns auf euer Feedback dazu.
Lasst uns n Like da n Abo, was auch immer, das hilft unserem
Podcast immer weiter und gibt Burka Motivation sich zu tief in
Themen einzuarbeiten. Behaupte ich mal.
Ja, da hast du recht. Ja, macht Spaß, OK, cool.
Also dann wünsche ich euch was, ich sag mal zuerst Tschüss aus
Hamburg und gebt dem Gerd noch mal das letzte Wort heute schöne
Sommerzeit, wir hören uns in 2 Wochen bis dann ciao.
Einfach komplex wird präsentiert und produziert von Heiseware.
Wir freuen uns auf deine Fragen und
deinfeedbackanpodcast@heiseware.com vielen Dank fürs Hören dieser
Folge bis Dienstag in 2 Wochen und Tschüss aus Hamburg.