React fusionne le front et le back ! - Actus JS de la semaine (30 octobre 2023)

🔹 Découvrez "AI Pricing Optimizer" ! go.devtheory.f...
Actu: React lance les server actions : / 1716573234160967762
Actu: Mock Service Worker v2.0.0 : github.com/msw...
Actu: Radix UI sur Vue.js : www.radix-vue....
Service: AI Pricing Optimizer : go.devtheory.f...
--------------------------------------------------------------------
DevTheory
Formations : devtheory.fr/?...
Discord : go.devtheory.f...
Twitter: go.devtheory.f...
LinkedIn : go.devtheory.f...
--------------------------------------------------------------------
Informations
00:00 - Introduction
00:30 - Actu: React lance les server actions
04:07 - Actu: Mock Service Worker v2.0.0
06:17 - Actu: Radix UI sur Vue.js
07:46 - Service: AI Pricing Optimizer
10:48 - Conclusion
Contact partenariat : go.devtheory.f...

[@funckysom7817]

Ton projet est intéressant

[@Walien_]

J'apprécie tes vidéos actus de la semaine mais j'aurais une petite demande à te faire, pourrais tu chapitrer les différentes parties de la vidéos afin que l'on puisse directement obtenir les timecodes des différentes parties qui peuvent nous intéresser

[@DevTheory]

Merci! D'ailleurs je chapitre toutes les vidéos depuis plus de 2 ans maintenant 😅 Tu peux regarder en description de toutes les vidéos il y a bien le sommaire, mais je suppose que KZbin ne le prend pas toujours en compte, peut-être à cause de la version du navigateur ou alors d'extensions !

[@jeromeguerin2481]

Merci Bryan pour tes vidéos super intéressantes ! Beaucoup de force à toi et n’arrête pas je t’en prie ❤

[@DevTheory]

Merci beaucoup !! Je vais continuer comme ça 💪

[@asubijotaka7374]

GG pour ton projet perso ;)

[@DevTheory]

Merci à toi!

[@sylvainschellenberger]

Le tweet sur les Server Actions de React semble s'adresser aux créateurs de bibliothèques/frameworks (je pense surtout les "meta-frameworks" comme Next.js ou Gatsby). En effet, ce 'use server' ne peut fonctionner que si le projet utilise du Server Side Rendering, et non dans une Single Page Application que l'on créerait avec Vite par exemple. Il est évidemment possible de se configurer son propre environnement React en SSR, mais je pense que l'on dépasse le cadre d'un "petit" projet. Bonne chance pour le pré-lancement d'AI Pricing Optimizer en tout cas.

[@SimonDiFolco32]

Effectivement j'ai même l'impression que c'est un screen de la derniere conférence NextJs . Y'a déjà les 'use client' depuis un petit moment d'ailleurs

[@DevTheory]

Exactement ! Et merci !

[@harkor007]

Pour revenir un peu sur ce "use server" alors oui ça va exécuter du code côté serveur mais ça n'empêche pas du tout de travailler avec un environnement back à côté. La partie serveur de react dans ce cas-ci ça permet surtout d'alléger le code exécuté côté client (donc meilleures perfs) et ça permet également de protéger un peu mieux ce qui se passe entre le back (php, java, python, node, etc) et le front car on ne verra pas/plus dans le navigateur ce qui se passe entre le browser et le backend. Ça s'arrête là. Que ça soit pour de gros ou petits projets, le 'use server' il est là principalement pour faire diminuer le code téléchargé par le browser de l'utilisateur et non pas pour "remplacer" le boulot d'un back.

[@karlstein9572]

Désolé mais tu racontes n'importe quoi.. Ça protège rien du tout, ça simplifie le flux entre le front et le back, de sorte qu'on évite de passer par des API. Ça ne veut pas dire non plus qu'on ne voit rien dans le navigateur car il y a forcément une requête qui est envoyée sinon comment le serveur reçoit les données? Au final c'est transparent pour le développeur car certaines étapes sont cachées (envoi et parsing des données), mais le gros du travail est fait par les frameworks comme nextjs qui font l'intégration des server actions.

[@karlstein9572]

​@@MrJohAApas besoin de passer par un service payant ?

[@MrJohAA]

@@karlstein9572 Firebase est gratuit

[@TojoRODIALSON]

Le bon vieux temps. Du PHP dans le HTML 😁

[@armandsalle8447]

Intéressant AI Pricing, tu penses faire une vidéo sur comment on entraine une AI ?

[@DevTheory]

Pas sûr car maintenant qu'il y a les GPTs c'est assez simple d'y mettre un fichier PDF ou autre sans aucune Vector database 😅 Mais j'aime beaucoup le dev JS avec IA, j'aimerais bien faire des vidéos dessus

[@Earlam]

Salut, est ce que ces fonctions 'use server' peuvent servir pour le SEO ?

[@DevTheory]

Salut! Non je ne pense pas, je ne vois pas de relation entres les deux

[@tfgg1490]

purquoi tu ne fait pas de tuto sur svelte ou sveltekit

[@moneyfr]

que penses tu de string-ts

[@DevTheory]

Superbe librairie ! Mais attention à ne pas l'utiliser pour rien, c'est vraiment des cas précis où on a besoin de manipuler le type d'une string

[@FlorianChevallier]

Finalement ça reprends ce que fait Remix avec ses actions

Effectivement le use server n'est viable sur des petits projets très très simple... Déjà que React mélange le code, le html (jsx/tsx) voir le css parfois, si on rajoute le back la dedans, ca va devenir le boulgi boulga de Casimir 🤢

[@omegapirux]

bah ça existe déjà, ça s'appelle NextJS, je l'ai utilisé pour un petit projet, mais je me vois mal dev de très très gros truc avec ça, Enfaite le soucis c'est que le Backend avec des composant useServer n'est pas organisé, c'est à nous de l'organiser dès le début du projet, normalement ça passe par la création d'un MVC, ou d'un design pattern en tout cas, sans ça, sur les gros projet on est foutu.

[@FlorianChevallier]

Remix le fait tout aussi bien 😁

[@karlstein9572]

L'utilité des server actions n'a rien à voir avec la taille du projet.. Ça permet par exemple de ne pas avoir à créer un endpoint d'api, ce qui serait le cas pour un site Web type boutique ou vitrine. De plus ceux qui comparent à php, ça me fait doucement rire car je savais pas qu'on pouvait utiliser php pour faire du fronted, j'entends par là exécuté sur le navigateur.

[@mwlulud2995]

Si tu savais pas ça c que tu connais rien à PHP mdr😅

[@karlstein9572]

@@mwlulud2995 j'ai commencé avec php il y a presque de 20 ans sur WP et Drupal, avant même d'être dans une filière info, mais tu savais déjà tout ça... Javascript permet d'avoir du code Isomorphe et de manipuler directement le DOM contrairement à php, c'est pourquoi la comparaison me fait rire. On peut faire du web (frontend/backend) avec n'importe quel langage (python, perl, ruby, c#, shell...), mais ce qui tourne dans le navigateur c'est du JS pas du php... à moins d'utiliser WASM et encore tu dois passer par du JS in fine...

[@khazimndiaye2369]

Comment on peut melangé tout tout dans un meme fichier?? Comme tu dis c’est juste pour des petits projets. Deja y’a du css du jsx et la ils viennent rajouter du code server🙄🙄

[@rafikmansour4755]

le mytho qui insiste qu'il a coder ce week end, pffffff désabonne directe

[@DevTheory]

Je n'arrive pas à savoir si c'est ironique ou non ! 😅 J'ai précisé qu'il s'agissait d'un template Nuxt si jamais