Wouldnt be a better analogy that a video viewer (or its account) is the subject, and the youtube channels are the observers, firing Videos (or notifications) at you, because you - the subject - subcribed to the Observer/Channel?
What was demonstrated so nicely in this video is the pubsub pattern. It resembles a lot to the observer pattern and these two are used interchangeably most of the time. There is a subtle difference between them though: pubsub subscribers are not aware of the subject whereas observer subscribers have a reference to the subject
This was a great explanation of how an event listening system would work in its essence. I'm not sure if it's a good practice to override the prototype object like you did, but rather extend it.
@@DevSage You're doing a great job man. I just searched for JS design patterns and found your videos. I immediately subscribed! Keep up the good work. This pattern specifically is extremely powerful in JS frontend applications, where you need to broadcast messages and notify other parts of the application about an event. It's great for communication between separate software modules. State management in the modern frontend frameworks adopt this pattern heavily.
I was wondering whether I can use the observer pattern to replace a monkey patch for a drop handler. Let me explain: The host program has a foldertree._onDrop() . At the moment, i am replacing that with my own function, which executes some code, reading the parameters, (if a condition is fulfilled). Afterwards it calls the original _onDrop. So my objective is to execute my own code before a built in function is called. Monkey patching always felt a little bit heavy handed, so can it be done with observers?
One little thing: your code allows you to push the same observer multiple times and it will fire it up multiple times. It should have check for having observer in array before push
Instead of using if statement in your filter just use it like this: arr = arr.filter( el => el !== condition) ; if el is not equal condition it will return element, else won't return anything.
@@DevSage That is not verbose it is misleading. The filter takes predicate functions and looks at the return !!value based on it true/false. So using it like a map gives misleading concepts of the filter function. And works only because !!fn === true and !!undefined (no return) === false.
@@DevSage OK. HI again. Array.prototype.filter() takes a predicate as a callback function. Yes? That is why the function that you wrote works but is misleading. Predicate function should clearly return bool value.
very nice channel.....just little comment to this tut: everyvere you are using arrow function..you dont have to wright: ex: foreach(fn => {return ..} instead of foreach(fn => fn() ) and thats it :-) always reasonable make it shortly unless otherwise explicitly required .
Great Video!!! I was watching a Traversy Media tutorial and was struggling. I had to rewatch yours four times to break it all down. subscribe: Adds functions to the array so that it may be used. unsubscribe: Removes functions from the array to discontinue use. fire: Loops the array and calls all the functions inside.
@@DevSage on my way for watching it. If i understand it i will finally start my work as a js coder. I wish js will not cause me death before thaaat moment 😂😂😂
Well, .pop() just removes the last element in the array. So unless you're 100% POSITIVE that the last observer in your array is the observer you need to remove, I would just stick to using filter.
Just a thought but couldn't observers be a WeakSet instead? So no need for filtering. A quick test const a = (x) => x const b = (y) => y const c = (z) => z const observers = new WeakSet() const subscribe = fn => observers.add(fn) const unsubscribe = fn => observers.delete(fn) ;[a,b,c].forEach(subscribe) unsubscribe(b) console.dir(observers) // [0](z) => z [1](x) => x edit: order maybe an issue
Nice video but this es5 syntax is ticking me, why not just use classes ? Neither in this case a Set for subscribers ? No for of but a .foreach, and why would you use fn.call() instead of fn() ? Definitly this syntax is a bit confusing :/
first its an exact copied example from udemy course by Traversy called 'Modern JavaScript From The Beginning'. Second, its a bad example since basically its only showing a '.call' usage, there is no automatic notifier happing here. Observer should notify when a change is happening while here there is no implementation of that.
Inside the unsubscribe function this.observers.filter(fn => fn !== fnToRemove); is enough. Luckily the code in the video is working because JS considers function as a truthy value.
📑 Blog Post: www.explainedsimply.io/observer-design-pattern-explained/
🤖 GitHub: github.com/pkellz/devsage/blob/master/DesignPatterns/Observer.js
📗"Design Patterns Explained Simply" Ebook: payhip.com/b/MLtJ
💙 Twitter: twitter.com/realDevSage
📙 Ebooks: payhip.com/devsage
💥 Discord: discord.gg/BP8wPv6raA
im not gonna lie..you are the best teacher I've ever had, you literally talk to me like i'm 5 years old. thank you.
No problem!
Are you a subject? because as an observer, I just subscribed!
Hahah that's pretty good. Welcome!
Wouldnt be a better analogy that a video viewer (or its account) is the subject, and the youtube channels are the observers, firing Videos (or notifications) at you, because you - the subject - subcribed to the Observer/Channel?
@@duechilidance5388 Yeah don't overthink it
@@alimertc 🤔🤓
@@duechilidance5388 ooof :)
Note: Instead of using fn.call(), you could also just use fn(). They are the same!
+ .call() makes sense only if you want to provide call context
This is by far the best explanation I could find on the subject. Great job with this video
Thanks!
You're a talented teacher, DevSage. Thanks.
I appreciate it! 😁
What was demonstrated so nicely in this video is the pubsub pattern. It resembles a lot to the observer pattern and these two are used interchangeably most of the time. There is a subtle difference between them though: pubsub subscribers are not aware of the subject whereas observer subscribers have a reference to the subject
Can you point me with some example code to this difference. I'm a little bit confused.
You've just got a new subscriber. Great lesson. Keep the good job!
You are the only one who has nicely explain these patterns. Good Work!
I finally understood what is going on ,keeeeep goooing man.
The best explanation I seen on UA-cam. Thanks a lot!
Glad it was helpful!
Thanks for you "Observations"!
Clear explanation with simple examples. Thank you!
This channel something different
Appreciate ya
This was a great explanation of how an event listening system would work in its essence.
I'm not sure if it's a good practice to override the prototype object like you did, but rather extend it.
Thanks. I agree with you. I should have done "Subject.prototype.subscribe = function()..." and the same with the other methods
@@DevSage You're doing a great job man. I just searched for JS design patterns and found your videos. I immediately subscribed! Keep up the good work.
This pattern specifically is extremely powerful in JS frontend applications, where you need to broadcast messages and notify other parts of the application about an event. It's great for communication between separate software modules. State management in the modern frontend frameworks adopt this pattern heavily.
@@DevSage you could also use: Subject.prototype = {
...Subject.prototype,
}
like how you keep it concise and simple ty
No problem!
Curly braces on new lines. Prototypal over Pseudoclassical. Based.
One of the best explanations! Thank you.
Thanks for such a simple and amazing explanation👍
subbed, i already love this channel and ive only seen 3 vids
Appreciate you
Very clear explanation, thank you!
No problem!
Very Nicely Explained!
Thanks!
Very, very good explanation! Keep going man!
Thanks Dev
Why do you need to call prototype to add methods?
You made this so simple, thanks.
Glad it helped!
Finally understood this pattern. Thank you very much!
You're welcome friend
I love these videos man! Thanks a lot!
Very good video for observer design pattern. Thank you.
You are welcome
I was wondering whether I can use the observer pattern to replace a monkey patch for a drop handler. Let me explain: The host program has a foldertree._onDrop() . At the moment, i am replacing that with my own function, which executes some code, reading the parameters, (if a condition is fulfilled). Afterwards it calls the original _onDrop. So my objective is to execute my own code before a built in function is called. Monkey patching always felt a little bit heavy handed, so can it be done with observers?
One little thing: your code allows you to push the same observer multiple times and it will fire it up multiple times.
It should have check for having observer in array before push
+ this video doesn't explain how to pass data to observers
@@evgenylevchenya8734 Good observations
What's the difference between doing this and adding an event listener / firing an event in JS? I didn't quite get it.
Very Well Explained video. But Can you also elaborate where Can I use this pattern in real world cases?
“Girl you must be a subject because I’m observing all your actions”
I became your big fan man. You are just a masterpiece.
good explanation. thank you very much
You're welcome!
Liked and subscribed, good stuff man!
Instead of using if statement in your filter just use it like this:
arr = arr.filter( el => el !== condition) ;
if el is not equal condition it will return element, else won't return anything.
You are correct. I thought it was wise to be slightly more verbose than usual because it's possible that some beginners may not understand.
@@DevSage That is not verbose it is misleading. The filter takes predicate functions and looks at the return !!value based on it true/false. So using it like a map gives misleading concepts of the filter function. And works only because !!fn === true and !!undefined (no return) === false.
@@DarkNivo I'm afraid I don't understand what you mean
@@DevSage OK. HI again.
Array.prototype.filter() takes a predicate as a callback function. Yes? That is why the function that you wrote works but is misleading. Predicate function should clearly return bool value.
@@DarkNivo Yes, now I see what you are saying
Clean explanation, Thanks
Greetings from Philippines
very nice channel.....just little comment to this tut: everyvere you are using arrow function..you dont have to wright: ex: foreach(fn => {return ..} instead of foreach(fn => fn() ) and thats it :-) always reasonable make it shortly unless otherwise explicitly required .
Nicely done, thank you.
Thanks for watching!
Greetings from Egypt
Greetings!
Great Video!!! I was watching a Traversy Media tutorial and was struggling. I had to rewatch yours four times to break it all down.
subscribe: Adds functions to the array so that it may be used.
unsubscribe: Removes functions from the array to discontinue use.
fire: Loops the array and calls all the functions inside.
Right on the money
Great video man!
Greetings from Philippines!
Greetings!
I wish you are explaining other patterns with the same level.
I have more design pattern videos on my channel
@@DevSage on my way for watching it.
If i understand it i will finally start my work as a js coder. I wish js will not cause me death before thaaat moment 😂😂😂
Чувак спасибо большое! Ты крутой!
thank you
Thank you for this video man!
No problem!
@@DevSage I tried to implement this in ES6 Class. It kind of taught me how React state and render observer pattern works: playcode.io/511599
Thanks
No problem!
thank you.
You're welcome!
Why dont you use ES6 classes?
thats the fun part, Im making his examples with newer classes
can we use pop instead of filter ?
Well, .pop() just removes the last element in the array. So unless you're 100% POSITIVE that the last observer in your array is the observer you need to remove, I would just stick to using filter.
@@DevSage yeah, really :D
this was a silly question :)
keep at it
great explanation bro, thanks for sharing
+1 subscribed
💪💪
Thank you
Just a thought but couldn't observers be a WeakSet instead? So no need for filtering. A quick test
const a = (x) => x
const b = (y) => y
const c = (z) => z
const observers = new WeakSet()
const subscribe = fn => observers.add(fn)
const unsubscribe = fn => observers.delete(fn)
;[a,b,c].forEach(subscribe)
unsubscribe(b)
console.dir(observers) // [0](z) => z [1](x) => x
edit: order maybe an issue
what does it observe ? :D
Nice video but this es5 syntax is ticking me, why not just use classes ? Neither in this case a Set for subscribers ? No for of but a .foreach, and why would you use fn.call() instead of fn() ? Definitly this syntax is a bit confusing :/
very nice :D
subs up 👍
you are a god!!!!
No
3:12 Filter doesn't work like that, it should return a boolean value, like this: this.observers.filter(fn => fn !== fnToRemove)
i dont understand
Which part?
DevSage I don’t understand the whole structure like can you give a real worl example because you gave a generic example
first its an exact copied example from udemy course by Traversy called 'Modern JavaScript From The Beginning'. Second, its a bad example since basically its only showing a '.call' usage, there is no automatic notifier happing here. Observer should notify when a change is happening while here there is no implementation of that.
I guess you're entitled to your opinion 🤷🏾♂️
Tiimmy Turner
It's same like a PubSub pattern
Helpful, thanks !
Inside the unsubscribe function this.observers.filter(fn => fn !== fnToRemove); is enough. Luckily the code in the video is working because JS considers function as a truthy value.
Correct