00:00:00Vous êtes un mordu de Python ? Je veux dire, du genre à ne vouloir écrire que du code Python
00:00:05et rien d'autre ? Si c'est votre cas, alors j'ai exactement ce qu'il vous faut. C'est un framework nommé
00:00:11Reflex, et son but est de supprimer les frictions et la complexité liées à la transformation
00:00:17de code Python full-stack en applications web prêtes pour la production. Dans cette vidéo, nous allons voir ce qu'est
00:00:22Reflex, comment il fonctionne, et si l'engouement qu'il suscite est justifié.
00:00:30Le principal problème que Reflex tente de résoudre, c'est l'obligation pour les développeurs Python d'apprendre
00:00:36une pile technologique entièrement différente, incluant JavaScript, React, le routage et les bundlers, simplement pour
00:00:43pouvoir créer une interface web fonctionnelle pour leur code. Reflex permet de bâtir des applis full-stack
00:00:50en 100 % Python pur. Vous pouvez donc vous concentrer sur un seul langage pour toute la pile, sans
00:00:56changer de contexte. Ils affirment également que depuis leur lancement, les développeurs ont créé plus d'un million d'applis
00:01:03avec ce framework, et que 30 % des entreprises du Fortune 500 l'utilisent pour leurs
00:01:10outils internes. Récemment, ils ont mis le paquet sur l'IA en lançant un
00:01:15outil appelé Reflex Build, qui permet en gros de générer votre appli à partir d'un simple prompt.
00:01:21De plus, ils supportent des intégrations pour d'autres SDK et outils vous permettant de connecter facilement votre appli
00:01:26à des services populaires comme Databricks, Okta, Stripe, AWS, etc. Tout cela semble impressionnant,
00:01:34mais je veux mettre la main à la pâte et tester ce code moi-même pour voir comment ça fonctionne réellement.
00:01:40Commençons par créer un nouveau répertoire, ReflexTest, puis entrons dedans. À partir de là,
00:01:44la documentation indique que nous pouvons lancer ces trois commandes pour démarrer notre projet Reflex. Commençons
00:01:48par exécuter "pip install reflex" puis "reflex init". On nous propose alors de commencer avec l'un
00:01:53de leurs modèles. Mais pour cette démo, nous allons faire simple et choisir l'option
00:01:57"blank reflex app". Une fois terminé, nous pouvons ouvrir le projet dans notre éditeur de code. En ouvrant le
00:02:02dossier reflex_test, c'est là que toute notre application réside, dans le fichier reflex_test.py. On peut voir
00:02:09qu'il contient une section de composants RX et une classe d'état. Lançons "reflex build" dans notre terminal pour
00:02:15démarrer l'appli. Elle se lance sur le port 3000, et on peut voir le résultat ici dans le navigateur.
00:02:20Voyons maintenant comment Reflex gère l'état. Commençons par ajouter une simple variable de compteur.
00:02:25Et pour modifier cette valeur, nous devons aussi définir une fonction pour cela. Sous la
00:02:29variable "count
00:02:34recommandé d'ajouter le décorateur "RX event" au-dessus, ce qui permet un contrôle de type statique
00:02:39et garantit que les gestionnaires d'événements reçoivent le bon nombre et type d'arguments. Ensuite, nous ajoutons un
00:02:44simple bouton dans l'instruction de retour du composant RX. Il affichera le compteur dans le
00:02:48champ de texte et déclenchera la fonction d'incrémentation au clic. Reflex supporte le rechargement à chaud. Si
00:02:53nous sauvegardons le fichier et ouvrons le navigateur, nous voyons notre bouton qui incrémente la valeur
00:02:58à chaque pression. Tentons maintenant quelque chose de plus intéressant : créons un tableau d'éléments
00:03:02dans notre état. En théorie, nous devrions pouvoir afficher ces éléments sous forme de liste avec cette
00:03:08boucle "for" en ligne. Mais cela ne fonctionnera pas car cette valeur n'est pas connue au moment de la compilation. Voyez-vous,
00:03:13le fonctionnement de Reflex est le suivant : quand vous lancez l'appli, le front-end est compilé en code JavaScript
00:03:18qui s'exécute dans le navigateur ; c'est ce que Reflex appelle le "compile time". Le back-end reste
00:03:23en Python et tourne sur le serveur pendant toute la durée de vie de l'appli. C'est ce qu'on appelle
00:03:27le "runtime" chez Reflex. On ne peut donc pas faire de boucle "for" en pur Python dans le rendu du composant,
00:03:32mais on peut faire des opérations en pur Python en dehors du bloc de rendu. Alors, comment itérer sur les éléments dans
00:03:37le bloc du composant ? Pour ce cas précis, nous devons définir une simple fonction "render_item" qui va
00:03:42afficher notre élément comme ceci. Ensuite, il faut utiliser la fonction "RxForEach" dans le bloc de rendu
00:03:47du composant pour faire notre boucle. Nos éléments s'affichent maintenant correctement. Il en va de même pour
00:03:53le rendu conditionnel. On ne peut pas utiliser de simples instructions "if-else" dans le bloc de retour. À la place,
00:03:58nous devons utiliser la fonction "RxConditional". Et si nous cliquons maintenant plus de cinq
00:04:02fois sur le bouton, notre texte apparaîtra sur l'appli. Enfin, voyons comment
00:04:08récupérer et afficher des données. Pour cette démo, récupérons un fait inutile via l'API
00:04:12"random useless facts" et affichons-le dans une zone de texte. D'abord, ajoutons un booléen pour indiquer si la
00:04:17récupération est en cours, et une simple chaîne vide qui contiendra notre fait. Ensuite, nous définissons une
00:04:22fonction asynchrone qui passe le booléen à "vrai". Elle utilisera ensuite la
00:04:27bibliothèque HTTPX pour récupérer le fait et le stocker dans notre variable d'état. J'ajoute également
00:04:33un léger délai d'une seconde avec asyncio pour que l'on puisse voir le chargement des données en temps
00:04:38réel. Une fois l'opération terminée, on repasse le booléen à "faux". Notez l'utilisation de
00:04:43l'opération "yield" ici. Chaque fois que l'on veut mettre à jour l'interface plusieurs fois dans un gestionnaire d'événements,
00:04:48on peut utiliser "yield" pour envoyer une mise à jour au moteur de rendu. Dans ce cas, dès que
00:04:52l'état du chargement change, on veut que l'interface le reflète. N'oublions pas d'ajouter
00:04:57les imports HTTPX et asyncio en haut. Enfin, dans notre fonction de rendu, on utilise une simple
00:05:03fonction "RX conditional" pour afficher soit un spinner de chargement, soit le fait selon l'état actuel. Et si
00:05:08nous voulons que cette fonction se déclenche au chargement de la page, il faut ajouter un décorateur à notre
00:05:12composant RX qui appellera la fonction de récupération. Désormais, en rechargeant la page, on peut
00:05:18voir notre fait inutile être récupéré et affiché. La dernière chose que je souhaite
00:05:22regarder est le dossier ".web". Comme on peut le voir, tout ce que nous venons d'écrire est compilé et
00:05:27rendu dans une application React en coulisses, laquelle utilise Vite et Tailwind. Il y a même
00:05:33React Router pour la gestion des routes. Pour être honnête, dès que j'ai vu ça, j'ai été super
00:05:38déçu. Je pensais qu'ils avaient créé un compilateur JavaScript sur mesure ou quelque chose d'original.
00:05:42Mais cela signifie que Reflex n'est qu'une couche d'abstraction de plus au-dessus de React. J'ai donc
00:05:47un avis mitigé sur Reflex. D'un côté, l'idée d'un framework full-stack unique en Python permettant
00:05:53de tout écrire en pur Python est vraiment cool. Mais j'ai été très déçu de découvrir
00:05:59qu'en réalité, il ne fait qu'envelopper une appli React au lieu d'utiliser du Python natif. Cela
00:06:05rend les choses plus complexes, car on est forcé de réapprendre une nouvelle architecture et de comprendre
00:06:11comment Reflex gère l'état, sans parler de tous les cas particuliers. Autant
00:06:16s'en tenir à React, qui est un framework solide et éprouvé. Donc, si je devais créer
00:06:22un projet avec un back-end Python, j'utiliserais toujours un framework JavaScript pour mon front-end.
00:06:28Reflex ne m'a pas convaincu de passer au 100 % Python pour le full-stack. Mais ce n'est que mon avis.
00:06:34Que pensez-vous de Reflex ? L'idée d'un framework full-stack Python comme celui-ci vous plaît-elle ?
00:06:39Je suis curieux de connaître votre opinion. Et si vous avez aimé cette vidéo, n'hésitez pas
00:06:44à nous le faire savoir en cliquant sur le bouton j'aime. N'oubliez pas de vous abonner à la chaîne.
00:06:50C'était Andris de Better Stack, et je vous dis à bientôt dans de prochaines vidéos.