Abstraction
The goal in this lecture is to prepare the ground work for the next following lectures. Our goal is to make our singleton abstract so it can be less aware of the items that it is controlling opening the doors for us to change the interface that will be used.
Video Transcript
00:00In the last section, we were talking about
00:02Creational Design Patterns.
00:05Well, in the next two sections,
00:06our focus is gonna be on Structural Design Patterns.
00:09I just wanna say two notes.
00:11Creational was about the creation of classes or objects,
00:15such as the Singleton as we've met previously.
00:18Well, contrary to that, Structural Design Patterns
00:21are really intended for structures that exist
00:24or fundamental ideas of how to build structures.
00:28A lot of cases, it's about how to change structures
00:31and how to interact with structures
00:33so they'll work with one another.
00:34You're gonna really get this
00:36throughout the next two sections.
00:38Now, in this lecture, well, in this section in part one,
00:42we're gonna be talking a lot about abstraction
00:45and is gonna be the main topic of this lecture.
00:48We're gonna also learn about the adapter design pattern,
00:51the composite design pattern,
00:53and even the decorator design pattern.
00:55So let's get started with abstraction.
00:58We're gonna go ahead and abstract our Singleton
01:01and try to find out there what are the things
01:03that could be abstracted
01:04and why would we wanna abstract them.
01:06And in that note, I just wanna say a few things
01:09that although abstraction is key to making flexible designs,
01:13it does not mean that everything needs
01:15to be always flexible.
01:16And it's really a matter of costs a lot of time
01:18because making everything flexible
01:20takes a lot more development time.
01:22So really, not everything needs to be planned in advance,
01:26which is another kind of core belief that I have
01:28when you're going down to programming large infrastructures
01:32is create a solid shell.
01:34And as you're growing, adopt that structure
01:36because end of the day, a lot of times what happens is
01:39you overplan, overbuild, and then end up needing
01:42to change a lot of stuff which happens often
01:44when the client has a change of heart.
01:46So instead of overplanning, start building,
01:49and then modularly update your content
01:51and make it more flexible according to need
01:54to fit the changes that are happening.
01:56Unless you know exactly the build that you need to create,
01:59which is not very common, and then obviously,
02:01you could then decide in advance
02:03how flexible you want your structure to be.
02:06But in most cases, you're gonna choose that flexibility
02:09as you're developing, as you're going along,
02:11just as we are doing and as we're going to do
02:14in the next two sections.
02:16So with that said, let's jump right into it
02:19and let's take a look at abstracting our singleton
02:21to get us ready to create the next design patterns
02:25that we're planning to do in this section.
02:27Our sample code is continuing to grow
02:29and before we actually move into the design pattern of now,
02:34which is the adapter design pattern,
02:38before we move into the design pattern,
02:40this design pattern, the adapter,
02:42I wanna go into our singleton,
02:44the circle generator singleton.
02:46And I wanna extract out some of the functionalities.
02:49For one, the circle factory is great
02:52because it is abstract.
02:53But the registration of what circles
02:56is kind of not appropriate for this container
02:59because we wanna be able to add different types
03:02of circle builders or things that are not even circles.
03:05For that matter, let's go ahead
03:06and do some small changes in our interface.
03:10I'm gonna change the circle factory name to shape factory.
03:13So let me just go ahead there
03:15because we don't really care if it's a circle
03:16or not at this stage, it's going to be a shape.
03:19Once it's a shape, let's go ahead there
03:21and also update inside of our singleton
03:24that we're approaching shape factory.
03:27And I'm just gonna go ahead here
03:28and just change it to be SF and just scroll down here,
03:32find all spots where I'm actually approaching it
03:35and they were all changed, beautiful.
03:38The next step that I really wanna do
03:40is I wanna go ahead and move these registrations
03:43outside of the initialization process.
03:45So let me just go ahead here
03:47and I'm just gonna take it out of the initialization,
03:50automatic initialization.
03:52And instead of that, what I really wanna do
03:54is I wanna create basically a function
03:56that would register new factory elements
03:58or register new shapes for that matter.
04:02So let's think about a good name for that.
04:03We really wanna register items.
04:05So I'm gonna register instances or register shape.
04:12So we're gonna register shapes this way.
04:15The first property that we're gonna send
04:17into the registration is gonna be a name
04:19and the next is gonna be a class.
04:21All that's left for me to do is take advantage
04:24of this SF builder that I already have here
04:26and just go ahead and send the name
04:29and send the class through.
04:31Now what this did is it enabled me to take out
04:33this logic set and take this registration process
04:37from out of this register shape configuration.
04:41All that's really left for me to do
04:42is to add that into the public interface.
04:45So I'm gonna go ahead here
04:46and I'm gonna call this register.
04:49And I'm gonna go ahead and call the register shape,
04:54adding it into my global interface.
04:56All that's left for me to do
04:57is to basically register the items whenever I need them.
05:00So let's say if I'm down right here,
05:02this is really where I wanna register those items
05:05and that's happening as soon as the document is loaded,
05:08making it easy for me to use the same interface
05:11for other applications,
05:12but using different builders for them,
05:14if I wanted to, without needing to revisit
05:17that initial interface again.
05:19So I'm gonna go ahead here
05:20and just instantiate my Singleton a lot earlier now
05:24because really this is just for the sake of presentation
05:27and I'm gonna go ahead here
05:28and I'm just gonna register and register those two items.
05:32Now I don't need to reconfigure that Singleton again
05:35because it's already gonna be available
05:36throughout the methods that are living within the ready.
05:40So CG should be ready all over.
05:42So, you know, and a good name would probably
05:45to rename the circle generator Singleton as well,
05:48but I'm gonna leave that for you.
05:49Now, the next step that I wanna do
05:51and this is gonna really be the preparation work for us
05:54for the next lecture.
05:55What I wanna do is I wanna go back into this interface
05:58and by the way, let's just test everything out.
06:00So if I go back into my browser, click on refresh,
06:03hopefully everything should continue working
06:05and it seems like it is.
06:07Beautiful, everything is still working.
06:09So let's continue abstracting
06:11our circle generator Singleton.
06:14The next item that we would love to abstract here
06:18is gonna be our stage itself.
06:20Now the stage itself is really critical
06:22for us to basically have a stage, right?
06:26But our problem right now
06:27is that we're relying on jQuery absolutely.
06:30And what if we wanna use the same circle generator
06:34Singleton in the future maybe for Canvas
06:37or for another interpretation
06:38or maybe we just don't wanna use jQuery in the future.
06:41Maybe we wanna use another interface
06:44or maybe we wanna use something native
06:46to cut down our file size.
06:48We really don't wanna need to revisit
06:50the circle generator Singleton more than once.
06:54To be able to do that, what we wanna do
06:56is we wanna abstract this logic
06:58wherever we're using the stage itself.
07:01So to do that in theory, what we would love to do
07:03is have some sort of a stage
07:05that will be able to remove and add elements
07:08without needing to know exactly how it's doing it.
07:11To be able to do that,
07:12we're gonna have to basically leave this variable
07:15at first undefined initially
07:16and add another method that will enable us
07:19to set a stage function, set stage.
07:23And the set stage would accept an interface.
07:25So it's gonna be an accept a stage.
07:29And all it's really gonna do
07:30is it's gonna just go ahead there
07:31and register our stage with a stage.
07:35Now the problem with doing this step
07:37is that if we never set the stage
07:39our application wouldn't work anymore.
07:41So if we try to run it
07:42and we would run it as trying to add stage elements
07:44and we'd get an error because the stage is not defined.
07:47So we definitely would have to add here some logic
07:50if we're really building out an application
07:52to kind of highlight and say,
07:53whoa, whoa, you must set your stage first.
07:56But I'm gonna go ahead and ignore that
07:57and just add another set stage method,
08:00making it public.
08:02Now that my set stage is public,
08:04I could go down into my ready document.
08:07Once I registered the builders,
08:08I'm gonna go ahead and also register our set stage.
08:13And what is our stage that we wanna register?
08:15It was actually our advert stage,
08:17I believe it was our advert.
08:19So I'm gonna go ahead here
08:20and I'm just gonna send in for now our stage.
08:23Now the step that I've just done here
08:25on its own already enabled me to make a modification
08:29that enabled me to then work with this implementation
08:32using jQuery without the content itself
08:35being contextually aware that we're using jQuery.
08:39Although we are using a signature
08:40that is very commonly used in jQuery such as stage append.
08:45But if we were gonna create something
08:47with a completely different interface,
08:49we could then go ahead and then change it
08:52and use it according to whatever we want.
08:54So we could create basically a wrapper
08:57that would then be sent in
08:58instead of the creation process
09:00where we're sending in the advert through the set stage.
09:03Once this advert is set and the stage is set,
09:06it's now gonna be very easy for me to change my stage
09:09and redefine what is my stage.
09:12In this section, we focus on abstraction
09:14to prepare the groundwork for our next design pattern
09:17which is gonna be the adopter
09:19which you'll see in the next lecture.