Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is a JavaScript "Proxy Pattern"?

Tags:

javascript

I've come across the notion of 'Proxy Pattern' today on jQuery.com, but could not make anything of it. Apparently it is of great use, but I do not understand the idea at all, it sounds alien to me. Could someone please explain it to me in simple terms, "as if I were a 3 year old"?

like image 835
Andrei Oniga Avatar asked Sep 11 '11 16:09

Andrei Oniga


People also ask

What does proxy pattern do?

Proxy pattern is used when we need to create a wrapper to cover the main object's complexity from the client. Remote proxy: They are responsible for representing the object located remotely. Talking to the real object might involve marshalling and unmarshalling of data and talking to the remote object.

What is JavaScript pattern?

A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript web applications. Another way of looking at patterns are as templates for how we solve problems - ones which can be used in quite a few different situations.

What does proxy mean in coding?

A proxy server is a dedicated computer or a software system running on a computer that acts as an intermediary between an endpoint device, such as a computer, and another server from which a user or client is requesting a service.

What is the intention of the proxy design pattern?

Proxy design pattern intent according to GoF is: Provide a surrogate or placeholder for another object to control access to it. The definition itself is very clear and proxy design pattern is used when we want to provide controlled access of a functionality.


2 Answers

Imagine you have site with many ajax requests. There is a change in design. Now before each request you want to display some custom loading gif. You neeed to change all the code where there is an ajax request or you can use proxy pattern.

var proxied = jQuery.ajax; // Preserving original function jQuery.ajax = function() {      jQuery("#loading").dialog({modal: true});     return proxied.apply(this, arguments); } 
like image 61
Ivan Avatar answered Oct 20 '22 06:10

Ivan


In Javascript Patterns book, Stoyan Stefanov describes this pattern as so:

In the proxy pattern, one object acts as an interface to another object. The proxy sits between the client of an object and the object itself and protects the access to that object.

This pattern might look like an overhead but it's useful for perfomance purposes. The proxy servers play a guardian role for the object (also called "real subject") and tries to make this object do as little work as possible.

A real world example

The proxy pattern is useful when the real subject does something expensive. In web applications, one of the most expensive operations you can do is a network request, so it makes sense to combine HTTP requests as much as possible.

You can see an example here: http://www.jspatterns.com/book/7/proxy.html. (take a look at the source code).

You have a list of videos on the page. When the user clicks a video title, the area below the title expands to show more information about the video and also enables the video to be played. The detailed video information and the URL of the video are not part of the page; they need to be retrieved by making a web service call. The web service can accept multiple video IDs, so we can speed up the application by making fewer HTTP requests whenever possible and retrieving data for several videos at one time.

The videos object doesn't call the HTTP service directly but calls the proxy instead. The proxy then waits before forwarding the request. If other calls from videos come in the 50ms waiting period, they will be merged into one. A delay of 50ms is pretty much imperceptible for the user but can help combine requests and speed up the experience when clicking “toggle” and expanding more than one video at once. It also reduces the server load significantly since the web server has to handle a smaller number of requests.

Without proxy

Without proxy

Proxy

With Proxy

Proxy as a cache

As a cache

like image 41
hasser Avatar answered Oct 20 '22 04:10

hasser