Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Js design 1
  • Overview
  • Transcript

4.5 The Proxy Pattern

The Proxy pattern is useful when we want to query an object which may or may not yet be available. The proxy can intercept requests for the object and initialize the object on behalf of clients.

4.5 The Proxy Pattern

Hi, folks. In this lesson we're gonna take a look at the proxy pattern. The proxy pattern uses one object as an interface to another object. It sits between users or clients of the object and the object itself so that clients make requests to the proxy and the proxy makes requests to the object. The clients may or may not know whether they are dealing with the proxy or the original object. The proxy acts as a guardian to the original object and controls requests to it. So this pattern is often used for performance reasons. If the object needs to make expensive requests, such as HTTP requests, we may batch requests together in the proxy in order to send fewer requests to the original object. The proxy may even include a cache that stores requests for future reuse. Another use for a proxy is to delay the instantiation of a slow or resource intensive object. We might need to use this object sometimes in our application, but it's better for performance if we delay the initialization until we definitely need it. In this case, we can have a proxy that receives the request for the object. And in this case we know that we definitely need to use the object so we can have the proxy initialize it and proxy requests through to it. This kind of proxy can be considered a just in time proxy. Let's base the example for today's lesson around this scenario. We can create a new directory, first of all, called proxy. So first of all, let's create a new file called slow objects inside the proxy folder. Inside we can define a simple constructor. So we can just add a method directly to the constructor and inside we can just log a message to the console so that we know it's the original slow object that's being used. So now let's return an init method that creates new instances of our slow object. What I want to do now is just add an artificial initialization delay using a for loop that iterates 1,000 times inside the init method. So, once the loop is done, it returns a new instance of the object. Great, so now let's set our proxy objects in a new file called SlowObjectProxy. We will need to use the require function here. And first of all, let's just add some variables. We'll need the original slow object as the proxy will wrap its interface in its own matching interface. Now let's add the constructor for the proxy object. Now we can add a method on the proxy that matches the slow objects method. Inside here we can first add a new variable. Then we need to check whether the object, the slow object, has been initialized previously. If the slow object instance is foreseen it means we haven't had to initialize it yet but we do need to initialize it now so we can use its init method to do that. If the object has already been initialized we can just invoke the same method on the slow object. So we know that the object is going to be slow to initialize, but we don't know exactly how long it will take. So we'll need to do something to wait until the object exists before trying to call this method. Let's keep things simple for this example and just create an interval that polls the object. If we were implementing this for real, we'd probably want to use a promise instead of an interval. But let's focus on the pattern at hand without getting sidetracked into using a promise library. So next we can add the invokeMethodWhenExists function that the interval will invoke every 100 milliseconds in order to check if the object has been created yet. We just check the slow object instance variable and if it's truthy, we can clear the interval to stop the loop and invoke the method on the slow object. In this case, we'll add a log as well so that we know the proxy is working as expected. So let's just add the new init module for this example to the main.js file, first of all. And now we can add the init module itself. And now let's run the example in our browser. So, we've got a problem on line 10 of the init module. Let's just take a quick look at that and see what the problem is. And we actually need to set the myProxy instance using the slowObjectProxy. Let's try once again, doesn't seem to have made a difference. Hang on a minute. And the problem, of course, is that we need to just return a new instance of the slowObjectProxy. So let's do that at the end of the file. Let's see if the example will work now. And as you can see, things are working as expected. We see that the slowness is happening. But we don't see any JavaScript errors because the proxy waits until the object has been initialized before calling its method. And we can see the two log methods, one from the proxy saying that it's proxying some method and one from the original slow object to say that the method on the slow object was invoked. So the first time that the proxy invokes the method, it will be quite slow, as you saw there. Bu, subsequent times it will be much faster, because the slow objects will already have been initialized. One of the great things about this is that even when a client initializes the proxy, whether or not it knows it's using the proxy or the real object, we still might not actually need to initialize the slow object. It's only when its method is called that we actually need to initialize it. So in this lesson we looked at the proxy pattern and saw how we can use it to control access to another object. This may be because the object takes a long time to initialize or because it results in expensive operations being carried out. The proxy exposes the same interface as the object it's proxying and sits between clients and the original objects, intercepting requests to the original object and handling them on behalf of the client. Thanks for watching.

Back to the top
Continue watching with Elements