Es ist nicht das, was ich erwartet habe, aber vielleicht das, was wir brauchen

MMaximilian Schwarzmüller
Computing/SoftwareInternet Technology

Transcript

00:00:00Wir haben ein neues JavaScript-Framework,
00:00:02ein Full-Stack-Framework,
00:00:04aber hört mir zu,
00:00:05bevor ihr aufgebt.
00:00:06Es ist ziemlich interessant,
00:00:08weil es von den Remix-Leuten kommt – also von den Machern von Remix JS,
00:00:13Ryan Florence und Michael Jackson.
00:00:15Nein, nicht dieser Michael Jackson.
00:00:18Die beiden sind auch die ursprünglichen Autoren von React Router.
00:00:22Sie haben ihre Vision und tatsächlich den ersten Prototypen – man könnte sagen,
00:00:28die ersten Demos – ihres brandneuen JavaScript-Frameworks vorgestellt: Remix Version 3.
00:00:34Es ist also nicht wirklich ein neuer Name,
00:00:36sondern ein bestehender,
00:00:38aber es ist ein völlig neues Framework.
00:00:41In diesem Video werde ich versuchen, das Ganze einzuordnen.
00:00:45Ich erkläre,
00:00:46was es ist und natürlich auch,
00:00:48was meine Meinung dazu ist – ob wir wirklich noch ein JavaScript-Framework brauchen und wie ich seine Erfolgschancen bzw.
00:00:56Akzeptanz einschätze,
00:00:57gerade in einer Zeit,
00:00:59in der große Sprachmodelle natürlich standardmäßig React-Apps ausspucken.
00:01:04Aber gehen wir Schritt für Schritt vor: Was genau ist Remix und warum ist es wichtig??
00:01:11Remix ist,
00:01:12falls ihr es verpasst habt,
00:01:14ein React-Meta-Framework – im Grunde eine Alternative zu Next.js.
00:01:18Remix wurde bereits vor ein paar Jahren veröffentlicht,
00:01:22Remix Version 2 kam,
00:01:24wenn ich mich nicht irre,
00:01:262022 heraus.
00:01:27Und dann wurde 2024 Remix Version 2 im Wesentlichen mit React Router zusammengeführt.
00:01:33Deshalb könnt ihr React Router jetzt entweder wie gewohnt als Routing-Bibliothek in React-Apps nutzen – das funktioniert nach wie vor,
00:01:43es ist immer noch eine großartige Bibliothek dafür –,
00:01:47aber ihr könnt es auch im Framework-Modus verwenden,
00:01:50um im Grunde eine Full-Stack-React-Anwendung aufzusetzen,
00:01:55bei der React Router mehr ist als nur ein Router.
00:01:58Es hilft dann auch beim Datenabruf,
00:02:01Datenladen und bei Datenmutationen – genau wie Remix,
00:02:05weil es eben Remix ist,
00:02:06das in React Router eingeflossen ist.
00:02:09Das warf natürlich die Frage auf: Was passiert dann mit Remix,
00:02:14mit der Marke Remix?.
00:02:17Remix wird mit Version 3 zu einem neuen Framework.
00:02:21Es wird ein neues Framework,
00:02:23das – und das ist wichtig – unabhängig von React ist.
00:02:27Es ist kein React-Meta-Framework,
00:02:29keine weitere Next.js-Alternative sozusagen.
00:02:32Stattdessen ist es ein brandneues Full-Stack-JavaScript-Framework,
00:02:37das von Grund auf neu geschrieben wurde,
00:02:40mit all den Features und der API,
00:02:42die Ryan Florence und Michael Jackson gerne in einem neuen JavaScript-Framework hätten – also im Grunde die Lösung für die Probleme,
00:02:52die sie im JavaScript-Ökosystem sehen und gesehen haben,
00:02:56in der bestehenden Bibliotheks- und Framework-Landschaft,
00:03:00wenn man so will.
00:03:01Speziell natürlich mit React,
00:03:04da das die wichtigste Bibliothek und das wichtigste Framework ist – je nachdem,
00:03:09wie man es nennen möchte –,
00:03:11die wir da draußen haben.
00:03:13Also, worum geht es bei diesem neuen Remix?.
00:03:18Letzten Freitag konnten wir eine erste Demo,
00:03:20einen ersten Einblick in die API bekommen.
00:03:22Den kompletten Livestream,
00:03:24in dem ihr euch die gesamte Ankündigungsveranstaltung anschauen könnt,
00:03:27verlinke ich natürlich unterhalb dieses Videos,
00:03:30falls ihr alles durchgehen wollt.
00:03:32Aber bedenkt,
00:03:33dass es etwa vier Stunden Non-Stop-Demo und Erklärung sein werden.
00:03:36Ich habe sie mir angeschaut,
00:03:38damit ihr es nicht müsst – falls ihr nicht wollt.
00:03:40Aber schaut auf jeden Fall rein,
00:03:42wenn ihr mehr erfahren möchtet.
00:03:44Und hier seht ihr eine der Hauptsachen,
00:03:46um die es bei diesem neuen Framework gehen wird..
00:03:49Framework gehen wird – oder sagen wir,
00:03:52die Hauptsache,
00:03:53die auf X für einige Wellen gesorgt hat: dieses `this.update`.
00:03:57Sieht nicht besonders spektakulär aus, oder.
00:04:00Nun, es impliziert eigentlich zwei Dinge, die...?
00:04:04JavaScript-Entwickler heutzutage nicht mehr wirklich gewohnt sind.
00:04:08Erstens: die Verwendung des `this`-Keywords.
00:04:11Ich meine,
00:04:11alte Leute wie ich – wir haben alle Eigenheiten und Features von `this` gelernt,
00:04:16als wir mit JavaScript angefangen haben.
00:04:19Heutzutage verwendet man es nicht mehr besonders häufig.
00:04:22In React werdet ihr wahrscheinlich nie `this` schreiben.
00:04:25Aber es ist ein Keyword, das in JavaScript eingebaut ist.
00:04:29Sie nutzen dieses `this`-Keyword,
00:04:31um euch einige APIs zugänglich zu machen.
00:04:33Wo bekommt ihr Zugriff auf diese APIs?
00:04:36Nun, ihr schreibt trotzdem Funktionen..
00:04:39Ihr schreibt also keine Klassen,
00:04:40auch wenn ihr das vielleicht mit diesem Keyword denkt.
00:04:43Aber wenn ihr mit Remix arbeitet,
00:04:45baut ihr trotzdem Komponenten,
00:04:47und ihr werdet dafür nach wie vor Funktionen verwenden – genau wie ihr es von React kennt.
00:04:52Aber diese Komponentenfunktionen werden ein bisschen anders aussehen.
00:04:56Doch kommen wir zurück zu `this.update`.
00:04:58Ich habe erwähnt, dass es zwei wichtige Dinge daran gibt.
00:05:01`this` ist das eine davon.
00:05:02`update` ist das andere.
00:05:04Denn in Remix Version 3 müsst ihr dem Framework mitteilen,
00:05:07wann es den Bildschirm aktualisieren,
00:05:09wann es neu rendern soll.
00:05:10Und das ist natürlich etwas,
00:05:12das wir nicht mehr gewohnt sind,
00:05:14weil wir uns in React,
00:05:15aber auch in Vue und Angular,
00:05:17darauf verlassen,
00:05:18dass das Framework für uns bestimmt,
00:05:20wann aktualisiert werden soll.
00:05:21In React,
00:05:22wenn ihr `setState` aufruft,
00:05:23weist ihr dem State,
00:05:24den ihr verwaltet,
00:05:25einen neuen Wert zu,
00:05:27und das löst dann auch ein UI-Update aus – aber nicht unbedingt sofort.
00:05:31Stattdessen wird React ein gewisses Batching durchführen,
00:05:34mehrere State-Updates potenziell sammeln und so weiter.
00:05:37Aber letztendlich wird es die UI aktualisieren.
00:05:39Mit `setState` teilt ihr React also gewissermaßen mit,
00:05:42dass es die UI aktualisieren soll,
00:05:44aber ihr teilt ihm hauptsächlich mit,
00:05:46dass sich ein Wert ändert,
00:05:48und dass es ein Nebeneffekt davon ist,
00:05:50dass die UI aktualisiert,
00:05:51neu gerendert wird.
00:05:52Mit Remix ist das anders – mit Version 3 von Remix,
00:05:55sollte ich sagen.
00:05:56Dort verwaltet ihr euren State in normalen Variablen,
00:05:59nichts Besonderes.
00:06:00Es gibt keinen `useState`-Hook oder so etwas.
00:06:03Es gibt eigentlich überhaupt keine Hooks.
00:06:05Und ihr ruft dann einfach `this.update` auf,
00:06:07wann immer ihr wisst,
00:06:08dass die UI aktualisiert werden soll.
00:06:11Ihr könnt also eine Menge Variablen ändern und `this.update` nicht aufrufen,
00:06:15dann wird die UI nicht aktualisiert.
00:06:17Oder ihr ändert eine Menge Variablen und ruft `this.update` auf,
00:06:20dann wird die UI aktualisiert.
00:06:22So wird es funktionieren.
00:06:23Und es scheint,
00:06:24dass ein paar Leute – ihr kennt das Internet ja,
00:06:27Leute im Internet sind schrecklich – ein paar Leute haben damit Probleme.
00:06:31Ich würde sagen, schauen wir uns an, wie es funktioniert.
00:06:34Ich meine,
00:06:35es ist ein neuer Ansatz,
00:06:36und der alte Ansatz funktioniert definitiv gut.
00:06:39Ich denke,
00:06:39es gibt einen Grund,
00:06:40warum er in all diesen Bibliotheken und Frameworks verwendet wird.
00:06:44Aber der alte Ansatz hat definitiv auch das Potenzial,
00:06:47ein Eigentor zu sein,
00:06:48was zu Situationen führen kann,
00:06:50in denen nicht wirklich klar ist,
00:06:52warum sich etwas aktualisiert oder nicht aktualisiert.
00:06:55Und in komplexeren Apps,
00:06:56besonders mit neueren Versionen von React,
00:06:58die mit vielen Hooks und so weiter ziemlich komplex geworden sind,
00:07:02kann es überwältigend sein,
00:07:04wirklich zu verstehen,
00:07:05was vor sich geht.
00:07:06Und das ist ein Grund,
00:07:07warum sie zu einer einfacheren API zurückkehren,
00:07:10bei der ihr die volle Kontrolle habt..
00:07:16Sie verwenden auch das this-Schlüsselwort,
00:07:18um Ihnen ein paar andere APIs zur Verfügung zu stellen,
00:07:21aber eigentlich nicht viele,
00:07:23denn die Idee ist eindeutig,
00:07:25das Framework einfach und fokussiert zu halten und Ihnen eine gute Entwicklererfahrung zu bieten und die Nutzung dieses Frameworks einfach zu gestalten.
00:07:33Denn ein klares Ziel – und das haben sie in einem Blog-Post erwähnt,
00:07:37den sie Anfang des Jahres veröffentlicht haben – für dieses Framework ist,
00:07:42dass es von großen Sprachmodellen einfach genutzt werden können soll.
00:07:46Die Idee ist also ganz klar,
00:07:47dass Sie in der Lage sein werden,
00:07:49Dokumentationsartikel oder Beispiele in Ihren Chat-Verlauf mit einem großen Sprachmodell einzufügen,
00:07:55Informationen als Kontext bereitzustellen und dann LLMs und Code-Assistenten dabei helfen zu lassen,
00:08:01den Code zu generieren.
00:08:02Natürlich müssen sie das tun,
00:08:04weil es ein brandneues Framework ist.
00:08:06Offensichtlich wurde keines der bestehenden großen Sprachmodelle auf dieser Codebasis trainiert,
00:08:11und in absehbarer Zukunft werden sie auch nicht darauf trainiert werden,
00:08:16denn 80 Prozent aller Frontend-Code-Beispiele sind React,
00:08:19wie es scheint – speziell React mit Shadcn.
00:08:21Natürlich müssen sie also einen anderen Weg finden,
00:08:24um Entwicklern zu ermöglichen,
00:08:26das große Sprachmodell damit vertraut zu machen,
00:08:29wie man Remix v3-Code schreibt.
00:08:31Das ist ein weiterer Grund,
00:08:32warum sie die API einfach halten,
00:08:34würde ich vermuten,
00:08:35und warum sie sie ausdrucksstark,
00:08:37leicht verständlich und einfach zu nutzen halten wollen,
00:08:40denn es sollen nicht nur Menschen sie verwenden,
00:08:43sondern auch Modelle – große Sprachmodelle.
00:08:46Das ist also eindeutig ein Ziel,
00:08:47das sie hatten,
00:08:48und man sieht das in den Beispielen,
00:08:50die sie geteilt haben.
00:08:52Darüber hinaus haben sie ein weiteres Ziel,
00:08:54das sie mehrfach in dieser Keynote,
00:08:56in dieser Präsentation,
00:08:57erwähnt haben: Sie nutzen Web-Primitives.
00:09:00Sie nutzen Funktionen,
00:09:01die in modernen Browsern verfügbar sind – und nicht nur in Browsern,
00:09:05sondern auch im Backend,
00:09:06und ich komme gleich auf das Backend zu sprechen.
00:09:09Aber sie nutzen Dinge, die im Browser eingebaut sind.
00:09:12Sie setzen stark auf native Events und die eingebauten Möglichkeiten,
00:09:16benutzerdefinierte Events zu versenden.
00:09:19Man kann also benutzerdefinierte Events im Browser erstellen und versenden,
00:09:23und darauf setzen sie stark.
00:09:24Sie setzen auf Abort-Signale,
00:09:26um zu kommunizieren,
00:09:27dass eine Komponente unmounted wurde,
00:09:29und um Ihnen zu ermöglichen,
00:09:31Ihre Event-Listener automatisch zu stoppen.
00:09:34Sie nutzen also das,
00:09:35was im Browser eingebaut ist,
00:09:36denn ich habe definitiv das Gefühl,
00:09:38dass wir Webentwickler nicht mit dem Schritt gehalten haben,
00:09:42was moderne Browser können – und nicht nur moderne Browser.
00:09:45Es gibt bestimmte Fähigkeiten,
00:09:47die schon seit Jahren da sind,
00:09:49und wir nutzen sie nicht.
00:09:50Wir wissen vielleicht nicht einmal von ihnen.
00:09:53Wenn man wirklich eintaucht in das,
00:09:55was das DOM zu bieten hat,
00:09:56was Browser zu bieten haben,
00:09:58welche APIs dort verfügbar sind,
00:10:00gibt es eine Menge,
00:10:01was man dort tun kann,
00:10:02und viele Dinge,
00:10:03bei denen man vielleicht keine zusätzlichen Drittanbieter-Bibliotheken braucht,
00:10:08und das ist letztendlich das,
00:10:09was sie zu nutzen versuchen.
00:10:11Es einfach halten und diese eingebauten Fähigkeiten nutzen – das ist letztendlich ihr Ansatz hier.
00:10:16Wie gesagt, es ist trotzdem ein Framework.
00:10:19Man wird keine DOM-Knoten mit createElement und all diesen DOM-APIs erstellen.
00:10:23Stattdessen wird man,
00:10:25wie bereits erwähnt,
00:10:26weiterhin Komponenten erstellen,
00:10:28indem man Funktionen erstellt und JSX-Code darin verwendet.
00:10:31All das haben sie gezeigt.
00:10:32Es ist nur so,
00:10:33dass das State-Management völlig anders funktioniert,
00:10:36dass es im Allgemeinen schlanker ist,
00:10:38dass es keine Hooks oder ähnliches geben wird,
00:10:41auch weil diese Komponentenfunktionen nicht immer wieder aufgerufen werden,
00:10:45wie es in React der Fall ist.
00:10:47Stattdessen wird es zwei Arten von Funktionen geben,
00:10:50und je nachdem,
00:10:51wie man sie schreibt,
00:10:52werden sie entweder nur einmal aufgerufen oder ein Teil von ihnen könnte mehrmals aufgerufen werden.
00:10:58Und hier ist etwas für die Leute,
00:11:00die vielleicht schon 2017 mit React gearbeitet haben – damals erinnern Sie sich vielleicht,
00:11:05hatten wir zwei Arten von Komponenten.
00:11:07Wir hatten klassenbasierte zustandsbehaftete Komponenten,
00:11:11die State verwalten konnten und sich aktualisieren konnten,
00:11:14wenn sich dieser State änderte,
00:11:16und wir hatten zustandslose Komponenten,
00:11:18und das waren damals die Komponentenfunktionen.
00:11:21Dann kamen React Hooks und alle Komponenten wurden schließlich zu Komponentenfunktionen,
00:11:26und sie können entweder zustandsbehaftet oder zustandslos sein.
00:11:30Remix Version 3 verfolgt diesen Old-School-React-Ansatz sozusagen,
00:11:33aber nicht mit Klassen oder Funktionen,
00:11:36sondern stattdessen immer mit Funktionen,
00:11:38aber verschiedenen Arten von Funktionen.
00:11:40Wenn man eine Funktion hat,
00:11:42die JSX zurückgibt,
00:11:43ist es letztendlich eine zustandslose Komponente.
00:11:46Man kann dort nicht this.update aufrufen und erwarten,
00:11:49dass die Komponentenfunktion erneut ausgeführt wird.
00:11:52So wird es nicht funktionieren.
00:11:54Man kann Props akzeptieren,
00:11:55und wenn die übergeordnete Komponente neu rendert,
00:11:58wird Ihre Komponentenfunktion erneut ausgeführt und so weiter.
00:12:02Aber man kann dort keinen State verwalten.
00:12:04Man verwandelt eine Komponentenfunktion in eine zustandsbehaftete Komponentenfunktion sozusagen,
00:12:10indem man nicht den JSX-Code zurückgibt,
00:12:12sondern stattdessen eine Funktion zurückgibt,
00:12:15die den JSX-Code zurückgibt.
00:12:16Also eine Komponentenfunktion,
00:12:18die eine Funktion enthält und zurückgibt,
00:12:20die dann den JSX-Code zurückgibt,
00:12:22das kann dann eine zustandsbehaftete Komponente sein.
00:12:25Und wenn man dort this.update aufruft,
00:12:27wird die Funktion,
00:12:28die man zurückgegeben hat,
00:12:30erneut ausgeführt – zumindest habe ich es so verstanden.
00:12:33Wir haben also verschiedene Komponententypen,
00:12:36aber wiederum eine sehr einfache API,
00:12:38letztendlich eine sehr einfache Möglichkeit,
00:12:40zwischen zustandsbehafteten oder zustandslosen Komponentenfunktionen zu unterscheiden.
00:12:45Und dann gibt es das Backend,
00:12:47denn Remix Version 3 ist nicht nur ein Frontend-Framework.
00:12:50Stattdessen ist es ein Full-Stack-Framework.
00:12:53Es soll ein Full-Stack-Framework sein.
00:12:55Übrigens werden sie auch eine Komponentenbibliothek ausliefern,
00:12:59die es einfacher macht,
00:13:00komplexe Formularkomponenten zu erstellen und so weiter – das sollte ich auch erwähnen.
00:13:05Aber zurück zum Backend.
00:13:06Es wird auch mit einem Backend-Teil kommen.
00:13:09Es zielt darauf ab,
00:13:10ein Full-Stack-Framework zu sein – Frontend und Backend kombiniert.
00:13:14Wieder ganz ohne React,
00:13:15stattdessen bauen sie alles von Grund auf neu,
00:13:18sozusagen.
00:13:18Aber im Backend bekommt man einen Router,
00:13:21einen ziemlich fähigen,
00:13:22leistungsstarken Router,
00:13:24denn offensichtlich wissen sie,
00:13:25da sie React Router in den letzten 10 Jahren gebaut haben,
00:13:29eine Menge über Routing.
00:13:30Man bekommt also einen leistungsstarken Router,
00:13:33man bekommt die Möglichkeiten,
00:13:34JSX-Code und Remix-Komponenten in den Routen zurückzugeben und diese Komponenten auf dem Server zu hydrieren.
00:13:41Sie kommen mit ihrer eigenen Alternative zu React Server Components,
00:13:45einer einfacheren Alternative,
00:13:46die es ermöglicht,
00:13:47eine Komponente zurückzugeben,
00:13:49die nach dem Ausliefern auf dem Client aktualisiert werden kann,
00:13:53indem Teile des DOM erneut abgerufen werden.
00:13:55Wenn man also zum Beispiel etwas löscht,
00:13:58könnte man vom Client eine Anfrage an den Server senden und HTML-Code zurückbekommen,
00:14:02der erneut hydriert werden kann,
00:14:04um Teile des DOM zu aktualisieren.
00:14:06Sie geben uns also all diese Funktionen,
00:14:09um schnelle,
00:14:09moderne Single-Page-ähnliche Full-Stack-Anwendungen zu erstellen,
00:14:13genau wie man es mit Next.js oder dem React Router Framework-Modus oder anderen Frameworks wie TanStack Start kann,
00:14:20aber einfacher – das ist das klare Ziel.
00:14:22Eine einfache Möglichkeit,
00:14:23diese Apps zu erstellen,
00:14:25das wollen sie tun.
00:14:26Es gibt mehr in dieser Präsentation.
00:14:28Sie ist lang,
00:14:29aber das ist sozusagen der wichtigste Teil,
00:14:31würde ich sagen.
00:14:32Das ist meine Haupterkenntnis.
00:14:34Sie wollen uns ein leistungsstarkes,
00:14:36einfaches Full-Stack-Framework geben.
00:14:38Sie schreiben es von Grund auf neu.
00:14:40Wir haben manuelles Aktualisieren und so weiter.
00:14:43Also alles, was ich beschrieben habe – brauchen wir das?.
00:14:56Das ist die große Frage,
00:14:58und ich denke,
00:14:59eine weitere große Frage: Wird es erfolgreich sein?
00:15:02Offensichtlich sind beide Fragen ziemlich schwer zu beantworten,
00:15:05aber ich werde mein Bestes versuchen.
00:15:07Brauchen wir das??
00:15:08Nun,
00:15:08ich denke,
00:15:09wir haben da draußen eine Menge JavaScript-Frameworks,
00:15:12und es wird definitiv viele Leute geben,
00:15:15die sagen,
00:15:15wir haben zu viele,
00:15:16also wäre die Antwort dann nein.
00:15:18Ich habe immer gedacht,
00:15:19selbst noch 2018,
00:15:20als wir jede Woche ein neues Framework hatten,
00:15:23selbst damals dachte ich,
00:15:25dass es immer gut ist,
00:15:26Innovationen zu haben und neue Ideen auszuprobieren.
00:15:29Ich denke nicht,
00:15:30dass wir ein neues Framework brauchen,
00:15:32das einfach wie React ist,
00:15:34nur mit ein paar winzigen Unterschieden.
00:15:36Das brauchen wir meiner Meinung nach nicht.
00:15:38Aber ein brandneuer Ansatz mit diesem manuell ausgelösten Aktualisieren und all diesen anderen kleinen Dingen,
00:15:45die sie haben – ich denke,
00:15:46das ist eine großartige Idee.
00:15:48Es ist definitiv einen Versuch wert.
00:15:50Es klingt interessant.
00:15:51Es könnte uns eine einfachere Alternative zu React geben,
00:15:55was fantastisch ist,
00:15:56aber über die Jahre ziemlich komplex geworden ist.
00:15:59Also ja, das könnten wir brauchen.
00:16:01Wird es erfolgreich sein??
00:16:04Das ist natürlich eine andere Frage,
00:16:06denn besonders jetzt im Zeitalter von KI und großen Sprachmodellen werden diese Modelle normalerweise standardmäßig React empfehlen.
00:16:14Andererseits sind Menschen,
00:16:15die nicht wissen,
00:16:16wie man Code schreibt,
00:16:17natürlich nicht unbedingt die Zielgruppe,
00:16:20zumindest nicht direkt.
00:16:21Darauf komme ich noch zurück.
00:16:23Also spielt das dort keine Rolle.
00:16:25Erfahrene Entwickler könnten jedoch daran interessiert sein,
00:16:28Remix zu verwenden und das große Sprachmodell mithilfe offizieller Beispiele und so weiter einfach dazu zu bringen,
00:16:35Remix-Code zu generieren,
00:16:37einfach weil sie eine einfachere Codebasis haben möchten,
00:16:40denn letztendlich fassen wir als Entwickler unseren Code immer noch an.
00:16:44Wir könnten große Teile davon generieren,
00:16:47aber wir kontrollieren immer noch das große Sprachmodell.
00:16:50Wir optimieren Teile des Codes.
00:16:52Wir könnten größere Teile dieses Codes schreiben,
00:16:55wenn wir eine sehr spezifische Funktion im Kopf haben,
00:16:58die die KI einfach nicht richtig hinbekommt.
00:17:01Offensichtlich kümmern wir uns als Entwickler also immer noch um den Tech-Stack.
00:17:05Ich kümmere mich zumindest noch darum,
00:17:08und ich bin sicher,
00:17:09einige von euch tun das auch.
00:17:10Dort könnte es also interessant sein,
00:17:13etwas anderes auszuprobieren,
00:17:14und solange dieses Framework einfach mit großen Sprachmodellen zu verwenden ist und es genügend Ressourcen gibt,
00:17:21um dem großen Sprachmodell beizubringen,
00:17:23wie man es verwendet – was natürlich etwas zu sein scheint,
00:17:27worauf sie sich konzentrieren und was sie als Priorität haben – klingt das für mich gut.
00:17:32Das könnte ihnen definitiv eine echte Erfolgschance geben.
00:17:35Es wird natürlich schwierig sein.
00:17:37Aber hey,
00:17:38das wäre sowieso immer der Fall gewesen,
00:17:40schätze ich.
00:17:41Ich sehe also Chancen,
00:17:42aber natürlich ist es ein überfüllter Markt,
00:17:45um es so auszudrücken.
00:17:46Was jetzt wichtig ist: Remix gehört zu Shopify.
00:17:492022 hat
00:17:52Shopify Remix gekauft,
00:17:53könnte man sagen,
00:17:54also wurde das Remix-Team Teil von Shopify.
00:17:57Shopify ist natürlich klar daran interessiert,
00:18:00ein Framework zu haben,
00:18:01das aktiv gewartet wird und das zumindest innerhalb von Shopify verwendet wird,
00:18:06und damit meine ich nicht nur innerhalb des Unternehmens für ihre Shopify-Marketing- und Branding-Seiten.
00:18:13Ich meine für die Shopify-Shops.
00:18:15Es ist durchaus möglich,
00:18:16dass das Ziel darin besteht,
00:18:18Remix als Option für Shopify-Händler zu haben,
00:18:21die ihre eigenen Shops auf Shopify aufbauen möchten und eine einfache Möglichkeit wünschen,
00:18:27diese Shops anzupassen und benutzerdefinierte Shop-Fronts oder Seiten zu erstellen,
00:18:32aus denen sich der gesamte Shop zusammensetzt.
00:18:35Und natürlich ein Framework zu haben,
00:18:37das einfach zu bedienen und einfach mit großen Sprachmodellen zu verwenden ist,
00:18:42könnte enorm sein.
00:18:43Es ist natürlich immer noch keine Garantie,
00:18:46aber Shopify hinter Remix zu haben,
00:18:48ist natürlich sehr viel wert,
00:18:50würde ich vermuten,
00:18:51und deshalb bin ich ziemlich positiv über die Zukunft von Remix,
00:18:55auch natürlich,
00:18:56weil sie eine vielleicht kleine,
00:18:58aber sehr enthusiastische Community haben,
00:19:00soweit ich das beurteilen kann.
00:19:02Sie haben eine großartige Erfolgsbilanz,
00:19:05offensichtlich nachdem sie React Router und so weiter entwickelt haben.
00:19:09Also ja,
00:19:10ich bin super gespannt zu sehen,
00:19:12was wir bekommen werden.
00:19:13Ich freue mich darauf,
00:19:15es endlich selbst zu verwenden,
00:19:16denn im Moment ist das nicht wirklich möglich,
00:19:19und das sind meine Gedanken dazu.
00:19:21Also lasst mich wie immer wissen,
00:19:24was eure Gedanken sind,
00:19:25ob ihr denkt,
00:19:26dass wir es brauchen und ob sie gewinnen werden,
00:19:29und schaut euch den gesamten vierstündigen Teil der Konferenz an,
00:19:33wenn ihr interessiert seid und mehr erfahren möchtet

Key Takeaway

Remix Version 3 ist ein von Grund auf neu entwickeltes Full-Stack-JavaScript-Framework, das unabhängig von React ist und durch manuelles State-Management, native Web-APIs und einfache Nutzbarkeit für LLMs eine Alternative zu komplexen modernen Frameworks bieten will.

Highlights

Remix Version 3 ist ein vollständig neues Full-Stack-JavaScript-Framework, unabhängig von React, entwickelt von den Machern von React Router und Remix JS

Das Framework nutzt manuelles State-Management mit this.update statt automatischer Reaktivität wie in React, was mehr Kontrolle über UI-Updates gibt

Remix v3 setzt stark auf native Web-Primitives und Browser-APIs statt auf abstrakte Framework-Konzepte

Ein zentrales Ziel ist die einfache Nutzbarkeit durch große Sprachmodelle (LLMs) zur Code-Generierung

Das Framework unterscheidet zwischen zustandslosen und zustandsbehafteten Komponenten durch Funktions-Return-Typen (JSX direkt vs. Funktion, die JSX zurückgibt)

Shopify steht hinter Remix und könnte es als Framework für Shopify-Shop-Anpassungen positionieren

Trotz der Herausforderung in einem überfüllten Markt hat Remix durch seine einfache API und starke Backing-Unterstützung gute Erfolgschancen

Timeline

Einführung und Kontext zu Remix v3

Das Video stellt Remix Version 3 vor, ein neues Full-Stack-JavaScript-Framework von den Machern von Remix JS und React Router (Ryan Florence und Michael Jackson). Remix wurde ursprünglich als React-Meta-Framework entwickelt, ähnlich wie Next.js, und Version 2 wurde 2022 veröffentlicht. Im Jahr 2024 wurde Remix v2 mit React Router zusammengeführt, sodass React Router nun sowohl als einfache Routing-Bibliothek als auch im Framework-Modus für Full-Stack-React-Anwendungen genutzt werden kann. Mit Version 3 wird Remix zu einem komplett neuen, von React unabhängigen Framework, das die Vision der Entwickler für moderne Web-Entwicklung verkörpert. Das Framework adressiert Probleme, die die Entwickler im JavaScript-Ökosystem und der bestehenden Bibliothekslandschaft identifiziert haben.

Die kontroverse this.update-API und manuelles State-Management

Ein zentrales und kontroverses Feature von Remix v3 ist die Verwendung von this.update für manuelles State-Management. Im Gegensatz zu React, wo setState automatisch UI-Updates auslöst, verwaltet man in Remix v3 State in normalen Variablen und ruft explizit this.update auf, wenn die UI aktualisiert werden soll. Das this-Keyword, das in modernem JavaScript selten verwendet wird, gibt Zugriff auf Framework-APIs. Entwickler haben volle Kontrolle darüber, wann Updates stattfinden – man kann mehrere Variablen ändern ohne Update, oder Updates gezielt auslösen. Dieser Ansatz unterscheidet sich fundamental von der automatischen Reaktivität in React, Vue oder Angular. Die Entwickler argumentieren, dass dieser explizite Ansatz Verwirrung über unerwartete Updates vermeidet, die in komplexen React-Apps mit vielen Hooks auftreten können.

LLM-Optimierung und Fokus auf Web-Primitives

Ein klares Designziel von Remix v3 ist die einfache Nutzbarkeit durch große Sprachmodelle (LLMs). Da aktuelle LLMs hauptsächlich auf React-Code trainiert wurden (ca. 80% aller Frontend-Beispiele), muss Remix einen anderen Weg finden: Die API soll so einfach und ausdrucksstark sein, dass Entwickler Dokumentation in Chat-Verläufe einfügen können, um LLMs beim Code-Generieren zu helfen. Zusätzlich setzt das Framework stark auf native Web-Primitives und eingebaute Browser-Features, die oft übersehen werden. Dazu gehören native Events, custom Events, Abort-Signals für Component-Unmounting und andere DOM-APIs, die seit Jahren verfügbar sind, aber von Entwicklern kaum genutzt werden. Der Ansatz zielt darauf ab, das Framework schlank zu halten und Drittanbieter-Abhängigkeiten zu reduzieren, indem moderne Browser-Fähigkeiten maximal ausgenutzt werden.

Komponenten-Architektur: Zustandslos vs. Zustandsbehaftet

Remix v3 führt eine Komponenten-Architektur ein, die an das frühe React von 2017 erinnert, aber mit einem modernen Twist. Entwickler schreiben weiterhin Funktionen mit JSX, aber es gibt keine Hooks. Stattdessen unterscheidet das Framework zwischen zwei Komponententypen: Zustandslose Komponenten geben direkt JSX zurück und können nicht this.update aufrufen – sie werden nur neu gerendert, wenn die Parent-Komponente aktualisiert wird. Zustandsbehaftete Komponenten geben eine Funktion zurück, die dann JSX zurückgibt – bei this.update wird nur diese innere Funktion erneut ausgeführt, nicht die äußere Komponentenfunktion. Diese klare Trennung macht sofort ersichtlich, welche Komponenten State verwalten können und welche nicht. Zusätzlich plant Remix eine eigene Komponentenbibliothek, um die Erstellung komplexer Formular-Komponenten zu vereinfachen.

Full-Stack-Fähigkeiten und Server-Side-Features

Remix v3 ist nicht nur ein Frontend-Framework, sondern ein komplettes Full-Stack-Framework mit leistungsstarken Backend-Funktionen. Die Entwickler bringen ihre 10-jährige Erfahrung mit React Router ein, um einen hochperformanten Router zu entwickeln. Das Backend unterstützt JSX-Code und ermöglicht Server-Side-Rendering mit Hydration auf dem Client. Besonders interessant ist die eigene Alternative zu React Server Components: Komponenten können auf dem Server gerendert und dann partiell aktualisiert werden, indem nur Teile des DOM vom Server nachgeladen werden. Wenn beispielsweise ein Element gelöscht wird, kann der Client eine Anfrage an den Server senden und HTML-Code zurückbekommen, der dann in Teile des DOM rehydriert wird. Diese Architektur ermöglicht schnelle, moderne Single-Page-ähnliche Anwendungen ähnlich wie Next.js oder TanStack Start, aber mit deutlich einfacherer API.

Erfolgschancen: KI, Shopify und Community

Die Erfolgschancen von Remix v3 werden aus mehreren Perspektiven analysiert. Einerseits ist der Framework-Markt überfüllt und LLMs empfehlen standardmäßig React, was eine Herausforderung darstellt. Andererseits könnten erfahrene Entwickler, die ihre Codebasis noch selbst kontrollieren und optimieren, an einer einfacheren Alternative interessiert sein – besonders wenn das Framework gut mit LLMs funktioniert durch ausreichende Ressourcen und Dokumentation. Ein entscheidender Erfolgsfaktor ist die Unterstützung durch Shopify, das Remix 2022 erworben hat. Shopify könnte Remix als Framework für Shopify-Händler positionieren, die ihre Shops anpassen und eigene Shop-Fronts erstellen möchten – ein einfaches, LLM-freundliches Framework wäre hier enorm wertvoll. Die enthusiastische Community und die hervorragende Track-Record der Entwickler mit React Router sprechen ebenfalls für Erfolgschancen, auch wenn die Zukunft naturgemäß unsicher bleibt.

Zusammenfassung und Ausblick

Der Sprecher fasst seine generell positive Einschätzung zu Remix v3 zusammen. Trotz der Herausforderungen in einem gesättigten Markt sieht er echte Chancen für das Framework durch seine einfache API, die starke Unterstützung von Shopify und die Fokussierung auf LLM-Nutzbarkeit. Die Kombination aus innovativen Ideen (manuelles State-Management, Web-Primitives) und praktischer Business-Unterstützung könnte Remix zu einer ernstzunehmenden Alternative machen. Aktuell ist das Framework noch nicht für die breite Öffentlichkeit verfügbar, weshalb praktische Tests noch ausstehen. Der Sprecher ermutigt Zuschauer, sich die vollständige vierstündige Konferenz-Präsentation anzusehen, die im Video verlinkt ist, um tiefere Einblicke in die technischen Details und die Vision der Entwickler zu erhalten. Er lädt zur Diskussion ein über die Notwendigkeit eines weiteren Frameworks und dessen potenzielle Erfolgsaussichten.

Community Posts

View all posts