Тёмный

Five Essential Design Patterns in Typescript 

Jack Herrington
Подписаться 186 тыс.
Просмотров 61 тыс.
50% 1

Наука

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

 

12 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 100   
@artemu78
@artemu78 3 года назад
stable awesomness, thank you for your efforts Jack
@chrisperry5658
@chrisperry5658 3 года назад
Jack Herrington: the official youtuber of TypeScript
@jmfariasdev
@jmfariasdev 6 месяцев назад
After 3 years, this video continues on helping people understand these concepts and I'm an example of that. Thank you so much! Instantly subscribed after the video.
@DimitriGedda-wo8sm
@DimitriGedda-wo8sm 8 месяцев назад
Thank you so much for your perspective. This type of growth would never have ocurred to me without someone of your expertise mentioning it. Lots of gratitude!!!!!
@ykl0919
@ykl0919 3 месяца назад
Thank you for posting this video. It is such a treasure for people like me who mostly self-learned
@DanielJustavino23
@DanielJustavino23 3 года назад
Every time I come to this channel theres something better in store, keep it up Jack!
@rikagandia4037
@rikagandia4037 2 года назад
P0 x
@rikagandia4037
@rikagandia4037 2 года назад
Pcx
@rikagandia4037
@rikagandia4037 2 года назад
X p0 p0
@rikagandia4037
@rikagandia4037 2 года назад
00p
@rikagandia4037
@rikagandia4037 2 года назад
00p
@alvarobyrne
@alvarobyrne 2 года назад
00:00 intro 05:21 database interface _________ 11:54 factory 15:15 singleton 19:16 observer 31:45 visitor, 34:45 strategy 43:37 adapter
@adventurer2395
@adventurer2395 2 года назад
Thank you! We need more content like this, building node APIs with TS and design pattern/SOLID principles. A suggestion: As someone already pointed out, your implementation of the factory pattern is not full. It's more of a facade. You'd need arguments (enums for instance) for the factory to allow for implementations of different databases types on the fly.
@DavidSmith-ef4eh
@DavidSmith-ef4eh 3 года назад
Great tutorial. Next one could be how to organise medium to large projects in a maintainable way. All I know is Uncle Bob's domain driven design, but this seems a bit overkill for me...
@sachinbonde89
@sachinbonde89 3 года назад
For 1 min 40 sec I was thinking my headset having issue . Nice video
@TheGabrielMoon
@TheGabrielMoon 3 года назад
You are awesome, dude! Your content have been help me a lot even with the simple questions I had
@abba_m_
@abba_m_ Год назад
I think this is where I finally learn generics 😅 great content 👏👏
@John-Dennehy
@John-Dennehy 2 года назад
Really useful to see these patterns that I hear my backend/Java colleagues talking about. Though, I'm curious if they are still considered best practice in TS / modern JavaScript. I'm struggling to think of scenarios where these patterns work better than more simple, easier to read/reason.
@CodingNuggets
@CodingNuggets 3 года назад
Jack, you are awesome. Really happy to say that I follow you. Big fan! Also, thanks for your amazing content. Much love and see you soon!
@nicohnavarro
@nicohnavarro 19 дней назад
you are the best teacher i had
@mmmmmmm8706
@mmmmmmm8706 3 года назад
So disappointed i missed this! Great stuff Jack.
@Lemmy4555
@Lemmy4555 3 года назад
I think i would rather implement all this by using: - Map for inMemoryDb - EventTarget + CustomEvent for the pub/sub logic - Proxy to proxy get and set methods of Map with pub sub events
@alexanderkuznetsov634
@alexanderkuznetsov634 3 года назад
Awesome, thank you Jack!
@ngneerin
@ngneerin 3 года назад
I searched the entire web for such tutorials where design patterns are implemented in use cases.
@danielwarke4742
@danielwarke4742 Год назад
Great video! My only critique is that you should have used all Pokemon instead of mixing Pokemon and dinosaurs 😆
@oOrbitZz
@oOrbitZz Год назад
In the old days we also set in the config file the kind of DB the Factory is returned when invoked.
@rsousaj
@rsousaj 3 года назад
You're awesome Jack!
@Polish2075
@Polish2075 3 года назад
Thank you Jack. Great video :)
@roberthaforsson9687
@roberthaforsson9687 3 месяца назад
Thanks! I love your videos
@jherr
@jherr 3 месяца назад
Thank you so much!
@sourandbitter3062
@sourandbitter3062 3 года назад
Very cool
@AndreNitschke
@AndreNitschke Год назад
Really nice and useful Tutorial.. thaanks
@blipojones2114
@blipojones2114 3 года назад
For the singleton, i'd say "the C++'y way" you mentioned after was the only actual legit way, saying "call it once and away you go" just means it's a factory producing an instance each time, not, a singleton, only when you were returning the same instance did it become singleton. // Singleton const db = new InMemoryDatabase(); return db; At that point it was not a singleton as far as I understand it. Each time that will be run you get a new instance.
@jherr
@jherr 3 года назад
At around 16:46 I talked about, but didn't demonstrate, that you would call the createDatabase once in another file and then store the result as a const and return it as a default export. And that const value would then be a singleton. Sorry, I should have demonstrated that completely.
@blipojones2114
@blipojones2114 3 года назад
@@jherr ah nice. Awesome content btw also maybe you already covered it in another video but so many people ask, "how do i make the code do this depending on the type" i.e. runtime typechecking which isn't a thing, only primitives like string and bools and nums This question is so pervasive I think there is space for a video about why types and logic go alongside each other but are not interchangeable. Typescript is fancy documentation, thus it would be like altering the code logic via documentation.
@jherr
@jherr 3 года назад
@@blipojones2114 In my No BS TS series I cover that very issue in the first episode.
@blipojones2114
@blipojones2114 3 года назад
@@jherr awe nice il head right over then :)
@dragorwyin9809
@dragorwyin9809 3 года назад
Hi Jack. What theme are you using? It's awesome and cannot find out any better than this :) Thank you.
@jherr
@jherr 3 года назад
It has changed over time. This was probably Apollo Midnight. Currently I'm using Night Wolf, either dark blue or black, and MonaLisa.
@dragorwyin9809
@dragorwyin9809 3 года назад
@@jherr Wohohooo! Great. Thank you. Btw. awesome content! :)
@dragorwyin9809
@dragorwyin9809 3 года назад
Yup. That was Apollo Midnight. Awesome!
@patrickkaipainen3301
@patrickkaipainen3301 Год назад
What are you using to bootstrap little typescript projects like this? I see you're using ts-node, but is there other tooling that spits out the bare project?
@mokorra
@mokorra 3 года назад
Hi Jack, Awesome video! One comment though, I tried the Singleton pattern you created here and it is not working. After some investigation it turns out that since the class is returned inside a function, it has a different scope every time you call the createDatabase function. Therefore it is never a singleton. Also after some more investigation, you can't actually create a generic singleton class since it undermines the pattern itself.
@jherr
@jherr 3 года назад
Yeah, I glossed over this too fast. My point was that you call the function once and store the result in a constant, and then export that constant as the default export for the module.
@mokorra
@mokorra 3 года назад
@@jherr Yeah i totally got that point. Thank you again 🙏❤️
@rembautimes8808
@rembautimes8808 3 года назад
Thanks for this lecture. I tried out the code but the visitor pattern had to declare item:any as a workaround I was getting an error : " Argument of type '(item: T) => void' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => void'.". if I used item: T as per the interface. But its a small issue, the code was a great exercise.
@richardwatts20
@richardwatts20 3 года назад
Amazing content, thank you so much
@adicide9070
@adicide9070 3 года назад
isn't it that, with the singleton as you implement it... every time you call the "instance" static method, you actually instantiate the db again? Think the gist of the pattern is that you prevent that by checking in the "instance" method if the class has already been instantiated and if so, then returning an already existing instance, so that effectively "new" is ever called only once. Maybe I'm wrong here :) thanks for the point about including a cleaning fn in the singleton!
@adicide9070
@adicide9070 3 года назад
ah ok got it. only the instance exported.
@jherr
@jherr 3 года назад
It's a static value and not a static method. 😀
@adicide9070
@adicide9070 3 года назад
@@jherr is that how you would normally write it, though? Or just write a simple object using object literal notation and call it a day?
@jherr
@jherr 3 года назад
@@adicide9070 I’d go the simple way. Just create an instance and export it, probably as the default. I showed the instance version to give a couple of different options. When I redo this as a scripted video I’ll make the different options and which one I’d go with more clear.
@adicide9070
@adicide9070 3 года назад
@@jherr the expression fishing with dynamite comes to mind: D this was fun though. and visitor was so easy to miss. It'll be a blast to the edited vid and contrast, since I coded along and let myself experiment around it a bunch. I think I made a comment for a "factory function that wraps a class that's set up to produce a singleton" and then you export a single instance??? :D
@mettjus
@mettjus 3 года назад
Hey Jack, your tuts are awesome! Nonetheless here (around 37:43) I think you are using reduce the wrong way: isn't it meant to support a functional/immutable approach? (in fact, shouldn't the return value from reduce be used?) The way you are using it here is mutating the state and if mutability wasn't a problem you could have achieved the exact same result with a simpler forEach, mutating the external "found" property, don't you think?
@jherr
@jherr 3 года назад
You could definitely do it with a forEach, but I think it's basically still immutable. So these are the lines: github.com/jherr/ts-patterns/blob/master/src/index.ts#L96-L111 You could do something like this: return Object.values(this.db).reduce( ( f: { max: number; item: T | undefined; }, item ) => { const score = scoreStrategy(item); return score >= f.max ? { max: score, item: item, } : f; }, { max: 0, item: undefined, } ).item; Which would more clearly be immutable. But... it's harder to read. :)
@mettjus
@mettjus 3 года назад
@@jherr if you wanted to use an immutable/functional approach I would rather rewrite those lines like this (disclaimer: I admit I havent't tested the code): const found: { max: number item: T | undefined } = Object.values(this.db).reduce( (f, item) => { const score = scoreStrategy(item) if (score >= f.max) { return { max: score, item, } } // else return f }, { max: 0, item: undefined, } ) Otherwise, with mutability/forEach, like this: const found: { max: number item: T | undefined } = { max: 0, item: undefined, } Object.values(this.db).forEach(item => { const score = scoreStrategy(item) if (score >= found.max) { found.max = score found.item = item } }) ...which works as well and to me looks a bit simpler, without the complications of reduce :)
@jherr
@jherr 3 года назад
@@mettjus I guess the way I look at it, and the reason that I chose `reduce` is that I'm looking at it as an elaborate Math.max function where I don't want the max, but I do want the item with the max. So instead of just tracking the max, I track both the max and the max item and then just take the item. And since I'd use `reduce` if I wanted to hand write Math.max I figured I'd use `reduce` here since it was just a slight variation. Anyway, I think both approaches are absolutely fine.
@mettjus
@mettjus 3 года назад
@@jherr ok, fair enough 😉
@joaoduarteribeiro
@joaoduarteribeiro 3 года назад
Thank you!
@Abondano1
@Abondano1 2 года назад
Excelent ... thanks ... 1000 times
@Abondano1
@Abondano1 2 года назад
Hier I am diving in your tutorials. I am java developer. An from one day to another the company want that I also continue the front end of another software. where I do the backend. Typescript and Angular was for me only to litle demos to run my python Projects. I am fullstack developer Java EE. And of course JS is a litle know for me. But The framework makes me crazy, the settings files, DI, yarn , tsconfig. Und you helpme to finall run an set yarn. Thanks!!!!
@i5artube
@i5artube 3 года назад
My keyboard doesn't have those characters... also what are those html tags
@omertoraman4941
@omertoraman4941 2 года назад
The first implementation is not a singleton. Every time createDatabase function is called, it returns a new instance. If that's how you want to implement a singleton, you can move the class into a separate file and export the instance itself, so every other file importing it will import the same instance
@jherr
@jherr 2 года назад
Yeah, I didn't actually do it but I mentioned at 16:50 that you'd move that into a separate module and make the db the default export.
@DedicatedManagers
@DedicatedManagers 3 года назад
At 17:25 I wish you would have explained line 23 better. I’m not the strongest OOP programmer... i’ve never seen a class instantiate inside itself. And I don’t get how a static instance variable can hold a new object. It might be 00P 101, but Im missing it.
@jherr
@jherr 3 года назад
Yep, the class creates the single instance of itself because the constructor is private and can only be called by the class. This is the "classic OOP" way to do that and it's actually not the one I'd recommend and I'll clarify that in the scripted video.
@DedicatedManagers
@DedicatedManagers 3 года назад
@@jherr great. Thanks. I also had to look up Record. I’ve never seen that before.
@jherr
@jherr 3 года назад
@@DedicatedManagers There are a bunch of utility types: www.typescriptlang.org/docs/handbook/utility-types.html . They are very handy and I'll be covering more going forward.
@СофьяИванова-д6ж
What patterns is really must have for frontend developers?
@jherr
@jherr Год назад
Pub-sub. Everything else is good. But understanding loose coupling through the pub-sub pattern is critical.
@СофьяИванова-д6ж
thank you! pub/sub is my favorite! Your lessons are best!
@MrEnsiferum77
@MrEnsiferum77 3 года назад
When u presented factory pattern, u jump straight to singleton pattern, but the idea of factory pattern is to change implementation on the fly, but the factory function returns only one type of implementation... or at least present as abstract factory, with if else inside the function About visitor pattern, why u ommit the accept method? All this looks like semi way of introducing design patterns....
@codezero6023
@codezero6023 3 года назад
Been bit by DI and OO inheritance.
@jherr
@jherr 3 года назад
Definitely been bitten by DI and AOP, but not so much OO. That being said, at least in React/Typescript if we do OO we don't do it with deep inheritance like we do in C++/Java/C#/etc.
@codezero6023
@codezero6023 3 года назад
@@jherr To your credit, without realizing it, you demo’d the use of composition quite well by showing how to use observers in the db classes
@jherr
@jherr 3 года назад
@@codezero6023 My original approach was more of an `on("beforeAdd", () => {})` type deal. And I got the external typing working well, but the internal typing wasn't great. Plus I liked the feel of the `effector` API so I re-did it this way, and as a nice side effect we have a cool little function that can make generic subscribe-ables.
@DavidSmith-ef4eh
@DavidSmith-ef4eh 3 года назад
I think using something like typedi might make DI more longterm manageable. Definitely better than injection the classes yourself.
@reynandelizo1480
@reynandelizo1480 4 месяца назад
what is the best book for design pattern in typescript and how to get a free book I hope someone help me for this thankyou.
@mohammadmousavi6046
@mohammadmousavi6046 3 года назад
what is that font and theme used ??
@jherr
@jherr 3 года назад
Font is Monolisa. Theme is probably Apollo Midnight on this one, or maybe Night Wolf [dark blue] which is what I've switched to recently.
@benmed3057
@benmed3057 3 года назад
can you share the code on github ?
@whatthefunction9140
@whatthefunction9140 11 месяцев назад
Are any of those patterns monads?
@jherr
@jherr 11 месяцев назад
No. Because Monads aren't a design pattern from that book. You are correct though that Monads are a very important part of the JS ecosytem.
@whatthefunction9140
@whatthefunction9140 11 месяцев назад
@@jherr trying to learn monadic abstraction in ts. Brain hurts
@jherr
@jherr 11 месяцев назад
​@@whatthefunction9140 TBH, I'm not sure if I really understand monads the way an FP professor might, but I can tell you that in practice, these are just persistent closures. The most practical example is something a closure that has some data. function createCounter() { let count = 0; return { increment: () => count++, get: () => count }; }
@DedicatedManagers
@DedicatedManagers 3 года назад
Just FYI, you completely lost me on the observer pattern... just too hard to understand. I’m a strong JS programmer, but fairly new to typescript.
@jherr
@jherr 3 года назад
Gotcha. It's a big more generics than I've been putting up on the channel so far. I'll do an intro video on generics. They are really important to getting the most out of Typescript. And they really improve the quality of your code. So definitely worth learning.
@DedicatedManagers
@DedicatedManagers 3 года назад
@@jherr I think that’s probably good. I’ve seen and done generics before, its just I’m not that strong in the area so your discussion was just too fast and missing the extra guidance I needed to understand what was happening (I’ve tried rewatching a couple times).
@scottd1431
@scottd1431 Год назад
I believe singletons and static classes are unnecessary in Typescript.
@davidjacobsen308
@davidjacobsen308 9 месяцев назад
You do realize it is bad practice to use reserved programming keywords as method names?
@johndennis530
@johndennis530 2 года назад
Timestamps please!
@HoNow222
@HoNow222 3 года назад
Jeez, i thought i knew JS and a little of TS. I did not understand anything about this video...
@jherr
@jherr 3 года назад
Sorry to hear that.
@omsunkoradji120
@omsunkoradji120 2 года назад
Man, learn to type without typos first, and then do videos... It's very annoying when U fix typos all the time.
Далее
8 Design Patterns | Prime Reacts
22:10
Просмотров 423 тыс.
ЧТО ВЫРОСЛО ОТ КОКА КОЛЫ😱#shorts
00:26
Day 2 | IEM Rio 2024 | Playoffs | КРNВОЙ ЭФИР
6:11:51
Functional Design Patterns - Scott Wlaschin
1:05:50
Просмотров 297 тыс.
Mastering async code with Typescript and Javascript
39:01
Observer Pattern - Design Patterns (ep 2)
49:47
Просмотров 566 тыс.
The Most Important Design Pattern in React
35:04
Просмотров 71 тыс.
Why Use Design Patterns When Python Has Functions?
23:23
Why use Type and not Interface in TypeScript
14:12
Просмотров 209 тыс.
Microservices are Technical Debt
31:59
Просмотров 495 тыс.
Вот так обновление #айфон #ios18
0:40
Заказал Li 7 из Китая
0:59
Просмотров 850 тыс.
iPhone 16 & beats 📦
0:30
Просмотров 620 тыс.
bulletproof❌ Nokia✅
0:17
Просмотров 57 млн