TypeScript Pub/Sub Patterns (No BS TS Series 2 Episode 2)

In this second episode of No BS TS series 2 we look at the Publish & Subscribe pattern (or the Observer pattern as they call it in the book). This pattern allows you to loosen the coupling in your code and maximize reuse, all while making your code easier to understand.
00:00 Introduction
01:06 Architectural basics
01:36 Project setup
02:00 Class based pub/sub
06:00 Extending the base class
07:39 Function based pub/sub
09:07 DIY state manager
15:40 Handlers pattern
22:07 Outroduction
No BS TS Book: no-bs-ts.myshopify.com/
Code: github.com/jherr/no-bs-ts/tre...
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#typescript #nobsTS

[@gosnooky]

One of my favorite programming channels. You explain things very clearly, and I enjoy the professionalism. It's nice to see people over 30 doing modern software engineering. Guys like us are a minority, but we have the discipline and experience! :)

[@AliAlmahdi]

Well done Jack, you are a great teacher. I’m somehow becoming you when I mentor my trainees at my day job. Thank you for the great content. I can’t figure out why youtube isn’t promoting your videos to gain more subscribers. You deserve way more subscribers.

[@ToddDunning]

Probably because Jack doesn't check the right identity boxes

[@techworld3043]

@@ToddDunning and beginner stuff go viral mostly

[@RedBully1975]

I love that you just get straight into it with clear examples at the right technical depth

[@user-oy4kf5wr8l]

The quality of these series are just super high! Thanks Jack!!!

[@danieloliva1194]

Gosh, your content is real gold! I always tell everybody at work about this channel! Keep up the great work. Subscribers will come!

[@Hydro__man]

Jack, you're the GOAT. Thanks for putting in so much work, I love your videos ❤️

[@ozzyfromspace]

It's crazy that I wrote similar code to this while teaching myself the pub/sub pattern, and a few days later, I find your video. I liked some of your implementation patterns, I learned a great deal from this video! Thanks, Jack, and best wishes to you!

[@marcwinner567]

Great teacher, great series. Top quality content as usual. I will buy the book to support you even if I prefer video lectures like these.

[@andriimuntian3632]

Hi @Jack, Thanks for the great quality content.

[@jr-hp7er]

Amazing Work Jack :) Loved it :)

[@gmjitendra]

Salute to your excellent teaching Jack.

[@HungHoang-dm4qw]

Thank for great videos, from Vietnam with love :3

[@OneCSeven]

thanks for having the text that large!! makes it easy to pop out the video and program along

[@sviatoslav3347]

One word - AMAZING video

[@jtjt8777]

VS.code did not wrap the code in the video so some code got chopped off in this particular video. In general, you make the best ts content on youtube. I learned a lot from your video on ts eact

[@jonlaffytaffer]

Well done and chill background.

[@happy..1907]

Wow your laptop's on fire. Great content as always.

[@nhieljeff2156]

SUPER HIGH QUALITY

[@mortezatourani7772]

Really enjoyed the content Awsome

[@gourabneogi501]

Best content, you deserve 100M subs SIR

[@codezero6023]

The handlers pattern is cool. In the past, I used pattern matching (found in languages like Scala) where I had an array of objects with a predicate and action function pair. The action would execute when the predicate is true.

[@jherr]

That’s a solid use case as well. I’ve done that myself.

[@ferooref7614]

Great job

[@rajatpratapsingh3123]

lovely !!

[@rogercodina8515]

this is gold

[@jj362choi]

Thank you! great works. I like your approach.

[@BNakato]

Your content are always informative. I have recently been looking into module federation and you have a lot of awesome videos on it. I know mfe is still in the early stages but do you have any recommendation for auth/authorization for mfe apps and components. Keep up the great work.

[@jherr]

I'll probably do video on that at some point. Long story short the best way to do it is with either shared state or a shared UI module.

[@uttampankaj]

Hi @Jack, Thanks for the great quality content. I have learned a lot from this channel. I am impressed with your coding and code organization style. Just curious to know which autocomplete tool do you use for the VS Code?

[@jherr]

That's GitHub Copilot. Very powerful, but also a little erratic with its recommendations. :)

[@jtjt8777]

Copilot is not open to the public ATM. You can try tabnine or kite. I am using tabnine, I like it

[@nattysweg343]

Hey Jack, your playlist is out of order in the No BS TS playlist, episode 2 comes first and episode 1 comes 4th. Awesome content nevertheless!

[@huannguyen6559]

Wow, it's amazing. Thank you so much. Is the state manager a Recoil alternative?

[@jherr]

Not as is. You’d need to add that cascading functionality where one atom depends on another.

[@yaserghananwi]

Nice work, Jack, this tutorial was amazing I hope you can provide more and more like this topic, I have one question what is the theme you are used with vscode and the font is very . best regards dear

[@jherr]

Night Wolf [dark] and MonoLisa.

[@MrMrbannanapants]

Hey I noticed you had a diagram editor in vscode. May I ask how you got that setup/ which extensions? Great vid as always

[@jherr]

It's the drawio extension.

[@boot-strapper]

This is much easier to make than I had imagined. Ha.

[@awekeningbro1207]

@12:21 I have a question - what is the point of calling setValue(v) in line 32 when we have already subscribed that function in the useEffect? the setter function should invoke that subscriber when its fired. Nice video btw.

[@freakinmonkey85]

Hi Jack, two questions: First, are there any reason to not use the built on EventEmitter class instead of building your own? Second, how would you handle async events? Say an subscriber had to send data somewhere (log, S3 etc.).

[@jherr]

You should definitely use the EventEmitter if you have access to it.

[@agentxx3022]

So, how does this differ from just extending EventEmitter ? Wouldn't that do more or less the same thing ?

[@balaeinstein8710]

thanks a lot sir . are you creating a separate playlist for the series 2?

[@jherr]

I should, thanks for the idea.

[@jtjt8777]

fyi, I am using the same node version and I am on pc win10. I need import fs from 'fs const sss = require('fs') const testFolder = `${process.cwd()}\\src\\handler-pattern\\files` console.log(testFolder) sss.readdirSync(testFolder).forEach((file: any) => { console.log(file) }) to get fs to work. Otherwise, it always error as "readdirSync undefined". I am not sure why.

[@j0hannes5]

Is this just a fun way to learn more about ts and the observer pattern or are there actually benefits over using RxJs?

[@jherr]

Just a fun way to learn. But feel free to use it as a basis for something if you like.

[@elik3765]

Jack, thank you for another great vid! This is what I can't wrap my head around: if I want to use a secont count button inside the Counter component, will I be invoking same useCounter hook? In that case, I can't really modify value and setValue returned by the invokation of the hook in the first time. However, if I declare the second useCounter (say, useCounter2), it's gonna be a completely new Set. So, at the end, if I am right, I will end up many sets capable of holding only one subscriber. How could I have many subscribers and one set in your example? Thank you!

[@_modiX]

What kind of extension allows to build such great diagrams using the *.dio file extension, please?

[@jherr]

Diagram.io. They have an integration for VS Code.

[@_modiX]

@@jherr Thank you! :) draw.io now!

[@sumeetsood232]

Where can I find the First vieo of series?

[@beau]

Don't forget to close your windows. The weather says it's supposed to rain.

[@sapi0ra]

Do you have this book in .pdf format?

[@AcunPearce]

What do you use for that auto completion in terminal?

[@jherr]

Fig

[@ngneerin]

Give examples of where can I use Publish-Subscribe Model?

[@jherr]

It's the underpinnings of a lot of what we use daily. For example the DOM, or data subscription systems like firebase, or chat APIs like Discord. I've implemented it myself in the context of analytics, or when I'm writing ETL systems that traverse through large dataset and I want to have the traversal engine send out messages that are then handled by event listeners that are looking for specific items that interest them.

[@ericc2662]

Jack, Love your stuff. May I ask what font and theme you use?

[@jherr]

Night Wolf [dark] and Monolisa. FWIW, that information is in the description on more recent videos.

[@ericc2662]

@@jherr it sure is! Not sure how I missed it. Thanks!

[@_modiX]

@@jherr Hi Jack, great tutorial. Can you please tell me what extension allows to create such great diagrams like at 1:07 (doi files)?

[@jherr]

@@_modiX Diagram.io :)

[@_modiX]

​@@jherr Thanks a lot. ❤️ draw.io *, made my day.

[@killerjohn7577]

at 12:01, setValue(v) is unnecessary since publish(v) will trigger setValue. (even react can batch it tho)

[@killerjohn7577]

By the way, your videos helped me a lot!

[@ngneerin]

@Jack Herrington all these patterns that you show, would really appreciate if you make video on its usage in an elevator system, or game of tic tac toe, or something similar. We call it Low Level Design or OOP Design or Class Diagram.

[@jherr]

I hear yah. I'll think about doing a video where I use several of them in combination to build a well factored app. Just so much to do!

[@ToddDunning]

Reminds me I need to go back to your Valtio vid, now the differences are starting to look less clear...

[@heavierthanlight7173]

Can't find your book anywhere?

[@jherr]

no-bs-ts.myshopify.com/ (Please be aware that this is an e-book only.)

[@heavierthanlight7173]

@@jherr THNX, with Tim Berglund from Kafka you guys are the best! Got so much nice info!

[@footballfanatics007]

Heyy is this thing relevant today for typescript?

[@jherr]

Pub/sub is still very relevant.

[@marslogics]

"No BS TS" playlist is missing Series 2 Episode 1

[@jherr]

Thank you! On it!

[@VinniiMiranda]

What does it means "NO BS TS", can someone explain to me, pls?

[@jherr]

It means “straight to the point”

[@VinniiMiranda]

@@jherr Thanks

[@_modiX]

@@VinniiMiranda Be sure to say "NO BS" in your next presentation at your company. It shows that you are skilled expert who knows all the fancy scientific terms. Will make you look like a pro on your field and people who know this term will appreciate that you are not wasting their time.

[@stancobridge]

Link to Episode 1 pls

[@jherr]

Hahah, whoops: kzbin.info/www/bejne/Y2K8mYNrfrR1eas

[@stancobridge]

@@jherr Thanks

[@Messirobben047]

Jack, you are beautiful !

[@techworld3043]

for youtube algo

[@frosty1433]

You’re a subscribable function…..

[@josersleal]

"genious" "as they call it in the book" HAHA PS: only SEs above 45 can get this

[@user-oy4kf5wr8l]

Another question please, Jack. when function subscribe takes ((s)=> void) this as parameter, but u just did xx.subscribe(console.log), i think u should do xx.subscribe((s) => console.log(s)) ?? is this the lambda for js? i am new to js, very confused. Thank you in advance! Always appreciate ur videos!

[@jherr]

Yeah, that’s an anonymous function. A “lambda” in other languages. It’s a function but unlike a proper “function” it doesn’t have a “this”. It inherits the “this” from the parent scope.