Builder Design Pattern Continued
In the last lesson we built out a builder. In this lecture, we continue to implement the logic of our builder into our Singleton. Removing more layers of information out of our main construct %u2013 making it easier to then make drastic changes in the way we implement the content within.
Video Transcript
00:00So I have great news. You just created the most complicated design pattern when it comes to
00:05Creational design patterns in this lecture
00:08We're going to continue working with the builder and what we're going to do is we're going to fully
00:12Integrated into our original singleton we created in our first lecture in this section
00:18We're also going to see the builder in action that way and we'll finish off with sending you home to do a little bit of
00:24Homework if you're up for it to practice the usages of a builder
00:28And why was this design so effective in making our lives easier to modularly change things in our application?
00:35So let's jump right into it
00:38Now that our basic construct could actually be tinted it could move to different places it could be
00:45Received we don't have to send away the actual Dom element directly. So I want to do I want to continue this process
00:52We're not learning a new design pattern here, but I want to go inside of my circle
00:58Generator singleton and what I want to do is I want to create a process. That's a little bit more sophisticated
01:04For one instead of getting the item directly
01:07I'm going to go ahead and just get the item the item itself not the Dom implementation now that I got the item itself
01:13I could continue down to that circle and I could move it and I could move it to where it to that left top and
01:19Literally, that's all I really had to do to create a movement of the item and I didn't have to actually
01:25Continue down the path of actually approaching the item and it's Dom directly
01:30Same is true for the matter of the position right here
01:32So I'm just gonna go ahead here and literally just replace this copy to that process
01:37Now again, if that if imagine that we had here a lot of actions
01:41We could have extracted those actions that relate to that specific item
01:45To that specific item using those builders now once we've done that one of the beauties and one of the powers here
01:51And let me just make sure that everything else here should continue working. So we're creating a new circle
01:58Uh-huh, and then we're adding it in that's happening in one step and another stage
02:03We're creating a new circle getting it and then we're adding it. We're breaking down the steps fair enough
02:09Nothing here needs to change anymore
02:10So if I go ahead and I click on save here and I go back and click on refresh you'll see that literally
02:16Everything should continue working, but it's not okay. So we have here a slight little issue
02:21So let me go ahead here and check to see what is my issue
02:24So my issue is right now is that when I'm actually doing this process and I'm actually adding it onto the stage
02:31Let's go to that stage edition is that we're actually adding it to the stage. We're not adding the item itself
02:37Let me find it. Where are you that's happening in the Singleton itself where we're adding the item
02:43What we really want to do is when we're appending it
02:45We want to actually only then get a reference to the Dom element or the jQuery element
02:49Because that is what we're actually appending on to the stage
02:52So let me go ahead here and just click on one more time refresh and this time around I should get everything working
02:58And if I click on my keyboard, I should see the items are added in same way
03:02so this is really a great great example of using a builder and
03:07deliberately I broke this down because I wanted to talk about one more thing and that is jQuery on its own this usage of
03:13This jQuery that we're building an object here is really a builder behind the scenes because it will take this item
03:19And then it's going to send it to a helper builder that will build that object as it's sending it back to us
03:24So by the way, that's a really the most common
03:27implementation of a builder in JavaScript
03:29Now I want to send you home or you're already home probably sitting on your computer with a homework assignment
03:35Because at this stage you already know a lot of design patterns. We're getting near to the end of the section
03:41What I want you to do is I want you to go and actually create a canvas an HTML 5 canvas figure out how to do
03:47that and then figure out what do you need to change and you'll find out very quickly that you won't need to change that many things because
03:53Most of the changes and by the way and make this a canvas add it as a canvas onto the stage
03:58So every circle will be a canvas that you could draw and color into it and so forth
04:03And I want you or that's one assignment or another assignment is go into your builder instead of creating circles
04:09Go ahead and create flowers. So create a
04:12Let's say red a red flower and a blue flower draw them in using CSS and using JavaScript
04:19I want you to see the power where you could make all these changes without actually affecting almost anything inside of our circle generator
04:27Singleton now one last homework assignment that we're just not not going to get to in this title is I want you o two to
04:34Extract the creation of the factory itself out of the singleton because once you do that
04:40Then you could reuse the singleton reference and change the factory that's being that is being used or define the different items that will be
04:47Added into the factory as you need them. All right, so that is your assignment in this lecture
04:53We continued working with our builder and we're done with the most complicated structures in the creational process
04:59But there's one more design pattern that is completely natural to JavaScript that we're going to be covering in the next lecture
05:05Which is the prototype design pattern?