React JS Grundlagen #29 - podcast episode cover

React JS Grundlagen #29

Jul 25, 202329 minEp. 29
--:--
--:--
Download Metacast podcast app
Listen to this episode in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

React JS ist das berühmteste und am häufigsten verwendete JavaScript-Framework. Es wurde von Facebook entwickelt, um die Entwicklung reaktionsfähiger Webanwendungen zu vereinfachen. Dabei handelt es sich um eine einheitliche Plattform, mit der Entwickler komplexe Benutzeroberflächen erstellen und auf mehreren Plattformen bereitstellen können. Wir erklären, warum React JS so häufig verwendet wird und wie es sich in einer modernen Webentwicklung als vorteilhaft gegenüber anderen Frameworks wie Vue.js und AngularJS erweisen kann. Um das zu verstehen, erfährst du in dieser Folge auch, was das Document Object Model (DOM) ist und wie der Browser dieses verarbeitet. Mit dem Virtual DOM können Entwickler Benutzeroberflächen erstellen und ändern, ohne dass der Browser jedes Mal neu geladen werden muss. Dies verbessert die Performance und eignet sich besonders gut für den Einsatz bei mobilen Geräten.

---

Starte kostenlos mit Heisenware unter

⁠⁠⁠https://heisenware.com/einfach-komplex⁠⁠⁠

---

Einfach Komplex ist ein Podcast von Heisenware. Alle Infos und Kontakte findest du im Linktree:

⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠https://linktr.ee/heisenware⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠

---

Dr. Burkhard Heisen (linkedin.com/in/burkhard-heisen/) und Gerrit Meyer (linkedin.com/in/gerrit-meyer/) sprechen heute über:

(00:00) Einführung

(04:20) Browser und DOM

(07:15) JavaScript Client-side Rendering

(11:00) Funktionsweise React

(15:30) Virtual DOM

(18:00) JavaScript Bundling

(23:30) Auswahl des Web-Frameworks

Transcript

Einführung

Meine Lieben hier wieder aus Hamburg heute andere Stimme am Anfang der Burka fängt heute mal an. Ich freue mich, dass ihr dabei seid und heute zuhört wir heute ein ziemlich spannendes Thema in Folge 29 die jetzt schon ist du ein ziemlich wichtiges Thema, weil es wirklich ganz ganz viele. Entwickler betrifft aber auch ganz, ganz viele Nutzer betrifft.

Wir sprechen heute über Reacted Reactive, ein sogenanntes Web Framework, und ist das also mit einem Web Framework erstelle ich quasi Web Auftritte, also nicht nur langweilige statische Seiten, sondern alles das, was das moderne Internet heute bietet, h. Und eines der der aller bekanntesten ist Red und wir wollen heute ein bisschen gucken, was das so kann, wie das so funktioniert, warum das funktioniert, warum es cool ist und so weiter aber ich möchte

euch natürlich wieder ein bisschen Kontext auch geben. Auch wenn ihr einen seid. Jetzt habe ich ganz viel Monolog. Am Anfang erzählt, man könnte meinen, Ich bin hier ganz alleine im Podcast. Aber Nein, Gerrit ist auch dabei, der lacht, das seht ihr nicht, aber ich sag mal Hallo Gerrit, bist du da? Ja Hallo Burkhard, Ich bin auch da sehr gut, aber du hast das super gemacht, genau, ich gar nicht sagen.

Wusstest du, dass du red. Die Zweitbeliebteste Library für Java Script ist das wusste ich nicht. Ich weiß aber, dass React das aller beliebteste Web Framework ist in 2023. OK. Ich habe auch noch ein bisschen, ich hab mich ganz bisschen vorbereitet, also außer, dass ich natürlich jeden Tag benutze. Selber hab ich gefragt, vor gut Bart ist ja die AI von Google und ich hab bald mal gefragt, welches denn das bekannteste und

beliebteste Web Framework ist. In 2023 und React mit 40%, danach Angola. Mit 22 die 23% ungefähr, dann View mit 19% stellte, mit 11% etwa und ASP.

Net mit ungefähr 7%. Ja, also wir sehen hier also das ist der Klassenkampf, WIG REACT und deswegen ist es auch sinnvoll da mal rüber in Tiefe zu sprechen, vielleicht mal eine Folge mit ein bisschen mehr Dive ist auf jeden Fall ein riesiges Thema und richtig cool, ja. Dann lass mich doch kurz sagen, welches die beliebteste javascript Library ist und das ist J query. Kennst du die oder query würde

wahrscheinlich sagen. Ne ja klar kenn ich die ich bist du. Ich hab das so ist 2023, denn das nimmt das absteigenden Ast so ja, also die das wird sich. Ja, und kommt immer drauf an. Ne beliebteste nicht beliebteste das n Downloads sind das Stack over Flow Umfrage gewesen oder irgendwas ja keine Ahnung. Das stimmt, hab ich. Jetzt hab ich jetzt häufiger gefunden. Genau dann lass uns doch mal ins Thema einsteigen.

Ich glaube wir haben das irgendwann mal erwähnt, dass React aus dem Hause Meta, damals noch Facebook kommt, also wurde dort entwickelt, ich glaube 2013 ging es los. Ja, das ist auch meine Kenntnis, ja. Und ja, und dann ging es aber irgendwann über in die Open Source Community. Ja, haben auch schon darüber gesprochen wie das funktioniert, Folge Open Source gemacht und die pflegt das seitdem, da ist wohl eine ganze Menge los in der Community und auch meta ist natürlich schwer beteiligt.

Ja schätze mal, dass die dann einfach benutzen. Und daher ein großes Interesse haben, dass das Ganze nicht weiterentwickelt und. Ja, neue neue Features bekommen Stabiles und Wachs gelöst werden etwa. Auf jeden Fall also, das ist richtig gewaltig, das fühlt sich an wie ein professionelles Produkt, führt, dass man eigentlich ganz viel Euro zahlen müsste.

Es gibt ganz viele Dokumentationen und sicherlich ist das natürlich vor allem Metall Konzern selber, auch über alle meinen Satz ja. Lass mal so starten, weil ich hatte zuerst gedacht, das ist vielleicht auch so eine Art Programmiersprache React es nicht, hab ich jetzt rausgefunden, ist Java Script und dafür ist eine Library oder du hast jetzt gesagt net Framework klar das doch mal kurz. Auf oder wie hängt das zusammen? Eine Programmiersprache und eine Bibliothek?

Ich meine, wir haben schon angerissen, anderen Folge, aber vielleicht stellst du nochmal Zusammenhang, dass man das einordnen kann. Wie diese Technologie sich verhält zu einer Programmiersprache. Ja, wenn ich das tue, sind die unsere Zuhörer, glaube ich, verwirrt. Ich würde, ich würde n bisschen anfangen, ich komme auf den Punkt zurück, Gerrit, was ist nämlich tatsächlich Bibliothek, ich etwas später, wenn wir da ankommen, wo es wichtig wird, hab dich nicht vergessen, ich

Browser und DOM

würde n bisschen einziehen, ich würde versuchen erstmal zu erzählen, wie funktioniert das überhaupt ne also wenn wir ne wenn wir ins Web gehen und sehen so ne tolle Anwendung eine Web Anwendung was passiert da eigentlich? Ja ich glaube darüber können wir besseren Einstieg machen ne und ich fang nochmal ein Level ich überleg ich erzähl doch mal kurz was der Browser überhaupt ist. Ja, der Browser ist quasi. Man kann sich erst mal. Also wir sind einfach komplexer.

Also ich vereinfache jetzt gerade sehr stark, aber wir wollen ja recht verstehen, also ja, seit bei mir seitdem ich ein bisschen zu vereinfachen, aber für mich also erst mal ganz grob gesprochen, ist der Browser einfach eine Rendering Engine.

So, und der ist ziemlich der überhaupt nicht dumm, aber was das angeht relativ dumm, denn der kriegt einfach ein sogenanntes Dom, ein n Document Object Model und das ist, das kennt man wenn man ihr könnt ja auch Rechtsklicken auf folgender Seite im Browser, dann sieht man Quelltext, also kann man sich den Text anzeigen lassen und dann typischerweise HTML, aber es ist nicht nur HTML, denn das ist wichtig, es gibt im Prinzip diese 3 wichtigen Dinge die der Browser bekommt um eine tolle

Website anzuzeigen und das zu ändern, ja, das ist nämlich tatsächlich das HTML heute im Standard HTML 5.

Das sind diese ganzen Text. Haben wir schon gesprochen, also ein P für Paragraph h 1 für ne für n heading 1 h 2 heading 2 und so weiter so das ist quasi die Semantik der Seite, also HTML, das ist gespickt mit CSS Scaling Style sheets, die cascading Style sheets sagen quasi wie dieses H 1 h 2 oder das D oder Irgendsowas auszusehen hat, mit welchem mit welcher Farbe, Schrift, Farbe, Hintergrundfarbe, Schatten, Animationen und so weiter das steckt alles in CSS und das

Dritte ist Java Script und das ist dann einfach die Programmiersprache Java Script, die auch. Mit von dem Browser quasi geladen wird und ausgeführt wird. Das ist wichtig, ja. Diese 3 Komponenten sind das ja und und und. Hier kommt dann schon gleich der Haken zu zu zu React, weil Javascript quasi runtergeladen werden kann von einem Server und ausgeführt werden kann vom Browser und weil javascript Programmiersprache ist, kann man jetzt ganz schön viele Sachen

damit machen und sich überlegen. Ja und hier auch noch mal kurz, das ist wichtig wenn wir verstehen wollen müssen wir verstehen wie kommt denn quasi die Information die der Browser ändern soll quasi zu uns auf unseren Lokalen. Auf unseren lokalen Browser. Wir sind im Web, Wir haben ja erst mal einen Server, den wir kontaktieren, wir geben UL ein. Example.com oder irgendwas und dann und dann passiert da was und der Browser zeigt uns an, was passiert.

Wir fragen dem Server, Wir machen eine Anfrage an den Server und der schickt was an den Browser zurück und früher war wir hatten auch schon früher war es einfach so, dass der Server einfach fertig gerendertes HTML geschickt hat, ja dann kann sich vorstellen der Server kriegt ne Anfrage der macht alles fertig und dann kriegen wir ne Seite zurück und

JavaScript Client-side Rendering

der Browser rendert das einfach nur noch hin und fertig wie n Bild ja wenn ich dann immer klicke dann macht er jedes Mal neues Bild oder sowas ganz grob gesprochen ne. So, und dann sprechen wir von Multi Page Applications, war bei jedem Klick wieder ne Server request passiert und der was

neues macht. Ja React ist für Single Page Applications und für das kann auch Server Side Rendering aber es ist hauptsächlich dafür gedacht für Client Side Rendering sagt man so schön ne und das müssen wir jetzt erstmal verstehen gleich ja aber Gerrit Ich mach mal Pause trink Schluck Kaffee du hast vielleicht ein Paar. Ne, soweit noch nicht, aber jetzt würde ich einfach kurz wiederholen, dass letzten Endes React immer vom Client. Verstanden werden muss in dem Fall der Browser.

Ja und und der Server das erstmal. Das ist nicht die Aufgabe des Servers. Red zu interpretieren und irgendwas damit zu machen. Genau das ist richtig. Das ist sogar ziemlich krass.

Der Server macht fast gar nichts, wenn man sich, wenn man sich überlegt was passiert, der Server gibt eigentlich ein Bundle zurück, also wenn ich jetzt ne REACT Web Anwendung Anfrage bei einem Server dann bekommt dann kommt sogenanntes Bundle zurück, das ist quasi sehr komprimiertes Javascript, das heißt sogar Punkt s Punkt oder irgendwie. Und das lässt sich dann quasi der Browser rein.

Ja und fängt damit dann an und dann führt er quasi im Prinzip lädt ein Programm runter, ein javascript Programm. Ja der Klient, der Browser und der führt dann dieses Programm aus und jetzt beantworte ich die Frage warum ist React eine Software Bibliothek, das ist nämlich Software Bibliothek. Mit React schreibe ich quasi oder React hilft mir quasi das Programm zu schreiben. Das spezifische Programm für meine eigene Webseite ja in diesem javascript Code was der

Client versteht. Ja das ist zwar javascript, aber das ist jetzt kompliziert, kann sich jeder vorstellen, wir müssen ja irgendwelche Buttons ändern und so weiter und sofort, es gibt ganz viele Low Level Details auf die ich keine Lust mehr habe mich zu kümmern, das nimmt mir das alles weg und ich kann auf einer sehr hohen Flug ebene. Aber immer noch sehr genau sagen und explizit was ich haben will und wie und wie was auszusehen hat.

Aber diesen ganzen, den ganzen Detail Kram den der da hilft mir Reactor. Jetzt hab ich irgendwas auf meiner Website was ich bewegen soll, zum Beispiel, ich schätze mal statische Sachen ist erstmal bräuchte man nicht zwingend vermutlich jetzt mal, sondern es muss irgendwie schon was anspruchsvolleres sein oder etwas anspruchsvollerem, spielt es seine Stärken aus und aber in dem Fall ist es dann einfach mit React einfacher, also mit diesem mit dieser Library React diese

Dinge so zu gestalten und zu entwickeln, dass genau das passiert was ich möchte, irgendwas rein pflegt das irgendwie was sich kalkulator auf der Website ist. Vielleicht n Contact Form. Oder irgendwie so Sachen, die ja schon eine gewisse Logik. Brauchen ja voll gute Frage. Gerät genau wenn sich was bewegt. Ja wenn sich was animieren soll im Browser, das lass uns ruhig auseinandernehmen und was machen was da geht.

Also wenn ich jetzt zum Beispiel statischen Kontext runterladen von dem Server, dann kann sich immer noch was bewegen. Denn das CSS heutzutage, das kennt auch sowas wie Animationen

und so weiter. Das bewegt sich dann zwar, aber das ist im Prinzip bewegt sich das immer, immer gleich, weil weil das CS es wird quasi auch festgelegt, fest programmiert und kann dann nachdem ich es runtergeladen werde nicht mehr sich ändern, so, denn dann sind die dann ist es zwar beweglich, aber die Bewegungen sind quasi statische Animationen sag ich mal ja und das liegt daran, dass der das dem Prinzip der Dom, also die Informationen die ich vom Server dann geladen, wenn

ich nicht benutze, dass die sich nicht ändern können, sie können sich erst dann wieder, wenn ich wieder neuen Kontakt zum Server

Funktionsweise React

mache. So und jetzt der riesige Unterschied ist. Und was macht das? Muss man einmal verstanden haben, ist. Das nennt sich auch Virtual Dom im Prinzip. Wenn dieses React Programm läuft, dann kann ich mit Java Script beliebige Änderungen an diesem Document Object Model, was quasi der Baum ist, quasi der Auftrag ist. Was der Browser zu ändern hat, den kann ich einfach ändern. Unterm Hintern sag ich mal unterm Arsch von vom Browser ja

so der der Browser ist. Ich habe ja gesagt der ist relativ dumm so der der sieht was neues und dann ändert er das und er ist total gut darin, das kann extrem schnell extrem flicker frei und so weiter das ist das was die Browser Entwickler. Ständig versuchen, sich zu bemühen, ja, dass dass wir, auch wenn das geht, richtig schnell dann 60 sein oder irgendwas, dass sich der dieses, diese

Anleitung was zu ändern ist. Was besteht aus HTMLCSS und in Java Script, das kann der Browser immer schnell ändern. Javascript läuft halt unverändert quasi die ganze Zeit als würde ich wahnsinnig schnell Server Anfragen verändert quasi dieses Document Object Model. Ja und da hinten und hier Browser, Browser, Browser wieder hier Browser, Browser und die Veränderungen können dann halt getriggert werden weil ich auf so jetzt müssen wir überlegen wie, warum und wie.

Überhaupt war aktiv. Ja, ich habe immer 2 Events Quellen ne. Entweder klickt der User irgendwas Dreck and Drop Klick Knopf oder sowas ja dann dann fordere ich ja quasi den Browser heraus etwas Neues zu tun oder ich bekomme vom Server vom Backend irgendwelche Daten, irgendwas hat sich geändert Datenbank oder als Reaktion auf Multi wenn wir hier heavy Multi online playing machen oder irgendwas ne du machst irgendwas und in meinem Browser ändert

sich was ja du kriegst ja nicht in meinem Browser, du hast dann quasi was im im Backend auf dem Server Datenquelle verändert. Die sich React zieht als Event und darauf reagiert. Ja, ja, was soll ich jetzt? Muss ich mal in meinem Kopf hat sich Grad Knoten gelöst. Ich hab natürlich bei Webseiten einfach wieder in Webseiten gedacht ne also heisenberg.com oder irgendeine Website. Ist natürlich Quatsch.

Ja, wir sprechen hier über SARS Anwendungen, über Online Games, über diese Dinge, wo React dann ziemlich viel Sinn ergibt. Richtig, du kannst mir doch Webseite machen, hatte ich auch unsere erste Version der Webseite war mit, dann hast du ne ziemlich dicke Kanone rausgeholt für n ziemlich statisches Erlebnis, geht aber ja, also.

Ja, ja, verstehe OKOK alles klar, aber da spielt dann beziehungsweise anders gesagt wenn das wirklich online Anwendungen sind Drag und Drop oder sowas oder halt online Gaming hast du jetzt gerade genannt, da stehst du denn einfach. An Grenzen beziehungsweise macht es dir dann recht einfacher, weil du das mit Javascript alles machen kannst. Recht dann einfacher und schneller. Du hast vorgefertigte Module, wie auch immer und kannst diese manipulieren, so ungefähr.

Ja genau, richtig und und der der unglaubliche Speed kommt aus 2 Gründen erstmal, weil weil wir alles klein seitig also wenn der Nutzer einen Event abfeuert, in dem n Knopf drückt indem er was dropt oder ein Slider bewegt, dann ist es so, dass wenn es nicht muss direkt abfängt wieder im Client javascript. Versteht quasi o. Und der hat den Slider 10 nach

10 nach rechts gemacht. Ich muss jetzt hier was Neues anzeigen und wenn dafür keine Daten neu benötigt werden, wenn das alles schon da ist und ne neue Anzeige da sein muss. Dann mach das React direkt quasi, dann rendert das direkt den neuen, den neuen Document Object Model hin und es passiert sofort. Da gibt es überhaupt keinen keinen Traffic, entsteht kein Netzwerk Traffic zum. Server in der Tabelle. Oder irgendwie sowas.

Genau so ne, wenn die Daten zum Beispiel wir ihr wisst ja, es gibt ganz viele Caches im Browser ne, also ich hab es, kann ja sein, dass die Daten schon quasi mit runtergeladen hab auf meinen Klienten und dann arbeitet React einfach nur noch mit diesen Daten, filtert die manipuliert, die zeigt die anders an und so weiter und der Server ist gar nicht mehr im Game ja das macht es ja aus ne Single Page application.

Vielleicht schon mal gesehen, manchmal sogar, dass wenn die richtig gut gemacht sind, viel gemacht haben. Dann kannst du quasi mit seiner Anwendung noch arbeiten, obwohl

schon längst kein Internet mehr. Ja wunderst dich dann irgendwie so wirklich tatsächlich eine Datenbank Update kommen soll, dann kriegst du ein Timeout. Ja, aber die Anwendung funktioniert eigentlich ganz hervorragend, ist nicht sofort weg, ja weil halt das Internet gar nicht gebraucht wird, weil es quasi wie ein lokales Programm ist.

Ja und der Browser ist halt die Rendering Engine, also so läuft es, ist jetzt auch noch total hohe Flug Ebene funktioniert und ich muss noch eine Sache sagen, ist auch wichtig, das ist glaube ich ziemlich einmalig. Bei React dieses Konzept des

Virtual DOM

virtuellen Doms, also im Prinzip ist es so, du hast ja immer das, was du den Browser hingelegt hast, das führt, das kriegt er gefüttert und dann zeigt er was an. Ja, und jetzt wollen wir was verändern. Und was jetzt React macht als als Software Library, sie baut quasi einen einen virtuellen, einen virtuelle Version wie ein Zwilling, einen virtuellen Zwilling von dieser Renner, von diesem Rendering Dom auf. Und macht einen sehr cleveren Abtausch nur für die Sachen, die sich geändert haben.

Also es wird nicht ständig alles neu angezeigt, sondern es wird quasi nur das schnell ausgetauscht, was sich gerade geändert hatte. Und damit kriegst du extrem krassen Speed. Ja, also weil ne, dann kannst du, kannst du die wildesten Sachen machen.

Ja und der Browser, der kriegt das alles nicht mit, ja der kriegt immer nur vorgelegt, so hier, hier, hier, hier, hier und zeigt dann quasi an. OK, sind UJS und Angela JS ich glaube, das waren die anderen beiden berühmten Libra Ries für den gleichen Zweck funktionieren die auch so ist das der gleiche Anwendungsfälle bei denen. Ja, im Prinzip ist das der gleiche Anwendungsfall. Es ist halt ne andere Art. Und jetzt, da sind die halt unterschiedlich.

Ne. Also reactivity ist halt ne Bibliothek und die hat ne interne API, also die hat eine interne Vorstellung wie man sowas macht, dass man zum Beispiel irgendwie ne andere Farbe setzt an den Knopf überhaupt einmal und so weiter das ist halt unterschiedlich in den verschiedenen Frameworks, aber an sich von der Technologie sind die sehr ähnlich, ja. Und ich sage auch noch was, wenn man jetzt quasi React eine Anwendung programmiert und dann

baut man sich irgendwas hin. Erzähl doch mal, wie das funktioniert. Ja, dann kann man das auch immer live testen auf seinem Laptop, das ist ziemlich ziemlich toll. Du kennst das Gerät, wenn du siehst, dass manche, also ich, ich kann quasi im Quellcode tippen und live wetten, dass ich meinen Browser quasi mit dem, was ich gerade getippt hab, das

alles ganz cool das ist. Solange ich entwickle, kann ich das so machen und wenn ich das jetzt quasi produktiv einsetzen möchte, dann passiert so ne Art Compilation.

Also jetzt wird jetzt quasi dieser ganze React Code, den man sehr gut lesen kann, als Quellcode mit mit Identizierung und so weiter und mit Kommentaren, der wird genommen und da muss ich auch noch einen fallen lassen, da gibt es Tools wie Web Pack und Babel. Die sind jetzt wichtig, weil die nehmen jetzt quasi diesen React Quellcode, der für mich als Entwickler sehr einfach und klar da liegt. Und das wird jetzt quasi zu javascript Paketen gebündelt.

JavaScript Bundling

Von diesen sehr sehr mächtigen Tools.

Und Dennis ist ja so, dass wir ja nicht nur einen Browser in der Welt haben, ja und auch nur eine Version von diesem Browser, es gibt ja unglaublich viele Browsers und die sind verhalten sich auch unterschiedlich, je nachdem wo sind n Desktop Browser ist nur ein bisschen anders als ein Mac Browser im oder Safari da auf dem Telefon und so weiter und sofort und dann guckst du Versionen 1615 14 Safari und beim Chrome auch und weiter das ist ja auch ein Moving Target so das ist ja die

ganze Zeit ist das ja sich andauernd am Ende dann ne und da wirst du ja völlig bekloppt. Wenn du als Entwickler das alles wissen musst, so und dann für jeden Browser da irgendwie eine entsprechende Ausnahme weiche und so weiter programmieren muss. Ja, so war es früher übrigens ja. Früher.

Musst du das genau wissen und du musst deinen Quellcode und sagen hier, wenn das Safari ist, dann mach das ja wenn das Opera ist, dann aber das ja und wenn das Internet Explorer ist, vergiss es kannst du gar nicht machen, ja musst du irgendwie sagen, hier tut mir leid. Ja, die Zeiten kenne ich sogar auch noch ne, das dann auch manche einfach gesagt Pass mal auf nutzt das jetzt in Chrome oder nutzt es halt in in in in was weiß ich Mozilla und Internet Explorer Support und.

Und das war es dann. Genau, also ganz streng genommen ist dann quasi nicht mehr React selber, also dieses Web Pack und dieses Baby, das sind ja quasi verpackungs Tools, aber die sind halt dieses Ökosystem um React, das kommt halt mit als Entwickler. Du sagst am Anfang immer create React App und dann bekommst du dies alles mit und das ist javascript Krams mit diesen ganzen javascript Sachen und dann sagst du eigentlich noch mehr zusammen als als als

Produktions Paket und dann passiert diese ganze Magie, also dann wird dieses Javascript was du da geschrieben hast React aufgepumpt, sodass das quasi für jeden Browser optimal läuft. Ja, und dass du das wird dann auch kondensiert, das wird aneinander gehängt, dass das ein ganz kleines Paket noch ist ja auch total relevant, du willst ja, und das ist nämlich einer der wichtigen Punkte, du lädst ja quasi, wenn du SPA eingepackt application hast, die ganze Anwendung runter, wenn du das

allererste mal da bist. Wenn du noch nie gesehen hast vorher, dann musst du das ganze Programm runtergeladen werden, das heißt, es ist wichtig, dass dieses Programm nicht zu groß wird, also wir wollen jetzt keinen 20 Gigabyte Programm haben, weil dann müsstest du ja, wenn du auf diese Webseite gehst, auf den Server gehst, erstmal 20 Gigabyte runterladen, ne, wir haben die Leute auf abbrechen gedrückt bevor du

irgendwas ankommt, ne? Und deswegen ist dieses wichtig, dass dieser diese bundling Tools und so weiter das schaffen deinen Code so schlank zusammen zu bündeln.

So ein bisschen wie ein zip, ja. Also das stimmt wieder nicht technisch also so ne Art kann man sich vorstellen, ne und dann hast du noch 23 Megabyte oder irgend sowas, ist dann quasi das Programm, das man gar nicht sieht, das passiert hier alles so, aber es ist quasi ein Programm, das wird dann live runtergeladen, dann ist schnell da und dann rendert und dann geht es los ja und sobald es runtergeladen ist den Speed von von von lokalem Krams so. Klein ist so n Programm 23

Megabyte. Genau. Vielmehr ist das meistens nicht, also wenn es größer wird, sagt so, Oh, da musst du mal, da gibt es Mittel und Wege, das klar zu machen, aber genau tatsächlich ist unsere selbst unser Tool ist. Wenn du initial runterlädst auch glaube ich nur 3 oder 4 Megabyte. Tatsächlich sehr krass. Das hätte ich nicht gedacht.

Und dann wird nachgeladen. Ne, also da gibt es also manchmal braucht man auch ein bisschen mehr Platz quasi und weil es ein großes Programm ist, das können wir auch, da gibt es sogenannte Lazy loading und so weiter Code Splitting nennt sich das tatsächlich auch total schick?

Ja, das kann man, muss man als Entwickler n bisschen sagen, du kannst sagen OK wenn der Nutzer das erstmal runterlädt, dann bist du ja quasi auf einer bestimmten Landing Page und du willst quasi du musst ja nicht gleich jede Ecke und jede Ecke und jedes Detail deiner ganzen Software da zeigen. Kann ja gar nicht. Du zeigst immer nur einen Teil

an irgendwie. Du hast ja meistens irgendwie Menüs und was nicht alles so, ja dann kannst du sagen, OK, ich bitte den Code und das erste was runterladen ist erstmal nur die andere Page und erst wenn ich davon weg navigiere, dann wird irgendwie überhaupt nachgeladen beziehungsweise ist noch cleverer. Es wird quasi die ein minimales Paket gemacht, damit du ne gute Experience hast als User um

gleich irgendwas zu sehen. Und während du dann da rum klickst, wird im Hintergrund nachgeladen, weil dann haben wir ganz viel Zeit. Ja dann hat der User, der orientiert sich erstmal was hier los und bevor der in den nächsten Knopf drückt ist der ganze Rest schon im Hintergrund nachgeladen worden und dann hast du ne fließende fließenden UX, also eine User Experience richtig gute.

Und ne richtig schnelle Loading Time und alles das sind alles so Sachen, so dass das erreichst du halt einfach nicht bei bei diesen klassischen Webdings und das ist alles sind alles Sachen die bietet die React als Frameworks alles mit drin so es hat ziemlich mächtig ja. Kein Wunder, dass das von ich hab nachgeguckt 18 mindestens 18000000 Websites genutzt wird.

Ja, wir wollen wir noch weiter in die Tiefe gehen, jetzt technisch, ja was das bedeutet, ich kann es mir nicht so richtig vorstellen, was man da noch so erörtern müsste. Ja und wissen müsste als Laie jetzt über React, weil mal ehrlich, ich benutzen werde ich nicht. Sehen tu ich's nicht. Wie weit müssen wir da noch rein? Ich hätte schon ganz gerne vollgemacht, ein bisschen tiefer einzugehen.

Gibt vielleicht Leute, die. Nicht selber mit etwas spielen wollen und so weiter da kann man klar, das ist ein bisschen, wir können aber auch gern, wir haben jetzt schon bisschen einer 2. Folge machen und n bisschen vertieft. Ansprechen, dann eine Detailfrage React, Deep Dive oder irgend sowas. Was mich jetzt noch interessieren würde, ist wieder zurückzukommen auf die anderen Frameworks Angular und Future. Es ist dann Geschmackssache was

Auswahl des Web-Frameworks

ich nehme oder ist es dann wirklich n harter technischer Vergleich oder wie kommt man dazu ein bestimmtes Framework auszuwählen oder eine bestimmte Library? Ne woran orientiere ich mich an den Kollegen? Kriege ich eine Vorgabe? Du darfst jetzt entscheiden als als als nicht nur.de aber auch technischer Leiter der Firma du machst einfach wie kommst du drauf und wie lief das? Möglicherweise woanders gibt es verschiedene Meinungen und und

wird dann verglichen. Ne wenn ich jetzt über Marketing und Sales nachdenke und wieder neues Tool einführen wollen, dann mal schöne und vergleichen ja und gucken uns alles mal ein bisschen rum, hast ja meistens 14 Tage gratis Zeiträume oder sowas und dann entscheidest du dich ne und wie kommt man da im wie ist das Programmieren? Und das ist eine eine ganz entscheidende, kritische, krasse Frage.

So, ja, das ist da gibt es Diskussionen, die sind richtig lang und haarig, denn das ist ja, also, ich sag mal, wenn du dich für Anwendungsprogramme entscheidest, für Sales, dann hast du natürlich auch. Gut, dann siehst du alles um, posiert vielleicht den Kontakt und so weiter und wenn du dann

doch nicht so toll findest. Aber wenn du natürlich irgendwie im schlimmsten Fall sogar selber eine Software Company bist und und und willst ein digitales Produkt rausbringen, ist das ja sowas von essentiell für was du dich am Anfang entscheidest. Das ist eine eine ganz wichtig und krasse Entscheidung, welches Web Framework du nimmst, weil es überhaupt nicht klar und einfach, wenn du dich einmal für React oder oder View oder Angela

entschieden hast und hast, dann. Ordentlich mannstunden da reingepackt, dann kommst du nicht mehr raus, so schnell. Ja das, also das Regieren auf ein anderes Framework, die sind sehr unterschiedlich, das ist der Wahnsinn, so, ja da muss man 360 Grad Frage stellen, so ja da muss man alles angucken, was einem wichtig ist. Wie groß ist das Projekt?

Was will ich damit machen und so weiter man muss sich genau angucken, wo sind diese Frameworks unterschiedlich, ja welche haben was für Vorteile, wie ist die Community, ist der Support wie Dokumentation, wo finde ich am meisten Entwickler.

Ich sage immer es ist schlecht wenn das nimmt was am Markt am häufigsten vertreten ist, dass es wirtschaftlich sinnvoll, weil dann findest du auch die meisten Entwickler, zum Beispiel ja die meisten Leute die sich auskennen und wenn es am meisten genutzt wird, dann hast du auch die typischerweise Dokumentation und als Open Source schnellsten Lösungen, wenn es Probleme gibt. Das ist aber auch nur das ist kann nur ein Argument sein

dafür, was ich sagen kann. Ich muss sagen, ich bin selber, ich mach schon lange recht, ich liebe das, für mich kommt nichts anderes in frage, ich bin aber auch gar nicht so tief drin in den anderen, ich hab en bisschen Angela mal gemacht und weiß ungefähr was da los ist. Wie uns Welte in mich nur informiert, aber nicht selber genutzt. Man kann aber sagen, von diesen Frameworks React das wenige, was dir am meisten Spielraum lässt, verrückte Sachen zu tun.

Denn also Frameworks haben ja manchmal ne, ja, die haben ja ne Idee wie du was zu tun hast, wie du was umzusetzen hast. Und reacts Idee lässt ja am meisten Freiräume. Damit kannst du echt bildest. Die wildesten. Also du kannst ja einfach hinsetzen und überlegst dir was ganz krasses, so wie du es gerne hättest im Web und du kriegst

direkt umgesetzt. Ja, also Angela ist zum Beispiel mehr Geist. Ja, da gibt es genaue Splittings, da musst du HTML TRENNEN vom CSS, vom vom javascript Code, da gibt es bestimmte Art und Weise wie du das A wie du den wie du den Code aufbereiten musst und wie Sachen passieren. Da wird es dann schwieriger auszubrechen. Wenn du jetzt nicht den ganz klassischen Standard Webcams machst, sag ich mal so und bei kann immer ausbrechen, ohne dass sie sich schlecht anfühlt.

So ja und wir sprechen zum Beispiel auch ziemlich krass aus so. Also ich würde sagen, wir machen ja so low Code Plattform, das ist jetzt weg von diesen ganz klassischen Standard Webanwendung, also wir haben wir haben alles drinne Drop und und und kann was und was nicht alles so ja und das geht mit Recht besonders gut. Aber am Ende ist es Geschmackssache. Gut Geschmackssache und dann musst du auch gucken, was hör ich jetzt zumindest aus der technischen Anforderungen sind

und sind sie überhaupt Bilder? Ja, wenn wenn sich Angela zum Beispiel in. Ja, gewisse Schranken oder gewisse, Ja Leitplanken. Leitplanken. Wenn du jetzt, wenn du jetzt Angela dich ins Leitplanken packt und du willst vielleicht ja n Plattform bauen, gehst du nicht zum OK. Cool, schöner Einblick. Das heißt, wenn jemand bei uns ins Team kommt und für Frontend zuständig ist, dann ist es recht, ja. Das ist ja genau ja genau alles klar.

Ja, wir sind tatsächlich auch gerade dabei, wir suchen für nächstes Jahr jemand, der vielleicht sogar den schwarzen Gürtel, sag ich immer den schwarzen Gürtel trägt irgendwie, ich weiß nicht, ob ihr auch mal Entwickler zuhört. Wahrscheinlich ist das eigentlich zu High Level für diejenigen, die, die wir jetzt hier ansprechen wollen. Aber ja, vielleicht spricht sich's rum oder sowas. Jemand der sehr sehr gut wirkt kann, der darf gerne mal hier sogar anrufen, bin ich sehr interessiert.

Ja, wir machen keine Werbung, aber aber das darf man ruhig mal sagen, ja. Ich denke auch, ja. Genau cool. Dann würde ich jetzt uns den Rest aufheben für die Folge eines Tages dann ne, wir haben noch ne gute Liste an Themen, aber das können wir auch mitnehmen. Ja, das machen wir. Ich glaube, das kann man auch mal erklären, selbst wenn man nicht entwickelt. Ja, ich bin gespannt, weil so ne ne Software Bibliothek auf der Tonspur.

Wenn manche Leute, so wie ich, ja nicht mal irgendwie so, also wir haben alle schon mal gesehen, aber so sagt mir halt nicht, druckt die Matrix. Die Matrix ja genau, ja mal gucken, vielleicht auch nicht, aber insofern haben wir heute eine gemacht, die auch schon ein bisschen Erleuchtung gegeben hat. Was das so ist. Absolut nicht gut, ja richtig gut. Ja, danke, Burkhard und dann machen wir zu und sagen wir bis

nächste Woche dann bei einfach. Jetzt kommt diese schöne Musik, es klar machs gut, Tschüss Hamburg ciao.

Transcript source: Provided by creator in RSS feed: download file
For the best experience, listen in Metacast app for iOS or Android