How to apply Facade design Pattern in Real Javascript applications
Facade or Modular pattern, is a slick programming design pattern available in Javascript to perform some special tasks.
Basically, Facade pattern prevents or reduces direct interaction with complex design structure implemented in the background of an application, rather it allows the use of the complex background for completing specific tasks(functions) which could be grouped into modules.
Major advantages of Facade pattern is that it gives room for extensive method chaining and large scope for object-property sharing. This pattern becomes indispensable whenever a huge server request is required to be made once, to enhance the performance of the application. The example below illustrate a simple approach to implementing Facade pattern in a real world application. Performance screenshots would be used to illustrate the benefits of the pattern.
I have a previous article that explained the Object Oriented Programming pattern used in this examples.
Part 1: Unitary Method of handling request
This part shows a traditional method of making and serving requests and responses. The first section is the HTML and CSS for creating the UI of the application.
The second section in this part is the Javascript which has the constructor and the prototype methods making the server request.
the above snippets illustrate unitary request being made each time the “load comment” is clicked. Major challenge here is that, script is rerun immediately button is clicked to load a new comment which would be a huge performance bottleneck to the server and app users eventually. The code on line 13 to line 48 handles the clicking loop which seem alright but consumes much memory as it’ll be seen soon in the performance snapshot.
Each time the “Load comments” button is clicked as a unitary function to load next comment data, a new server request is made as seen below in the console which consumes memory and time which could go extreme when the number of users is significantly high.
The number of requests made is 13 even though, no new data is received from the server.
Part 2: Facade pattern implementation
As said earlier, the Facade leverage on the server request being handled once from another object, to be consumed by other block of functions (modules).
The logic applied in the implementation above is passing out the “userComment” property object, returned from the “dataRequest” constructor on line 50 which represent “our complex” server-dependent part of the application.
Notice that when the “dataRequest” constructor was created on line 3 the userComment property was undefined, but on line 22 the userComment property was assigned the entire data response coming from the server
A new constructor was created on line 52 to consume the returned data from the dataRequest constructor by accessing the userComment property onMouseDown as seen on line 58.
This is where things become really interesting, a module is created on line 62 to contain as many function as possible (and even as nested as could be required) the module is a function expression that returns an Object literal that contain its function — this is what make up the whole meaning of Facade pattern. the module owns the getComment method available in the Object literal being returned on line 67
The module had to be in the window.onmousedown function because the userComment property value will not update from its undefined predefined state to have the required data needed to run the required operation even though the method has been invoked on line 50.
Finally the “getComment()” function is fired onclick of button on line 96 to run the required operation. The result is seen below
Each time the “Load comments” button is clicked after implementing Facade patter to load next comment data, NO new server request is made as seen below in the console not matter how many times the “Load comment” button is clicked, this method therefore enhance the application performance and save server space.
Notice the optimizing usefulness of the Facade pattern compare to the Unitary request becomes obvious when data is looped has seen above.
Conclusion
I believe you now have a grasp of how to implement Facade pattern in your development and why you should choose over the Unitary(Traditional) method of making server request and handling responses.
Please ask your questions below in the comment section. Thanks!
