Observer (TypeScript Design Patterns)

Often when information in one part of application changes, other parts need to be updates. This is the problem that the Observer pattern solves very efficiently.

In this example we'll program a weather station that notifies a fan and a temperature display every time a new measurement was taken.

Interested? Continue watching this series and learn more design patterns:

Are you new to TypeScript? Check out my video series to get started with TypeScript:

The code used in this video is available on GitHub:

► About me
Follow me on Twitter:

Check out my blog:

Subscribe to newsletter:

Like my Facebook page:

[mohammadmohabsarhan]

I must say, whoever invented this is just a genius, Thanks for the tutorial.

[supermetan]

hands down, best tutorials on youtube, keep it up. You are an impressive teacher, very easy to follow

[elijah]

Thank you, this is one of the best explanations of the observer design pattern implemented with TypeScript.

[pholophus]

Thank you for the video, before this I saw a video about observer pattern elsewhere but was not able to understand when needed more than one observer, your video explains really well and with good examples, deserve a like and subscribe

[chikamichi]

Beware, in this video Xavier calls what's observed, a Subject. Yet the proper naming is "Observable". A Subject is an entity that may act as *both* an Observable and an Observer. It's the building block used in implementing Pub/Sub systems (think chat app, typically).

[abdulkadirguven]

Simple and clean explanation.Thank you ;)

[raj.blazers]

Tutorials are damn good. Please post more design patterns.

[mulia.nasution]

Awesome! I hope there are more videos about design patterns like this.

[figidon-software]

If you are building a web-project you can also implement the observer pattern with events. Assuming you use jquery, it's as simple as:
1. Trigger the event with *$('body').trigger('weatherStation:tempChange', newTemp)*
2. Listen to event triggers with *$('body').on('weatherStation:tempChange', (e, newTemp) => { // logic to handle newTemp})*

If you goto the Dev Tools you can see that youtube makes heavy use of custom events. In the Elements tab you can select an element, then see all the Event Listeners attached to it.

[jananpatel]

7:47 why are we saying Why aren't we using this.subject? This is the only part that confused me

[ManontheBroadcast]

Crystal clear explanation .. even i am not familiar with the TypeScript syntax but just plain JS, for once i think i managed to grasp this concept ...Thanks for sharing your knowledge ...

[hakart]

thanks for your great tutorials
there is one tiny problem in 'removeObserver' method . actually the problem is for 'splice' method and this is it :
if passed observer to removeObserver method does not exist in the observers array the index become -1.
then the splice remove last item from the observers array

[lukezzz]

Hi, great tutorial! One question, shouldn't you set the return value of the functions in the interfaces to void if they return nothing? Else it will have the return type any...

[IslamGadzhiev]

Why mixing the responsibilities and logic of observability between display classes and the weather station ?
That is - in the constructor in Fan and TempretureDisplay classes you do: `weatherStation.registerObserver(this);`, which means that the Observer instance inside make the Subject register it.
It's wrong, i think, instead the cleaner approach would be to make the Subject register the Observer separately from the Observer being able to update based on the Subject notifications.

[hemanth]

In Android also we are doing using same design pattern for callback methods

[NagatoKamiPain]

can you make this video with function as well?

[creative-commons-videos]

Can you please make a Playlist on building ORM in typescript using Object Oriented Programming, Just like Laravel Eloquent ?

[H-vi]

Why would you add a reference to the subject, in the observer?? If you the remove a observers, they will still carry unused reference. Seems like bad code to me? please correct me if im wrong.

[coplain]

Savjee .. Thanks for the tutorial . One question though .. Imagine I have say I have large # of observers (say a billion) . Since we are using foreach loop to notify and its a O(n) operation ..by the time it reaches last observer another event happens the notify loop starts all over again.. how would we handle this scenario ? Let us say in environment like high frequency trading where trading happens in nanosecond time frames.. how can we handle this issue .. Thanks

[hazartilirot]

The examples are stolen from Head First Design Patters. :D