00:00:00Bist du ein absoluter Python-Fan? Ich meine, gehörst du zu denen, die am liebsten nur Python-Code schreiben
00:00:05und sonst gar nichts? Wenn das auf dich zutrifft, dann habe ich genau das Richtige für dich. Es ist ein Framework namens
00:00:11Reflex, das darauf abzielt, die Hürden und die Komplexität zu beseitigen, die beim Umwandeln von Full-Stack-Python-Code
00:00:17in produktionsreife Webanwendungen entstehen. In diesem Video schauen wir uns an, was
00:00:22Reflex eigentlich ist, wie es funktioniert und ob der Hype gerechtfertigt ist.
00:00:30Das Hauptproblem, das Reflex lösen möchte, ist die Notwendigkeit für Python-Entwickler, einen
00:00:36völlig anderen Stack zu lernen – einschließlich JavaScript, React, Routing und Bundler –, nur um
00:00:43eine funktionale Weboberfläche für ihren Code zu erstellen. Mit Reflex können Entwickler Full-Stack-Apps
00:00:50zu 100 % in reinem Python erstellen. Man kann sich also auf eine einzige Sprache für den gesamten Stack konzentrieren,
00:00:56ohne ständig umzudenken. Laut eigenen Angaben wurden seit dem Start über 1 Million Apps
00:01:03mit diesem Framework erstellt, und 30 % der Fortune-500-Unternehmen sollen es für ihre
00:01:10internen Tools nutzen. Kürzlich haben sie stark auf KI gesetzt und ein
00:01:15Tool namens „Reflex Build“ veröffentlicht, mit dem man seine App quasi per „Vibe Coding“ aus einem einzigen Prompt erstellen kann.
00:01:21Zudem werden Integrationen für andere SDKs und Tools unterstützt, mit denen man seine App leicht
00:01:26mit beliebten Diensten wie Databricks, Okta, Stripe, AWS usw. verbinden kann. Das klingt alles beeindruckend,
00:01:34aber ich möchte mir die Hände schmutzig machen und den Code selbst ausprobieren, um zu sehen, wie es wirklich funktioniert.
00:01:40Beginnen wir damit, ein neues Verzeichnis namens „ReflexTest“ zu erstellen und hineinzuwechseln. Laut
00:01:44Dokumentation können wir diese drei Befehle ausführen, um unser Reflex-Projekt zu starten. Fangen wir also an
00:01:48mit „pip install reflex“ und danach „reflex init“. Hier wird uns angeboten, mit einer
00:01:53ihrer Vorlagen zu starten. Für diese Demo halten wir es jedoch einfach und wählen die Option „Blank Reflex App“.
00:01:57Sobald das erledigt ist, können wir das Projekt im Code-Editor öffnen. Wenn wir den Ordner
00:02:02„reflex_test“ öffnen, sehen wir, dass unsere gesamte App in der Datei „reflex_test.py“ lebt. Wir erkennen,
00:02:09dass sie einen Abschnitt für RX-Komponenten und eine State-Klasse hat. Führen wir „reflex run“ im Terminal aus, um
00:02:15unsere App zu starten. Sie wird auf Port 3000 bereitgestellt, und wir können das Ergebnis im Browser sehen.
00:02:20Schauen wir uns nun an, wie Reflex den State verwaltet. Wir beginnen mit einer einfachen Zählervariable.
00:02:25Um diesen Wert zu ändern, müssen wir auch eine Funktion definieren, die genau das tut. Unterhalb der
00:02:29Variable „count“ definieren wir eine Inkrement-Funktion, die den Zähler einfach um eins erhöht. Es wird
00:02:34empfohlen, den Decorator „@rx.event“ darüber zu setzen, was eine korrekte statische Typprüfung ermöglicht und
00:02:39sicherstellt, dass Event-Handler die richtige Anzahl und Art von Argumenten erhalten. Dann fügen wir einen
00:02:44einfachen Button im Return-Statement der RX-Komponente hinzu. Er zeigt uns den Zählerstand im Textfeld an
00:02:48und löst beim Klicken die Inkrement-Funktion aus. Reflex unterstützt Hot Reloading. Wenn wir also
00:02:53die Datei speichern und den Browser öffnen, sehen wir unseren Zähler-Button, der den Wert bei jedem Drücken erhöht.
00:02:58Versuchen wir nun etwas Interessanteres. Erstellen wir ein Array von Elementen
00:03:02in unserem State. Theoretisch sollten wir diese Elemente als Liste rendern können, indem wir diese
00:03:08Inline-For-Schleife nutzen. Aber das wird nicht funktionieren, da dieser Wert zur Compile-Zeit nicht bekannt ist. Ihr müsst wissen:
00:03:13Reflex funktioniert so, dass beim Ausführen der App das Frontend in JavaScript-Code kompiliert wird,
00:03:18der im Browser läuft – das nennt Reflex „Compile-Time“. Das Backend bleibt
00:03:23in Python und läuft während der gesamten Laufzeit der App auf dem Server. Das nennt Reflex
00:03:27„Runtime“. Wir können also keine reine Python-For-Schleife innerhalb des Render-Blocks der Komponente nutzen,
00:03:32wohl aber reine Python-Operationen außerhalb davon. Wie loopen wir also durch die Elemente innerhalb des
00:03:37Komponenten-Blocks? In diesem Fall müssen wir eine einfache „render_item“-Funktion definieren, die
00:03:42unser Element so ausgibt. Danach nutzen wir die Funktion „rx.foreach“ im Render-Block der Komponente,
00:03:47um die Schleife zu durchlaufen. Jetzt werden unsere Elemente in der App korrekt angezeigt. Dasselbe gilt für
00:03:53bedingtes Rendering. Wir können keine einfachen If-Else-Anweisungen im Return-Block wie hier verwenden. Stattdessen
00:03:58müssen wir die Funktion „rx.cond“ nutzen. Wenn wir den Button nun mehr als fünfmal
00:04:02anklicken, erscheint unser Text in der App. Als Letztes schauen wir uns an, wie wir Daten abrufen
00:04:08und rendern können. Für diese Demo laden wir einen zufälligen, nutzlosen Fakt von der „Random Useless Facts“-API
00:04:12und zeigen ihn in einer Textbox an. Zuerst fügen wir eine boolesche Variable hinzu, die angibt, ob
00:04:17Daten gerade geladen werden, sowie einen leeren String für den Fakt selbst. Dann definieren wir eine
00:04:22asynchrone Fetch-Funktion, die den Ladestatus auf „True“ setzt. Anschließend nutzt sie die
00:04:27HTTPX-Bibliothek, um den zufälligen Fakt abzurufen und in unserer State-Variable zu speichern. Ich füge außerdem
00:04:33eine künstliche Verzögerung von einer Sekunde mit „asyncio“ hinzu, damit wir den Ladevorgang in Echtzeit
00:04:38beobachten können. Sobald die Operation fertig ist, setzen wir den Ladestatus zurück auf „False“. Beachtet hier
00:04:43die Verwendung von „yield“. Wann immer wir die UI mehrmals innerhalb eines Event-Handlers aktualisieren wollen,
00:04:48können wir „yield“ nutzen, um ein Update an den Renderer zu senden. In diesem Fall wollen wir,
00:04:52dass die UI die Änderung sofort anzeigt, sobald sich der Ladestatus ändert. Vergessen wir nicht,
00:04:57die Imports für HTTPX und asyncio oben hinzuzufügen. Schließlich verwenden wir in unserer Render-Funktion
00:05:03wieder eine einfache „rx.cond“-Funktion, um je nach Status einen Lade-Spinner oder den Fakt anzuzeigen. Wenn wir
00:05:08möchten, dass diese Funktion jedes Mal beim Laden der Seite ausgelöst wird, fügen wir einen Decorator für unsere
00:05:12RX-Komponente hinzu, der unsere Fetch-Funktion beim Seitenaufruf triggert. Wenn wir die Seite nun neu laden,
00:05:18sehen wir, wie der zufällige Fakt abgerufen und auf der Seite angezeigt wird. Zum Abschluss möchte ich noch
00:05:22einen Blick in den „.web“-Ordner werfen. Wie wir hier sehen können, wird alles, was wir gerade geschrieben haben, im Hintergrund
00:05:27in eine React-App kompiliert, die Vite und Tailwind nutzt. Sogar ein
00:05:33React Router für das Routing ist vorhanden. Ehrlich gesagt war ich in dem Moment, als ich das sah,
00:05:38extrem enttäuscht. Ich dachte, sie hätten einen eigenen JavaScript-Compiler oder etwas Originelles entwickelt.
00:05:42Aber das bedeutet letztlich nur, dass Reflex eine weitere Abstraktionsschicht über React ist. Ich habe also
00:05:47gemischte Gefühle, was Reflex angeht. Einerseits ist die Idee eines reinen Python-Full-Stack-Frameworks,
00:05:53bei dem man alles in Python schreibt, wirklich cool. Aber ich war sehr enttäuscht festzustellen,
00:05:59dass es unter der Haube nur eine React-App kapselt und kein natives Python verwendet. Das macht es
00:06:05eigentlich nur komplizierter, weil man gezwungen ist, eine neue Architektur zu lernen und zu verstehen,
00:06:11wie Reflex das State-Management handhabt – ganz zu schweigen von all den Grenzfällen, die auftreten können. Da könnte man
00:06:16auch gleich bei React bleiben, da es ein erprobtes und solides Framework ist. Wenn ich also ein Projekt
00:06:22mit einem Python-Backend erstellen würde, würde ich für das Frontend wohl immer noch ein JavaScript-Framework wählen.
00:06:28Reflex konnte mich nicht davon überzeugen, voll auf Python für den gesamten Stack zu setzen. Aber das ist nur meine Meinung.
00:06:34Was denkt ihr über Reflex? Gefällt euch die Idee eines solchen Full-Stack-Python-Frameworks?
00:06:39Ich bin wirklich gespannt auf eure Meinung. Und Leute, wenn euch das Video gefallen hat, zeigt es uns,
00:06:44indem ihr den Like-Button unter dem Video drückt. Und vergesst nicht, unseren Kanal zu abonnieren.
00:06:50Das war Andris von Better Stack, wir sehen uns in den nächsten Videos!