Flyweight
The fly weight design pattern is focused on memory optimization. It's goal is to reduce the size of objects and extract functionality that isn't vital to the object into sub-objects that would enable these features based on need only.
Video Transcript
00:00Welcome back to a brand new section, and in this section we continue Structural Design Patterns Part 2.
00:07And in this section, we're going to go ahead and meet the Fly Weight Design Pattern, the Facade Design Pattern, the Bridge, and the Proxy Design Patterns.
00:17So let's jump right into the first design pattern, the Fly Weight Design Pattern.
00:23The Fly Weight Design Pattern reduces memory usage in large objects by reducing the size of multiple used objects.
00:33The idea is to extract or reduce properties and methods out of an object that is used often and moving those responsibilities to somewhere else
00:43so those responsibilities are then not duplicated into every single instance.
00:49Imagine that you have 10,000 different objects on the stage and all these items are movable.
00:55Now to make it movable, there's all these properties and all these methods.
00:59And now if you have two properties and two methods, you just added 4,000 properties and methods to these thousand objects.
01:09Contrary to that, if you reduced that and took it out into a third-party controller, something that is outside there, that's controlling whatever is movable,
01:17now the instance itself doesn't need all those four new properties slash methods.
01:22And now instead of adding 4,000 methods, we've only added four.
01:26It is a really cool concept and very, very powerful when you need to improve performance in an application that has a lot of objects in it.
01:35So let's take a look at it. Let's start flying in the Fly Weight.
01:40We're still working with structural design patterns and I went ahead inside of our source files, start source files for Section 4,
01:48and I made a little update that enables us to basically create a shadow or maybe fade out an item as it's being clicked on.
01:56I'm just going to click here on the T to tint it so it'll be easier for us to see it in a more sharp color difference.
02:01And the idea is very simple. Whenever we click on something, we basically want to fade it out partially to get it out of our view.
02:08Now, I want to show you the source files and really we're going to change it right away.
02:12But in our circle right now, I've literally added quite a clump of code here.
02:17And this clump of code has been added to every single circle.
02:20Now, I want to broach this and kind of explain why this is not a great idea, especially when you have a lot of circles or a lot of objects.
02:28And that is because when you think about it, this fade functionality is only relevant in a scenario where there's a click on an item.
02:35As long as a click was not made on an item, then all this logic is just a waste of logic or extra logic that isn't needed.
02:42So really, we don't want to add this functionality to every single circle.
02:46More over than that, for example, we wouldn't want to use a decorator.
02:50Remember, decorator is the same thing. They add this functionality automatically to an item.
02:55What we want to do is we want to create something that is very similar to a decorator.
02:59But instead of it being a decorator, what we want to do is we want to add this functionality
03:03only when it's relevant to that specific item.
03:06And even better than that, we want to keep the least amount of data inside of our actual circle
03:12so we don't then inflate the file size of each element of each instance.
03:16So to do that, I'm going to go ahead and just delete everything inside of here that I've just created.
03:20Just make sure to check it out inside of your starting file so you could see how it was created.
03:25And let's go ahead and start working with our new design pattern, which is called Fly Weight.
03:32Now, the Fly Weight design pattern comes from the world of real punching.
03:38I don't even remember the name of it. I'll just leave it in the source file
03:42so you could read a little bit more in the references.
03:44You could read a little bit more about the origins of the name.
03:48But I'm going to go ahead and what I want to do is I'm going to just go ahead and create a new function
03:52and I'm going to call it Fly Weight Fader.
03:59And the idea here is basically we're going to create a fader
04:02and this fader is going to literally just take care of basically getting a reference to the item
04:08or a reference to whatever we want to fade.
04:10And in this process, I'm going to show you, hey, we don't even need to use that icon
04:15that we were using previously, that circle that we were using previously.
04:19What we could do instead is we could literally just go to that item itself
04:22and we're going to use it as if it's a jQuery item
04:25and just ask if the item itself has a class using the jQuery functionality.
04:30So if it has the class of circle and only if it has the class of circle,
04:34then we're going to go to that item and we're going to fade it to that item
04:40and I'm just going to grab the actual current CSS value of opacity.
04:44And again, the reason why I'm doing this is because I don't want to create an extra reference anywhere
04:48because I just don't need one.
04:50And even if it creates a little bit of an overhead,
04:52it's a one-time overhead that is only happening when I'm manipulating a specific item.
04:57And this is really all we really need for our flight weight fader
05:00and all that's left for us to do is actually trigger it whenever it's needed.
05:03Now, I'm going to trigger it outside of my array, outside of my circle,
05:08but moreover than that, I'm going to use the most lightweight way to access my circle
05:13and that is exactly why line 114 is here,
05:16that I'm filtering out to make sure that it's only the circle.
05:19Now, I'm not even going to run an event that is just running for the circles,
05:24but I could.
05:25I could literally just go ahead and just go into my, for example here,
05:31I could say, okay, I just want circles that are inside of the advert
05:34or anything that is inside of the advert to check to see if it's a circle
05:37and if it's a circle, then do that update,
05:39which I could very easily do that.
05:41Or I could go and say, hey, okay, what I really want is only items that are a circle.
05:46The problem with doing this is that I'm actually giving this event to every single circle,
05:50which I really don't want to do.
05:51What I want to do is I want to just capture the event
05:54and then check to see if it's a circle, basically saying that there's only one event.
05:58And in this case, because I'm already using a click,
06:00I'm just going to go ahead and just call the fly fader
06:03and I'm just going to send the item itself.
06:05I'm going to actually send the item itself to test to see.
06:08I'm going to just send this.
06:09The item itself has just been populated.
06:12It's just been clicked on.
06:14Actually, it's going to be E dot, what was it?
06:17E dot target.
06:19And I'm just going to go ahead and wrap this in a jQuery
06:22to make sure that it's going to be a jQuery object.
06:24Now, once I've done that, what I literally did is I just externally to the object itself,
06:29I'm checking to see, basically, I'm calling the fly weight fader
06:32and then when the fly weight fader is happening inside of that function,
06:38all I'm really doing there is checking to see, is it a circle?
06:41If it is a circle, then I'm going to reduce the opacity animated down by 0.5%.
06:46Now, this change is a very big performance changer,
06:49especially when we're talking about a lot of objects.
06:51Not necessarily when there's not that many objects going on.
06:54But if I go ahead and test this, and let me just open up my console
06:57because I probably have your little error here.
06:59So, let's check the console.
07:01So, I'm missing something here in line 113.
07:04So, line 113, oh, I wrote function twice by mistake.
07:08There we go. Let's just fix that really quickly.
07:10Click on refresh, and let's go ahead and test this.
07:14So, there we go. It's still working.
07:16It still has the same beautiful functionality.
07:18But this beautiful functionality is now working without us needing to add this event
07:23to every single circle that is added onto our application.
07:27In this lecture, we met the fly weight design pattern.
07:31In the next lecture, we're going to visit the facade design pattern
07:35and see what is it all about.