Тёмный

Understanding Signals 

Academind
Подписаться 911 тыс.
Просмотров 29 тыс.
50% 1

Signals became all the rage in 2023 - SolidJS made them popular, Angular is adopting them, Svelte introduces them ("runes") and Vue actually already had a Signal-like feature called "refs".
But what's the advantage of Signals? And how do they work internally?
🖥️ Official Website & Courses
academind.com/courses/
💬 Academind Community
academind.com/community
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
/ maximilian-schwarzmueller
/ manuel-lorenz-808b5185
/ academind-gmbh
/ academind-pro
/ academind_real

Опубликовано:

 

20 фев 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@riongull
@riongull 3 месяца назад
Great explanation. It would help to show it with an example of updating the DOM - the environment where most people would use this.
@hansschenker
@hansschenker 3 месяца назад
you can just call a count signal in your html with: count()
@aardvarkgroup2300
@aardvarkgroup2300 Месяц назад
This was a great, short dive into how Signals operate.I enjoy your courses on Udemy more than any other courses I purchased or watched on RU-vid. Your explanation of concepts make all the pieces of the "programming puzzle" fit together. It took 4 Java programming books in the 90s to understand the concepts of that language until I got the right one. Thank you for producing these courses. It makes learning new languages easier i.e. Angular, Typescript. I am waiting patiently for the Angular Signals course.....
@OussemaSahbeni
@OussemaSahbeni 3 месяца назад
when are you going to update the angular course to angular v17 ?
@choanlpoto
@choanlpoto 3 месяца назад
Dead tech
@OussemaSahbeni
@OussemaSahbeni 3 месяца назад
@@choanlpotomaybe, but it gets the job done so who cares
@gordonfreimann
@gordonfreimann 3 месяца назад
you wont find a company that fully migrated to v17. you need know the good old angular first. if you know it well enough you dont need a course for v17 anyway. just read the docs
@academind
@academind 3 месяца назад
Working on it, will be a great update. But got no time / release estimate yet and won't rush it.
@christianm4906
@christianm4906 3 месяца назад
This idea of signals reminds me of the observer design pattern, a pattern that has been around since before the web became popular. Other GUI libraries for native applications, such as the Qt framework, have successfully used this pattern. That being said, I still don't understand why this wasn't the original approach from the beginning of React.js. I also don't understand why such a bad library like React has become so popular. 😒
@AngularUniversity
@AngularUniversity 3 месяца назад
Qwik also uses them, but we hardly see them, it's all via proxies. Angular already has a Signals API, but they are not yet fully plugged in to change detection. 👍They do already work with OnPush though, if we consume a signal in a template, a new emitted value will mark the component as dirty.
@hansschenker
@hansschenker 3 месяца назад
React Hooks were a great inspiration for Vue 3 reactivity system (Evan Vue). Vue uses the Javascript Proxy class to track data changes. Unlike React where after each data change the UI rerenders in Vue 3 in the setup the dependencies are set with ref or reactive the Ui renderes only once and the only the html element wich displays the data change will be rerendered.
@avwie132
@avwie132 3 месяца назад
It’s Evan You.
@woife0705
@woife0705 3 месяца назад
Such a reimplementation is really helpful in understanding the concept! I still dont get the difference between other "pubish-subscriber" patterns in code (Like Observables).
@hansschenker
@hansschenker 3 месяца назад
Signals are a combination of React hooks (return an array of get and set functio) and the Subject - Observer pattern, where the the Subject is the Signal and the subscribers in the signal are the the observers
@woife0705
@woife0705 3 месяца назад
@@hansschenker I meant "subject-observer" thank you for the clarification! But my question was not directly answered. Since there exist many implementations of this pattern (Max mentioned a few in the video), Signals are simply one of these implementations. But I assume a lightweight one, which is optimized for updating the view. In contrast to RxJS observables. Can we agree on that?
@avwie132
@avwie132 3 месяца назад
Under the hood everything is a subscriber pattern, albeit with some automatic subscription and unsubscribtion based on mounting and unmounting of some composition nodes. Using some observable lib and things like use effect you can easily create something similar. IMHO the signals implementations I see all use some sort of global state. The web dev world might be interested to see how Google managed state with their Compose library. Especially the Snapshot system.
@nguyenvietquang2065
@nguyenvietquang2065 3 месяца назад
@@avwie132 i took a time understanding Jetpack Compose recently how it works under the wood . I come to conclusion that it is same as React. They both compare the virtual DOM or UI tree here in Compose, then efficientcy update nodes that requires re-render(recompose). But, compose optimizing recompose is a major considerable problem, requires us to really understand to be able to optimize it. I really think Signal with observer in FE world is real awesome and why there is not a framework here yet for the Android world
@avwie132
@avwie132 3 месяца назад
@@nguyenvietquang2065 nice reply! However, it is possible to not use recompose. The snapshot system is independent of the recomposer. They use the snapshot system to trigger the recomposition, but way more efficiently then React does. Things like donut hole skipping and the likes.
@zygas15
@zygas15 3 месяца назад
Thank you! The topic explained in very easy way :)
@sanitherayil
@sanitherayil 3 месяца назад
@grafenau_digital_solutions
@grafenau_digital_solutions 3 месяца назад
Finally ❤
@dmitryi4483
@dmitryi4483 3 месяца назад
Wouldn’t this infinitely grow subscribers array with every read?
@TizzyAPunkt
@TizzyAPunkt 3 месяца назад
Actually that’s what I also think.
@levicoderman
@levicoderman 2 месяца назад
He's just doing it for simplicity, but the complete implementation includes cleanup logic.
@Warrigt
@Warrigt 3 месяца назад
every framework just having to re-name an existing system. Runes?? really?
@levicoderman
@levicoderman 3 месяца назад
They are not renaming signals lol. Runes are markers/symbols that indicate to the compiler that something is reactive and that reactivity is powered by signals.
@Warrigt
@Warrigt 3 месяца назад
@@levicoderman "Runes are markers/symbols"... Almost like it's another name for the same thing..
@uchennaofoma4624
@uchennaofoma4624 Месяц назад
amazing
@user-bm6xs6ih5n
@user-bm6xs6ih5n Месяц назад
I feel the example could have been better. Kinda confusing. When you first define function read(), you also subscribe... then I would called it readAndSubscribe. Calling it "read" alone is a poor naming choice in context trying to explain the logic, IMO. And I would also not call it signals pattern, but rather classic observer pattern in that case.
@hansschenker
@hansschenker 3 месяца назад
Signals might become a web standard. Signals are in the web standardization process. That said Rxjs Observables which are also in the web standardization process will probably never become a web standard.
@woife0705
@woife0705 3 месяца назад
Can you give more insight on this statement? I yet dont see why the one is necessarily better than the other. They both seem to have their purpose in the area they are used.
@hansschenker
@hansschenker 3 месяца назад
@@woife0705 It is not a question ob being better than something else, it is just an easy way to track simple data changes. There are multiple ways to do state change tracking , Signals is one way todo it
@woife0705
@woife0705 3 месяца назад
@@hansschenkerok then let be more clear: Why do you think Signals will become a web standard at some point and Observables propably not?
@hansschenker
@hansschenker 3 месяца назад
@@woife0705 I was watching a youtube from Evan Vue (creator of Vue) he said he watches web standards very close and that he learned that Signals are on the way to be standardized, Observables are since about 2018 proposed as a becoming a standard, but nothing moves here anymore.
@hamdiaminehkh
@hamdiaminehkh 3 месяца назад
it's useState hook of REACT.
@o_glethorpe
@o_glethorpe 3 месяца назад
Yes, without all that garbage around
@codyrap95
@codyrap95 Месяц назад
yes, but you get 1ms of performance improvement at the cost of having uglier code 😂 how can you not want that? Why have count as a normal variable when you can say `count()+1`?
@denisecknauer4627
@denisecknauer4627 3 месяца назад
I thought that Preact Signals made them popular :D P.S. Are you planning to add Signals section to your React course on Udemy? :)
@negenalamjiyn6637
@negenalamjiyn6637 3 месяца назад
???? There are signals in react???
@denisecknauer4627
@denisecknauer4627 3 месяца назад
@@negenalamjiyn6637 Preact, not React - it's a lightweight alternative to React :) however their signals can be used in any framework (including React)
@FaizanAnwerAli
@FaizanAnwerAli 3 месяца назад
@@negenalamjiyn6637 signals are everywhere now
@hansschenker
@hansschenker 3 месяца назад
Ract will never have Signals. Signal like behavior in React is realized with Hooks and useEffect!
@lucasterable
@lucasterable 3 месяца назад
Syntax hideosity and convolution for performance's sake.
@kiana5066
@kiana5066 3 месяца назад
so many names for the same concept... they're all just atoms man: we restrict ourselves to atomic operations only so we can has thread-safe mutable variables (aka state management) which opens the way to "subscriptions" and reactive UI design also, wasn't svelte's elevator pitch something like "sure it's the least mature framework, but look, it does away with the whole state management BS, you can treat simple variables like they're atoms..."? now it has the same syntax as the rest, but they're called "incantations" now! and when you de-ref them, you're "casting a spell"!
@miro.s
@miro.s 3 месяца назад
You should learn how to pause your speech. One sentence is never read throughout several minutes. Really exhausting!
@gofudgeyourselves9024
@gofudgeyourselves9024 3 месяца назад
Red green yellow
Далее
Are we going back to PHP with fullstack JavaScript?
9:57
100+ Docker Concepts you Need to Know
8:28
Просмотров 775 тыс.
iPhone or Android?😂📱🔥@milanaroller
00:13
Просмотров 2,8 млн
20 Essential VS Code Extensions In 2024
14:26
Просмотров 127 тыс.
My opinion on Angular 18 & React 19
9:47
Просмотров 31 тыс.
Side effects in functional programming
3:57
You might not need useState()!
8:31
Просмотров 36 тыс.
JavaScript Visualized - Promise Execution
8:42
Просмотров 116 тыс.
Learn TypeScript Generics In 13 Minutes
12:52
Просмотров 210 тыс.
This UI component library is mind-blowing
8:23
Просмотров 557 тыс.
Learn React Hooks: useEffect - Simply Explained!
14:07
Просмотров 108 тыс.
Golang Tutorial : Go Full Course
3:49:15
Просмотров 247 тыс.
What’s new in Angular v18
20:08
Просмотров 77 тыс.