J’ai enfin compris à quoi servent les Signals dans Angular (en participant à une conférence privée)

👨🏻‍💻 Démarrer votre carrière de Développeur Professionnel :
www.angularsenior.fr/apply
***
Cela fait plusieurs semaines que je suis inquiet par rapport à mon expertise SENIOR, qui est Angular.
En effet, je suis incapable de comprendre pourquoi nous avons la nouvelle API des Signals dans le Framework...
Et c'est plutôt grave !
J'ai plus de chance de passer pour un guignol qu'un expert,
si je ne sais même pas quel est le rôle de tel ou tel élément dans Angular.
Heureusement, j'ai eu la chance de participer à une conférence privée récemment, grâce à mon employeur.
Le conférencier, un développeur très compétent, nous a expliqué exactement quel serait l'avenir d'Angular avec l'API des Signals.
Et on a du boulot en tant que développeur Angular professionnel !
Bon visionnage,
Simon.
***
- Site de mon employeur AViSTO : www.avisto.com
- Site de la conférence (Le SnowCodeCamp) : snowcamp.io
- Compte Twitter/X de Sylvain Dedieu : / dedieus
- Lien vers la conférence : snowcamp2024.sched.com/event/...
- Documentation officielle d'Angular sur les Signals : angular.dev/guide/signals
00:00 : Introduction
00:14 : Une conférence privée dédiée aux développeurs professionnels...
00:48 : Le problème des Signals dans Angular
01:47 : Présentation du speaker de la conférence
02:04 : Qu'est-ce que la Réactivité ?
04:02 : Réactivité n°1 : "Value-Based"
07:44 : Réactivité n°2 : "Observable-Based"
10:57 : Réactivité n°3 : "Signal-Based"
12:30 : Le composant Angular du futur
13:40 : Schéma de la Réactivité dans une application Angular
14:25 : Ce que Vous devez faire AUJOURD'HUI en tant que développeur Angular professionnel
14:48 : La Newsletter du Code Senior

[@afrique_cr9563]

J'apprends beaucoup grâce à toi Simon, salut depuis le Cameroun

[@codeursenior]

Super, merci pour ton message. J'espère vous proposer d'autres vidéo prochainement, Simon.

[@dessinfacile8960]

Moi aussi depuis le Cameroun t'es le meilleur 😊...

[@codeursenior]

@@dessinfacile8960 💪

[@simonbullado]

C'est génial !!!

[@codeursenior]

Je suis d'accord avec vous !

[@GankMe57]

Je ne comprends pas trop le point du subscribe/unsubscribe pour le cas du count. Tout ça est géré par le pipe async. Imaginons qu'on ait un gros traitement avec plusieurs opérateurs RxJS (switchmap, map, shareReplay), à aucun moment il est nécessaire de subscribe ou unsubscribe à la main.

[@codeursenior]

Hello, effectivement la vidéo n'est pas très claire sur ce sujet. Ce que souhaitait expliquer, c'est que pour développer un moteur de réactivité basé sur les Observables, c'est une vraie galère.

[@WebCodeSolutions-ob3pf]

Merci, c'était très intéressant.

[@codeursenior]

Salut, merci pour ton retour. Bon code, Simon.

[@SpaceisFunnySF]

Un grand merci pour la vidéo! J’avais pas encore pris le temps de creuser le sujet depuis la release. Faut s’y mettre 😅

[@codeursenior]

Et oui, l'heure approche à grands pas ! Le plus dur sera les montées de version dans un premier temps, en passant les dépendances à full-IVY.

[@gemini9775]

interessant merci Simon ^^

[@codeursenior]

Merci pour ton retour, bon code. Simon.

[@marcfoletto5682]

super vidéo merci

[@codeursenior]

Au top, bon code à vous.

[@alainzinhonambinintsoa2914]

Merci Simon

[@codeursenior]

Avec plaisir, bon code !

[@Devs51]

Merci bien expliqué merci

[@codeursenior]

Au top, merci ! Bon code, Simon

[@aimenjerbi8406]

top du top merci

[@codeursenior]

Merci pour ton excellent commentaire. Bon code !

[@maxenceyrowah4261]

Merci beaucoup senior

[@codeursenior]

Vous pouvez m'appeler "codeur seigneur" également.

[@springbootfr5825]

Merci beaucoup, est-il possible d'aoir un jour un tutoriel basé sur les signals?

[@codeursenior]

Le prochain gros tutoriel de la chaîne sur Angular 17 inclura les Signals par défaut. 👍

[@connecteilconnekt5625]

Merci beaucoup

[@codeursenior]

💪

[@landryonana7123]

Bonjour et merci beaucoup pour cette vidéo très claire pour moi; S'il vous plait vous pouvez nous faire une petit app très présentative dans ce sens ?

[@codeursenior]

Salut, merci pour ton retour. Je n’ai pas prévu de faire une application complète sur le sujet. Par contre c’est sûr que d’autres vidéos devront être faites sur le sujet des Signals, notamment leur intégration avec les formulaires ou RxJs. Bon code !

[@massinissachaouchi4595]

Bonjour à tous, donc si j'ai bien compris à pars la fonction computed() qui permet de créer facilement des side effect. Les signals n'apportent qu'un gain de performance. Avec les signals nous ne sommes pas capable en tant que développeur de créer des choses plus puissances mais juste les même choses qu'avant mais en plus performant ?

[@codeursenior]

Salut, non, c'est la méthode Effect qui permet de créer des side effects. Computed sert à calculer un état dérivé à partir d'autres Signals. Et oui, nous pouvons recréer la même chose qu'avec la librairie RxJS, mais avec un gain de performance est un gain de temps et de maintenabilité aussi.

[@TTxR2]

Ok, on le savait déjà. Mais *comment* les utiliser ? Comment tirer parti au maximum de leurs capacités ? Quel design pattern adopter ? Quel data flow adopter et notamment la frontière entre rxjs et les signaux ? Leur utilité pour collections ? La seule chose qui est rapidement montrée c'est un input signal. Mais ça ne fait rien de plus qu'un input classique au sein du composant. Et ce qui est bound à l'input c'est quoi ? Un autre signal ?? La valeur d'un signal ? Bref, il aurait été intéressant d'avoir la réponse à la question posée dans le titre de cette vidéo. Là, après cette longue vidéo, on reste très largement sur notre faim 😢

[@codeursenior]

La vidéo n'est pas technique, car c'est un second point. La première question, c'est POURQUOI/Quel problème ça résout. Les Signals sont là pour permettre de mettre en place des composants avec une réactivité "Signal Based" à l'avenir dans Angular. Une autre vidéo technique sera prévue dans le prochain tutoriel Angular 17, où on mettra ça en place.

[@TTxR2]

@@codeursenior Excellent ! Ce serait bien de faire un exemple concret avec un arbre de composants, une collection, des appels WS, etc.. un projet un peu étoffé pour voir où laisser rxjs et où mettre des signaux. La doc d'Angular est complètement lacunaire sur les use cases où les utiliser. On se contente d'improviser. Ont-ils parlé de leur utilisation concrète dans cette fameuse conférence ?

[@dienysimon6557]

@@TTxR2 Hello, entièrement d'accord. Ou en est l'état de l'art avec l'apparition des Signaux ? Notamment la cohabitation RxJS et Signals... Aucun mention dans la conférence sur les futures applications industrielles de tout ça.

[@aboubakardosso3481]

Bonjour M. SIMON , j'aimerais moi savoir si les signaux peuvent etre utiliser pour gerer la réactivité de notre application au lieu d'utiliser ngrx

[@codeursenior]

Tout à fait, c’est d’ailleurs un de leurs rôle détourné, et il y a une librairie officielledont le rôle va être de faire du state management avec les signals : ngrx signal store. Bon code !

[@aboubakardosso3481]

@@codeursenior d'accord merci infiniment M.SIMON ...

[@aboubakardosso3481]

la bibliothèque ngrx signal store est elle deja disponible ?

[@codeursenior]

@@aboubakardosso3481 Oui, mais toujours en Developer Preview.

[@naspy971]

j'ai commencé a les utiliser mais pour remplacer les properties en pipe async, mais du coup, le but c'est de créer toute ses propriétés en signals ?

[@codeursenior]

Hello, je suis entrain de me renseigner sur le sujet. Je vous recommande de regarder du côté des Signal Based Component. Dans ce cas, oui toutes les propriétés seront des signals. 👍

[@ascensionspirituelle7287]

Deja on va essayer de passer a la version 16 d'Angular 😊

[@codeursenior]

Hello, effectivement Angular 16 impose IVY, ce qui nécessite souvent un gros effort de montée de version des dépendances. Bon courage !

[@Creativeetea]

Les gens qui sont sur un projet angular < 13, levez la main ✋

[@ascensionspirituelle7287]

@@codeursenior Le boss décide qu'au lieu de passer par la 16, on passerait direct a la 17 une fois qu'elle sera stable. Je crois que la version actuelle est la 12. Autant dire que ça va pas être une tache simple ✋🏼🧔🏼‍♂️🤚🏼

[@codeursenior]

@@ascensionspirituelle7287 Pro tips : Monter qu'une version de major à la fois. Donc viser la 13. 👍

[@codeursenior]

@@CreativeeteaHello, la montée jusqu'à la version 15 se fait. On a chiffré une journée par montée de version jusque-là. Le passage à la version 16 est plus costaud, si vous avez de vielles dépendances il faut les passer sur Ivy. Cela nous a couté 1 mois de notre côté à titre d'exemple. Bon courage !

[@fredV35]

On dit les signaux ! 😂 Dsl 🥲

[@codeursenior]

Les Signals ou les Signaux ? Le débat reste ouvert.

[@fredV35]

@@codeursenior Si on parle de l'API, Signals me semble plus cohérent, mais pour le concept en lui même, je dirais les signaux

[@codeursenior]

@@fredV35 Ok, pourquoi pas. Merci pour la précision !

[@R.e.n.e]

Ça dépend surtout si on veut utiliser le thermes français ou anglais. C'est comme library vs bibliothèque.

[@codeursenior]

@@R.e.n.e Ma question est de savoir si "Signal" est vraiment traduisible. Comme le terme "Observer", je n'ai jamais entendu dire "Il faut modifier le code de ton Observateur".

[@serge_amon]

Finalement JavaScript est une école.😅

[@codeursenior]

Il était temps !