JavaScript Reactivity Explained Visually

If you've heard of Angular, React, or Vue you might have heard about JavaScript reactivity. By understanding what reactivity is and how it works in this video, you can level up your development skills and more effectively use these frameworks.

0:00 A Simple Vue App
3:41 Dependency class
5:20 Console
5:54 Encapsulate code
7:00 Console
7:24 Dep instance
11:45 Combining both ideas
13:07 Running the code
14:27 Jumping into Vue
15:05 Review

[tkdevlop]

It's make sense finally it make sense

[danielgilleland]

The sheer quality of this video is wonderful!

I have to ask, how long did it take you to make this video? Viewers would better appreciate the huge effort that goes into a 15 minute video.

[longingheart]

Thanks for those videos sir, I highly appreciate your work. Vue is just phenomenal, I work with laravel mostly and wanted to provide some reactivity to my front end. React and angular has just turned me off, where as vue "clicked" in my brain straight away

[dileepmaurya]

finally, I got someone who explained reactivity ecosystem in simple term

[daltonyon]

Everyone that use vue must watch this class!

[focusxero]

I really appreciate the effort that went into making these really awesome videos. It's hard to find quality content that explains the core concept of like this. Thanks again.

[fangao]

This is just amazing, very clearly explained, layout of the code, progressive layers, animations, highlights…everything, I can for sure be a better programmer if I learn new things with this kind of quality tutorials. Would I know is there any other videos like this or do you have a channel ? Thanks a lot !

[gagx]

Thank you! I'm reading vue source code recently and this video helps a lot!

[atmospheric_b]

That animation and the quality of explanation is god like. Thanks!

[hamzabenkhaldoun]

Thanks for the video. It explains some things but still having the dep class rely on a global target being there is kinda counter intuitive. Maybe pass the target as a param to the dep method, so i's clearer and you don't have to make those target = () => { ... } ; dep.depend();

[andresalcaino]

Advanced componentes, a great course for learning about reactivity

[anoopisaac]

Awesome elegant explanation.Good work sir

[harshskulshrestha]

This is an amazing explanation, thank you!
I have a followup question on this: Does this reactivity apply to objects as well? From what I know, vue is able to detect changes within an object's property and re-renders the component. I was wondering how? The setter/getter of the object wouldn't be called, as we aren't changing the object's reference.

[JurajPecháč]

in video:
record: save this code inside the target
I think correct is:
record: save this code inside the storage

[xamael]

It's a really good video thank you sir

[heybudi_]

Damn, pretty good explanation!! Subscribedddd!! Thank you!! ❤️❤️❤️❤️

[bohdanafanasyev]

Amazingly explained, thank you good sir :)

[rthangam]

Awesome thanks for the detailed explanation

[JurajPecháč]

What Vue.js do under the hood? Why can we write only this.prop and not this.data.prop? Can you explain it in video?

[ortson]

so i looked at the finished example 13:08 for a long time and i have a question. isn't the watcher function redundant?