Getting things working again
In the last lesson we introduced the Facade design pattern, In the process we broke our application. In this lecture, we move things around and get our application to work again.
Video Transcript
00:00In the last lecture, we created the facade design pattern,
00:03but in the process, we broke our application.
00:07So after breaking our application,
00:09it's time for us to unfazod the facade
00:12once we're done using it
00:13so we could then have a working application.
00:16Let's just jump right into it.
00:17Let's fix the mess we've created.
00:21So what I wanna do next is back in my circle,
00:24what I wanna do is I wanna add two new properties.
00:28One of these properties are gonna be called just the circle
00:31and let me just copy this whole thing.
00:32We're gonna have a get ID and set ID.
00:35The get ID is literally just gonna go ahead there
00:37and just return to us whatever the ID is currently.
00:41And I'm gonna use the this.id
00:44and just literally just return our current ID.
00:47Even if none is there,
00:48then it's just gonna return to us nothing.
00:50I'm fine with that.
00:51And we'll have also a set ID
00:53and our set ID will accept that ID
00:55and it's literally just gonna go ahead and assign it.
00:58No questions asked, no questions asked,
01:01whatever ID we wanna send in, it will accept it.
01:04Beautiful.
01:05Now for our public API for our facade,
01:08we really wanna add that get ID into the mix.
01:11So I'm gonna go ahead into my shape facade
01:13and I'm just gonna go ahead and add that get ID
01:16and I'm gonna go ahead there
01:17and create that function really quickly
01:20and call that shape.get ID
01:22and just return that ID to us
01:24by setting it to be the return value there.
01:27And there we go.
01:28We have now the get ID as well.
01:30Beautiful.
01:31So now that we configured the two,
01:33I added those ID elements into the element.
01:35The next step is to go back into our,
01:37into our, into our singleton.
01:42And in our singleton, what I wanna do
01:43is I wanna go into the process of the creation
01:46and change the steps here a bit.
01:48For one, I wanna make sure
01:49that I'm gonna add that push of the circle earlier on
01:53because I'm gonna need a reference to it.
01:55And literally, I wanna put it there
01:56right after we create the circle.
01:58I wanna go ahead and push that circle within.
02:02The next step that I wanna do
02:03is I wanna go to that circle
02:04and I wanna go ahead and set that ID of the circle
02:07to be our aCircle.length.
02:12Probably minus one.
02:13But if I go ahead and do this just before
02:15I push the item in,
02:16then I won't have to even do minus one
02:19because the length will be one shorter than
02:21which will give us the real position
02:23of the item where it's at.
02:24And now when we're gonna send our shape facade
02:27through the circle
02:28and it's gonna go throughout inside of this element,
02:31the user will still be able to have access
02:34and interact with all the public APIs
02:36that we deem appropriate
02:38which is basically everything besides the get
02:40because we don't want them to have access directly
02:42to our jQuery.
02:44And if they do, they have to not work with our library
02:46because we're assuming that our library might change
02:49and we might not use jQuery in the future.
02:51So if they decide to go and manipulate it directly
02:54with their browser, beautiful.
02:56But it's not going through our interface
02:58which is a really big advantage
03:00because then we can then control it much more easily.
03:03All right, so we control and change for example
03:05if tomorrow we wanna use
03:07a completely different selector API
03:09because of constraints or whatever it might be,
03:11we're not gonna have to worry about other people
03:14and their problems in their code
03:16because it's not gonna be relevant to our interface.
03:18Our interface should remain working
03:20the exact same way as it did before
03:22because we didn't expose to them
03:23that we're using jQuery
03:25and we could decide later down the line
03:26that we don't want to.
03:27So with that said, let's go back here.
03:29So when we're inside of our creational process here
03:33and I'm gonna add the item in,
03:35the circle doesn't have get anymore.
03:37What does have?
03:38Our circle that is actually inside of our array here does.
03:43So I could go ahead here and get a reference
03:45to our actual real circle
03:47and I'm gonna go ahead here
03:48and what is the ID?
03:49All I have to do is to get ID
03:52and that's gonna be the right ID
03:53and then I could go ahead and get the actual item itself,
03:56the DOM element itself, the jQuery element itself,
03:59which I then send on to my stage.
04:01And all this is done behind the scenes
04:03where the user does not have direct access
04:05to that get method,
04:06which is critical for us not to give them direct access
04:09to the raw things that are going behind the scenes
04:11with our library.
04:13So if we go ahead here and give it a shot,
04:14hopefully everything should be back and working
04:17and we still are not there yet,
04:18but let's see, line 166, is it?
04:24Yeah, let's go ahead and check that.
04:26Line 166, the set ID seems to not work.
04:30Let's trace back to figure out why,
04:33oh, because I put here an uppercase C by mistake.
04:35Sorry about that.
04:37So that was not our class,
04:38we didn't have direct access to a class there.
04:40Let's go ahead and click here on refresh.
04:42Hopefully now everything should be working.
04:44Yay, and everything is working
04:46and even if I press with my keyboard,
04:47everything is working and I could still tint everything
04:51and I could still click on stuff
04:52and they'll disappear or fade out
04:54just like we had previously.
04:58So there you go, voila.
04:59We're done with another design pattern in our library
05:02and our application is getting a lot more sophisticated
05:05as we're going along.
05:08In this lesson, we completed the sample
05:11of the facade design pattern
05:12and really saw how to fix our application
05:15as well in the process.
05:17In the next lecture, we'll meet the bridge design pattern
05:20which will be very familiar to you
05:22so it's gonna be a relatively short lecture.
05:24See you there.