Five Essential Design Patterns in Typescript

all right looks like my camera isn't coming up give me a second on that just to make sure everything's cool okay there we go hello and welcome to five design patterns with typescript so excited to have you here as you can see we've got the design patterns site up but before we get into that let me just uh go through a few things thank you of course for spending a little bit of your friday with me and uh i hope you have as good of plans for the weekend as you can have in the middle of a pandemic [Music] this one is all about you so if you have any questions at all as we go through these yeah just just pop them out there and uh you know we'll we'll see where we get to with it and i hope that you learned something new i'm pretty excited about it i know that i did a video on design patterns on traversie's channel middle of last year which is great got a lot of good response but i didn't put any code into it it was very kind of high level hand wavy and so i think it's great that we're kind of coming back at it uh here oh and before i sort of dig in again obviously we have our rocket in the back back there you can go on to the discord server there's a link to that in the description but i'll put another one in there so you can jump on in hi isaac good to see you and uh you can change the color of that rocket ship anytime you want and i just want to thank by the way um nurasmutani sorry about your name brutalizing it there but uh for bringing up the idea of doing a a video on design patterns so that's that's what was the genesis of this and so your ideas do count so thank you very much and thank you very much for that idea so let's talk a little bit about design patterns this is the original design patterns book it was released in 1994. i think i read it in 95. it's a fantastic book the idea is that there are uh the same way that an architect has and i'm talking about like a house architect has you know a basic construction layout for what a good house how a good house is constructed and how the parts and pieces fit together where the bathroom should be where the living room and the kitchen should be and all that um we have similar sorts of things in how we construct software in what are some pretty time-tested patterns that people can can leverage so they have the book separated into three different big parts they've got creational which is things that you know ways to create objects structural these are ways that you know things the components fit together and then behavioral which would be you know kind of temporal things like you know commands and stuff like that manages state over time um one thing i would say don't let's not over emphasize the whole object oriented design part of this uh the oop part of this certainly in typescript and in javascript you're not going to we're not going to use necessarily classes unless we need to so a few of these will do with functions a few will do with classes you know as we go we'll see hi jack how you doing okay so i've got a little starter thing here we're going to go make an in-memory database that's kind of what we're going to design our or look at different design patterns around that actually comes from a interview i heard somebody had to take was basically you know design an in-memory database and then kind of adding on to it from there so we're going to look at a bunch of different patterns we're going to look at the factory pattern the singleton pattern which is incredibly popular the observer pattern or what we now call uh pub sub publish and subscribe which is obviously huge uh and then there's also the visitor and strategy pattern and if we get through all of that i'll actually give you one more and make it a full six so we'll see we'll see here we go hey alex good to see you happy friday so happy to have you here um is it okay to use both class and function with state in the same component uh oh interesting um well you know like when you're talking about react um yeah i mean i guess you could use a class based component as part of a sub a sub component and you could use a functional component sure no problem uh but we're not going to react in this one we're just going to talk about just generic typescript so the first thing we need to do when we talk about building out an in-memory database is to define what we want the scheme the interface of that database to be so we're going to define interface we'll call that database and it's going to have a getter which is going to get by id i'm just going to go bring over my code here so i can make sure i don't go down rabbit hole i can't actually get out of uh it's gonna get an item by id and what's it gonna return so we need to have some sort of type what what kind of things are we putting into our database so we're gonna use uh t and say that we're going to make this generic so we're going to learn some typescript generics which is great and we're also going to have a setter for our yeah that's going to add something to our database we're going to use it's going to be an id based database it's going to be like nosql hi random um and it's going to be looked up by id so we're going to have some sort of data coming in a new value or a new new object and that's going to come in as that and then it's going to turn a void but in order for set to do that new value has to have an id so we're going to create a thing called base record that has an id in it and we're going to say that whatever this is it needs to at least extend base record so that basically says it hey you got to at least have an id in whatever you're going to put into this database okay so let's actually create an in-memory database of that so i'm going to create a new database i'll call it in memory database and it's going to implement if i can never type the database with a given record or type that we want uh and it's going to have in it a private database of a you know where you have a record that has a string is the id and then whatever that type is and i guess at this point we're going to need to say that we have t on there this is not um what we're going to do so okay um all right and let's see we're gonna have a setter and a getter so let's do that cool and what's this going to do this is going to be the easiest thing ever it's just going to say this.db it's going to take that new value and take the id out of there and set it to new value and oops hold on that's not right there we go okay so again this is going to extend base record so we know that we have that and then to get it we're going to do this.db and then give it the id and there you go so that should be in fact actually this point it should be t or undefined so there if you want to pass your interview that's actually like the smallest in memory database i can think of all right let's go and actually try this out let's say uh let's go create a pokemon db and in order to use that generic we're gonna say that we're gonna use pokemon and because it's got an id that extends id on the base record and there you go so now i can do pokemon.db.set and then give it a new pokemon it's id is a bulbasaur and its attack is i don't know 50 and its defense is 10 and then let's console log out the pokemon db get and then the bulbasaur yeah okay thanks vs code for hitting me on that cool all right let's go over here and then i can just yarn start oops hold on oh i know what i did i gotta remove my no modules hey john good to see you everybody excited gonna have a great weekend-ish thing all right let's let's start that up okay cool so yarn start in this case all it's doing is just running ts node which is a typescript node uh wrapper on source index.ts and there you go so we can put an item into our pokemon database and we can get one back out so the first thing we're going to look at is the factory pattern so let's say that i want a way of requesting a database from from a a global source and it will either give me say an in-memory database if i that's the way that i have it configured or to give me a mysql database or it'll give me a file based database that's the idea of a factory pattern is that this factory is going to hide the which thing that you're going to implement that with the class that you're going to implement that with from the code so let's do that let's say function create database and it too is going to take that that base record and then in here this is really cool actually i can just define a new in-memory database like that and return it this is kind of neat actually one of the cool things that we can use in uh in typescript what font am i using in vs code what well let's take a look settings this is the apollo midnight theme and i'm currently using mona lisa mono lisa i actually think that's a paid for font sorry about that um but there are a lot of good open source alternatives so there you go okay so in order to do that i'm just going to call create database and that's going to give me back a pokemon db as a as a class which is so cool one of the really cool things that you can do in in in javascript you can basically create classes automatically or yeah at runtime and so we're going to do is create pokemon db this time lowercase and then just do new pokemon db uh all right so why isn't that working all right it's let's just call that you know oh pokemon nice all right i'm not real happy with the fact that it's upper and distinguished only by a lower upper lowercase p but we're not going to leave it that long so there you go so that is our first pattern this is the factory pattern in c plus plus which is what you'd have when in 1994 when the book first came out this would be primarily like a factory primarily a a class which had mostly static methods on it which would then give you the instances of those classes depending on what you asked for uh so if you asked for you would be able to have like a static create database we don't need to do that obviously in uh typescript you're gonna have to have that kind of public static thing you could but i think this is more in line with what you expect out of a typescript application so we're going to interpret our design patterns in the context of typescript we're not just going to go and like kind of make c plus classes that are implemented in typescript okay so the next one we're going to look at is a singleton so we do this a lot in applications we create singletons a lot like a redux store and react application is a singleton when we've been looking at state managers as we've gone through a lot of the state managers over the past couple weeks a lot of those are singletons so what is a singleton well a singleton means that there can be only one you know kind of like the highlander right there can be only one in this case there can be only one pokemon db so the easiest way to do that in this one would be to have this factory pattern return that singleton oh yeah if viewer code is great i was actually on most of my videos i would say we're on fiera code i was actually just kind of going around looking for different mono space fonts and i was like oh i kind of like that model model lisa won a lot so i'm going to go buy it i did actually have to go and tweak this theme though so that we get these really nice italics and but it's not that big of a deal to tweak it and if you want i can put that up in it just for you if you really like this theme and you want if you want to use it okay so let's go and do a singleton here and there's a couple of different ways to do this in in javascript and typescript so the i think the most native way would be at this point to say that we just want a new in-memory database right now and we want to return that and so now we would just have this one pokemon db and you have it as an export on your module yeah and there you go that's your singleton so you only ever call this create database once and away you go there is a more c plus plussy way to do this you could do you could actually make the constructor on this private and then have a public a static instance of this of in memory database and then just do a new in memory database like that and then again we would let me just change this out and really this is just kind of up to you which way you want to play it so i'll do my in-memory database again like that and then at this point i would get back that pokemon db and i could say pokemon db dot instance and again that would make sure that you only ever have one instance of a pokemon so there's a couple of different ways to do that uh javascript and typescript yeah i'm with you flatline boy that is a tough one when it comes to singletons there's an issue where you know you have this singleton right and you want to go and throw some data at it and then test it and then another test you want to go and throw some other data at it and then do another test but you want it to be essentially restarted each time there is a way i think to make just uh flush out the module cache so you can essentially reinitialize the singleton but yeah not great so there are i will say use the singleton with some care just like i said in the uh brad video way way way back um the singleton is something you should use a lot of care on what i tend to do is if i'm doing something like this this single value system i'll also export like a a cleaner function that will go and like return the the singleton back to a known origin origin state and then i can use that for testing okay so what have we looked at so far we've looked at the factory pattern we've looked at the singleton pattern and now and this is so good this is my favorite one i'm sorry random rabbit i'm i'm glad to have you here but and thanks for hanging out um we're going to look at my favorite one and that's the observer pattern so this is we know this is event listeners and pub sub and there's all of these different words for it but i'm going to give you actually a really really really nice pattern for this so we're going to create a observer so that's what they call it in the book you can call it whatever you want you can call it as i said you can call pub sub you can call it whatever and we're going to create a function called createobserver so this is going to give us a little uh object that we can then use to publish and subscribe to you if you watch the effector video that i just put out on wednesday i was really inspired by that by their interface and this is kind of along that line so let's go and do this it's going to return a subscribe uh method i'm just going to take a listener and that listener is going to have an unsubscribe and then it's going to take a publish which is what i'm going to use or what the publisher is going to use to actually send out an event so i'll call you know event and then that's going to return a void but this is not great you know typing wise so let's go and add some types so first thing i'm going to do is define a type for a listener and it's going to take an event type and it's going to then get called with that event type and return void so that's basically when i subscribe right this is the function that i need to give it i need to give it a function it's going to take an event type and then return a void pretty easy so let's go and take this event type and also use it in our create observer so lots of fun generics going on here so this is going to be our listener with that event type and then finally publish is also going to take that event type so this is a really nice little function here it's basically going to maintain a list of observers and allow us to publish and subscribe from that list so let's go and do that we're going to say that we have a listeners array right and it's going to start off empty and then we're going to return our what we want out here so we're going to make a subscribe and a lot of typing on this one there we go i'll just copy and paste that and it will return a void like that so what does it need to do well it needs to push onto the listeners the new listener coming in and then it's going to return that unsubscribe method so that's the that's the way i'm going to unsubscribe from everything and we'll set listener is equal to listeners.filter so we'll just remove the the listener that we just got if they unsubscribe so it's going to take a listener and we're going to say hey is that equal to the one that we brought in if so there we go let me get rid of all these lines here for a second by just putting in a placeholder for that just so we can take a look okay so let me just go through one more time on this so we've got our array of listeners we initialize it to an empty array this is what's called a closure in javascript so this listener is going to be specific to this particular return and then we're going to return a subscribe function which takes the listener and returns a uh hold on there you go all right claim some syntax errors and it's going to turn an unsubscribe function this is very similar to use effect the way that use effect works uh use effect takes a function and if that function returns a function then when the use effect is uh when the the component unmounts then that use effect is that is returned or called [Laughter] well let me catch up with the flatline are they getting four bucks they tell you visitor pattern yeah yes well we're gonna get to the visitor pattern although it's so easy to do in javascript it's really not even a thing okay so there we go and then the the all that unsubscribe is going to do is just basically take the listeners and just filter out what we got and that's just going to remove that particular method from the array and i think this is actually a nicer pattern than what you do with windowed or document or element add event listener you have to give it back the same function again in order to unsubscribe which i think is a pain i think this is actually a nicer interface okay so let's say i have an event i want to publish it now so i just want to go through all those listeners and for each one i'm going to have a listener function and i'm just going to call it with that event that's it that is all that i need to do so really cool so what do i need to do well i need to go and try and put i'm going to add this to my database so before you set a value and after you set a value you're going to get an event right we'll call that one let's see before set event and it'll take a type and it's going to give you the current value and then the new incoming value it seems like a decent thing to do and then with the after set event that's going to tell you that i updated and just tell you what the new value is seems pretty reasonable so let's go down here and add on to our interface for the database we'll say that we have an on before ad this is how i'm going to go and add an event listener and i'll say we have a listener and here's some fun stuff so we're going to have a listener okay and it's going to take a before set event nice right so good and then it's going to return that unsubscribe function so it's starting to look like stl if you have flashbacks to uh the c plus plus so basically all we're saying is your listener function should be a listener that listens for a before set event and then on the after ad and do the same thing we're going to do it for after set event now of course we don't actually have this in our in memory database so let's go and do that all right so we'll go down here and start implementing this out all right cool but it's not actually returning anything so let's actually go and use our really nifty cool create observer so we're going to create a private before add listeners and we'll do that create observer thing and it's going to take a before set event oops and then after add listeners all right after set the event there you go cool all right so how do we do a sub a a subscribe well we do subscribe see how nice that is and then we just give it the listener same thing for this all right okay coolio but we need to return that so we have a way to unsubscribe and now let's use it so now we've got a way to listen to stuff but we have nothing that's publishing so let's go do that so before we add we want to call publish and cnn we're getting a really nice hint here so let's see new value is going to be the incoming value named new value which is nice and then we're going to take the existing value which is whatever that is okay cool and then down here we're going to do it after add again publish and this time we're just going to give it the value well the new value which is actually the new value okay there we go cool nice that is a second bird that's gone in my window in this many days all right okay cool so let's actually try this out so we're gonna we're over here on set so let's go and add another one we'll call it i don't know i spinosaur i think that's from like jurassic park three or something and it's it's bigger it's got a hundred and it's got a defense of 20 it's not very good defense but in the meantime we want to go and subscribe to our database so let's go here let's go to pokemon db instance and then on before or let's let's do on before add do we want to do it nah let's do after add it doesn't really matter and it's going to take a function that's going to take a pokemon or a value let's see a new value and we're just going to console log that out cool and let's see does it work all right nice okay so all right let me uh here this is a little confusing don't need to do that so if it works what it should be doing is it should set bulbasaur it should set our listener and then anytime a new one gets added then we automatically say we output it which is good looks looks great and then if we want to unsubscribe then we can i guess call that down here i guess but let's put this up front and this time we'll see that bulbasaur comes out and then but not spinosaur let's give it a try yeah perfect so we are subscribing at the beginning that's giving us back an unsubscribe method or function and then we set a value that's going to fire off our after ad and then we unsubscribe and then we do some more setting and it's really really nice very clean so there you go there's a nice observer pattern for you i think it's very very type safe and it also uses makes the best use i would say of a standard javascript paradigm which is a closure and that's how this this listeners works you have that listener is captured essentially by this function or the return of this function so everyone maintains its own list for you it's very clean all right so that's three patterns down got two more to go uh the first one i would say is the visitor pattern so in order to do that we want to have a way to visit every every element in our database so let's just call that visit um all right and it's going to take a a function let's see how i did this before all right say it's a visitor and it takes an item and returns a voip all right that's going to be a function there you go so when you do visit it's going to go through each one of the objects in our database and send it off to you so let's do that let's do visit and we'll go down here and this is really tough so the object values of our database so it's we've got a hash which is a database and this is just going to get all those values and then we're going to go through each one of them using for each and fire off to our visitor it's really that easy so that's one of the things about the gang of four book and how it fits in with uh what we do today the gang of four book being out there in 1994 means that it's it's kind of in the genesis of about of a lot of what we've seen and it's been kind of now built into frameworks so things like for each are really just the visitor pattern from the gang of four book and it's really cool because we can apply those to all kinds of different data sets right so you can apply for each to you know different you know different types of data so all right let me just uh look over here ah denoin's felt oh that's a good combo i like that all right let's go try out our visitor pattern so let's go down here to our our singleton instance of pokemon db and then we will visit each one of those and put out its uh its name how about that cool so let's do it run it again nice so now in the database we've got the bulbasaur and we got the spinosaur and that just gives us a really nice way of traversing whatever our data structure is and that's what visitor is supposed to do it's supposed to hide from you the implementation details of how you've stored everything and just give you a way to hey you i give you some a traversal method or i give you a a method you call me back with everything you found so that's that's the visitor pattern and it's pretty standard it's now baked into almost everything we do along with the publish and subscribe event stuff as well okay and then the fifth one i want to look at is the strategy pattern and that's because i use this one actually a lot so the strategy pattern is an interesting one basically the idea is uh it's it's kind of a play on visitor and a little bit more so let's say that we want a way to uh find the best of of the pokemon in the pokemon in the database and return it so we're going to say we want the best record i guess we'll make it generic we'll call it generic that's yeah or select best how about that so of the data in the database select the best and so for that we're going to have a score strategy we're going to have a way for you to call to specify a function that given an item is going to give me back some sort of number and then at the end of that i'm going to tell you which one scored best pretty easy so the first thing i need to do is have a have somewhere to store all that so i'm going to create a thing called found or variable called found and it's going to say well what's the what's the highest score that i've got the maximum number and what was that associated with so that's going to be the type or undefined and we're going to initialize that to zero as the maximum and then the item to undefined and return whatever we found but of course we now we need to do something with that so let's go through and look at all the values in the database and then call reduce on that now this is my favorite reduce is awesome i love reduce you with reduce you can basically do everything else so reduce is going to take the current found value and the item and it's going to call that score strategy one i'm going to say well what what do i get for the score well i got to call the score strategy on the current item and then if the score that i got back is better than what i have then i'll set my maximum to that score and set my item to whatever that was but of course we need to initialize with something so let's initialize with found and let's see so why is that not happy that should be happy happy happy happy uh what's it tell me all right f.max okay you know what i'm gonna do i'm just gonna copy this over and see what happens yeah okay what was my problem oh i would die i didn't return it that's what it was okay so return f i think that was it yeah cool okay so this is great this is this is how reduce works reduce goes through an array it starts off with your initial value which in this case is found so max equals zero and item equals undefined it then gives you that value in each iteration along with the item and then you do something with that item and return a new value so people use this for adding numbers up they use it for doing all kinds of stuff renews is actually phenomenal hi jscoders so martin fowler let me just check on what flatline's saying uh yes vlad i will definitely put this code up on github and martin fowler a new guy around these not new though inventor dependency injection and other cool stuff okay yeah we'll agree to disagree on dependency injection a little bit flatline i've been bitten in the butt enough times by dependency injection but i do understand that like like react context is basically dependency injection so that's fine anywho all right so this is a really cool function now we got the select best so what we can do with a strategy pattern is i can go down here and i can say cool for my pokemon db i'm going to go and select the best by defense so let's see i'm going to go it's going to give me the defense value nicely hinted there and i'm just going to return that i'm going to say hey cool so this is the best defense pokemon defensive pokemon and then if i were to do this again and say that i want the attack this would be the best uh attack pokemon and let's make sure that they are different so okay bulbasaur's got a 10 for defense in spine okay but let's make uh let's make let's make bulbasaur have a better defense how about that so the best defense would be bulbasaur and the best offense would be spinosaur i guess that makes sense having seen jurassic park 3 i can i can say that that's probably the case so let's see uh console.log best attack is going to be the that one oh look at that give me even the question mark like that that's nice and then best defense is gonna be that guy all right let's run it see see if it actually works cool so the best defense is a bulbasaur and the best attack is a spinosaur nice but isn't that a really nice way to kind of hide or make it easy for you now you can start thinking about okay what am i what's my scoring criteria it allows you to kind of focus on the problem as opposed to the mechanics of how do i iterate through this database how do i get all the records yadda yadda i mean i know that we're working on an in-memory database and it's super super small but imagine if that was like a big paginated database or like a firebase and you got to go and get all the pages and all sort of stuff it hides all that it hides all the mechanics of that and all that for you so you don't need to think about it all you got to do is think about hey you know what what's my strategy here uh for defining deciding which is best so that's a really nice pattern and and there you go so five quick design patterns for you let's just go through so we had a factory pattern which allowed us to create a generic database that matched whatever our our interface was actually hold on let me uh go out on that so it's complete cool all right um we've got a what was the next one you did we did a singleton pattern by doing that instance up here by making a static instance as i say there's multiple ways to do that you don't need to do that that way but this is a very kind of traditional gang of four way to do this that we then did the awesome observer pattern and there's this excellent you know kind of pattern here that you can use to give it a publish and subscribe uh let's see what would happen if we they both had the same attack uh let me just go like and then we also did the visitor and strategy pattern and let me uh let's see if they both have the same attack i'm going to guess that what's going to happen is it's going to be bulbasaur because the first one in is going to win so let's take a look yeah so bubble store wins and the reason is because it's one little thing here if score is greater than fmax then we set it and in this case 5050 you know where both values are 50. it's not going to be greater than it's just going to be equal to but if we did greater than or equal to like that i know it's a little hard to tell it's a ligature but basically equal to or greater than then it would pick the last one so in this case good pick spinosaur hope that helps but yeah uh so really cool pattern there i've used strategy for a bunch of different things basically if you want to kind of separate concerns between the stuff that iterates through data versus the stuff that manipulates the data the strategy pattern and the visitor pattern are great ways to do that okay well it looks like you have a little bit more time so i'm gonna go for six we're gonna try we're gonna do this we're gonna make this happen uh okay so in our starter project there is a json file that's got some additional pokemon in it and there is a a loader which basically loads from a file so you give it a file name and you give it a a class called a record handler that in turn takes it has an add record method on it and what it does is this loader function then calls that ad record for each one of the records in that that file cool so what we want to do is adapt and that's where this is the adapter pattern we are going to adapt our database to connect to that loader function so here we go we have loader and we're going to call it let's call it upfront let's call right after we initialize the pokemon db let us call loader and we'll give it the local file name of data.json cool but now we need to give it that record handler class so let's create a new class called pokemon db adapter and it's going to implement the record handler for with pokemon as our data type and what we need to do we need to implement add record and what what's that going to take well it's going to take a record of type t in this case which is going to be a pokemon but we'll specify that anyway oh wow that was interesting pokemon and with that we are just going to call pokemon db instance to get our our singleton and then set that incoming record so this is going to adapt our pokemon database to our loader system so all we need to do is create a new one of those and send it off let's take a look and see how we do okay so you know what let's go and add in our our after add value a subscription in there and we'll get rid of a couple other things just to so we don't get so much in the console okay cool let's run this and see how see how it do cool okay so i brought in menasaur tough assault and bulbasaur those are loaded in by the loader which has that adapter class to adapt our database to our loader system uh and then at the end of this we went through and we did a visitor pattern where we output every one of their ids so we can see them all so that's another cool one uh you see adapters a lot when it comes to um if for example in the react context of doing react components that wrap you know third-party client third-party js libraries things like that so yes we don't really call it necessarily the adapter pattern but we do kind of end up doing that in real life a lot if we're connecting one day one library to another that's when you'd use the the adapter pattern cool all right well there you go uh six different design patterns all in one video pretty cool um yeah if you have any more questions let me know i did want to you know before kind of wrapping this up i just want to say of course feel free to like and share the video with your friends hit the subscribe button if you haven't already uh i added a new thing you can actually buy me a coffee which ends up supporting the channel for like seo research and thumbnail generation and things like that kind of the ongoing cost of the running this channel you can do that there's a link to that in the description and uh but besides that you know be happy healthy and safe but of course i'll stick around if you have any comments or questions uh just feel free to put those in the uh video and are in the comments and you can keep on going for a little bit dm design thanks for all the great resources pride super helpful thank you um sean carroll i don't think i've ever heard of sean carroll before i'll have to take a look all right cool i hope he's got a decent voice uh yeah all right any other questions was this helpful uh have you guys done any of this does it give you a little background on design patterns and why they're useful let me know drop them in the comments okay well looks like we're wrapping up so uh cool i'm gonna jump on over to the discord server you can have a chat with me over here i'm gonna be over in the uh general pretty soon and uh i'll see you over there all right bye guys have a great

Channel: Jack Herrington

Views: 9,211

Rating: 4.9585061 out of 5

Keywords: typescript design patterns, essential typescript design patterns, typescript, ts design patterns, design patterns in typescript, software design patterns, Design patterns in typescript, typescript and design patterns, typescript and essential design patterns, typescript design system, essential design patterns for typescript, typescript design architecture, typescript essential design patterns, essential design patterns with typescript, typescript design pattern tutorial

Id: JBu2ZTPgiKI

Length: 49min 30sec (2970 seconds)

Published: Sat Mar 13 2021