Les signaux, une nouvelle primitive réactive

Рет қаралды 14,990

Күн бұрын

Article ► grafikart.fr/tutoriels/signal...
Aujourd’hui, je vous propose de découvrir ensemble le principe des signaux, une nouvelle primitive qui permet de gérer la réactivité dans nos applications.
00:00 Découverte des signaux
07:10 Exemple d'utilisation
13:00 Les autres librairies
14:03 Utilisations des signaux dans React / Preact
20:56 Les signaux dans le JSX de Preact
24:00 Les limitations
29:02 Conclusion
Les signaux ont fait leur apparition dans des bibliothèques telles que [SolidJS](www.solidjs.com/tutorial/intr...[Preact](preactjs.com/guide/v10/signal... plus récemment dans [Angular](angular.io/guide/signals). Mais qu’est-ce que c’est exactement et pourquoi est-ce intéressant pour la conception de nos composants ?
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat

Пікірлер: 23

@Voltra_ 7 ай бұрын

Dans le principe ça ressemble un petit peu au computed (et plus globalement au système de réactivité) de Vue 2, et beaucoup au système de réactivité de Vue 3. Dans la même veine, le système de réactivité de Vue est utilisable à part. Personnellement je m'intéressais pas mal à Oby. C'est intéressant de voir cette évolution convergente dans les systèmes de réactivités

@romero1745 7 ай бұрын

Merci pour la découverte. Comme d'habitude tes videos son très instructive :)

@oOMikyStarOo 7 ай бұрын

Je wrap déjà toutes mes valeurs dérivées de state dans des useMemo en React (peut-être mauvaise pratique), donc ça me dérangerais pas de tout mettre dans des computed Super vidéo ! J'ai hâte de voir son adoption plus large dans les libs

@DSOlaLG 7 ай бұрын

j'ai eu une fausse joie, j'ai cru que c'était intégré a js nativement x) Je vais enfin arréter de faire des eventemitter et observer a gogo

@dadylle 7 ай бұрын

instructive

@auredud461 7 ай бұрын

Les signaux sont un super outil mais je me demande s'ils ne vont pas à l'encontre de la philosophie de rendu de React (VDom). Et du coup, si on souhaite de mode de fonctionnement ne vaut il pas mieux utiliser SolidJs ? Même si les exemples sont claires et intéressants j'ai du mal à imaginer un projet multi-développeurs utilisant hooks et signaux de manière raisonnée.

@yam-kingdev598 7 ай бұрын

j’pense que cette manier de faire vas changer beaucoup de chose dans react/preact

@martinlionel7487 7 ай бұрын

On dirait les stores de svelte js

@ghostlexly 7 ай бұрын

Est-ce que c'est plus conseillé/mieux d'utiliser useState ou les signals ?

@elliot_yoyo 7 ай бұрын

Il me semble que vue possède une lib interne pour gérer la réactivité (et utilise par d'autres frameworks) pour le même usage

@nadjinmalade8738 7 ай бұрын

OUI.

@chambaderaphael8946 7 ай бұрын

import { shallowRef, triggerRef } from 'vue' export function createSignal(value, options) { const r = shallowRef(value) const get = () => r.value const set = (v) => { r.value = typeof v === 'function' ? v(r.value) : v if (options?.equals === false) triggerRef(r) } return [get, set] } Pour le fun 😅

@MrJohAA 7 ай бұрын

Alors r, v ne sont pas des noms de variables/paramètres valides à mon sens.

@Vin974 7 ай бұрын

Ca ressemble pas mal au fonctionnement de VueJs. Toutes les librairies vont finir par se ressembler.

@auredud461 7 ай бұрын

Ce qui serait plutôt un bon signe de compréhension des besoins de la part des développeurs d'outils de développement

@nayte91350 7 ай бұрын

Oui clairement il faut prendre ça comme une bonne nouvelle !

@MrJohAA 7 ай бұрын

Plutôt d'accord. Quand les choses se ressemblent trop les petites subtilités deviennent difficile à anticiper/percevoir. Le monde du web n'évolue plus il se duplique et ça devient le gros merdier Trop de développeurs sur le marché, ça devient n'importe quoi

@MrJohAA 7 ай бұрын

Ca ressemble beaucoup à tout ce que fait Vue 3.

@florentallain6051 7 ай бұрын

Quelle différence avec `computed()` / `watchEffect()` au sein de VueJS ? (je n'ai pas encore tout regardé :p)

@grafikart 7 ай бұрын

VueJS utilise une approche similaire aux signaux. Dans le cas de VueJS watchEffect(() => {}, {immediate: true}) est l'équivalent du effect() montré dans cette vidéo.

@MrJohAA 7 ай бұрын

@@grafikart Toi qui disais ne plus aimer Vue t'es bien servi 😅 Après ce n'est pas du JS natif de ce que j'ai compris (C'est plutôt watch() qui prend un objet immediate en option, watchEffect est de base réactif dès sa création ;))