Using Revealing Module Pattern with Web Interface Design

Now that we have looked at the major problems with the existing JavaScript code, let’s take each of the problems and see what we can do to avoid them.

To fix this, we needed to separate the business logic from UI logic. E.g. code to update user information on server should not be defined in the click handler of the submit button. We should, instead, put the ajax call in a separate function, taking the user details as parameters. The click handler should gather user details from form elements and pass them to the function. Similarly, use callbacks to update UI when a response is received from the server.In UI code, we should be able to somewhere define ids of various form fields instead of hard coding field ids everywhere.

There should be only one script with document ready handler, and it should be responsible to initialize various modules used on the page.

Coding/Design Guidelines

Jspx Design Guidelines

• Every id in a jspx file should be unique.
• Every jspx file should be included inside a div container of its own; the container should be given a unique id in the jspx file.
• All form fields should use a common markup style at all places e.g. each field should be placed inside a div container with proper classes such as ‘textbox’, ‘disabled’, ‘read-only’ etc

JavaScript coding guidelines

• Organize the code in some meaningful namespaces, clearly separating business logic, UI logic and form validation and error handling code.
• None of the code in business logic must interact with UI. Any of the business logic functions must accept required data and callback functions as arguments.
• The business logic modules should be singletons unless it is required to create multiple objects of the module.
• A UI module should be created for each jspx file.
• For each jspx file included, a module must create objects of each of the module respective to included jspx files.
• Any HTML element should be accessed only by its respective module.
• While creating a child UI module, the parent module must pass the full id of its child jspx’s container div to the child module.
• Define all form fields and HTML elements of the respective jspx accessed in the module.
• While accessing any field by id in a UI module, the field id should be appended to the full id of the container div passed by the parent module. (We implemented a utility module to transparently handle this).
• Define callbacks in each UI module for any event that might be interesting to the parent module.  e.g. submitButtonClicked, someCheckBoxChecked etc.
• In case a child module needs to update parent module for some event, it must do so via callbacks. The parent module needs to set these callbacks at the time of creating the child module object.
• Define public functions for actions requested by parent module. e.g. enableSubmitButton(), showSomeHiddenElement() etc.
• In case a parent module needs to update UI for a child module, it must do via public functions exposed by the child module.
• Don’t access HTML element attributes directly. For example, to hide elements don’t change display style. Create CSS classes for each required state of HTML elements and add/remove these classes to update any
• Avoid creating id based CSS rules and using classes in JavaScript.

• The business logic is now completely separate from the UI code, and can be used independent of UI code.
• The UI code has direct mapping with the jspx files. If a jspx file is modified, only its respective is modified.
• Since all fields and HTML elements are defined in each module, changing ids of fields in jspx file requires just a single update in its module.
• All JQuery dependent code has been moved to the ModuleHelper module. Although it might still require a lot of other changes, replacing JQuery with any other library requires minimal UI code changes.
• Each HTML element is now uniquely identifiable by its module, even if the jspx file gets included multiple times on the same page.
• Form validations and error handling are now completely removed from the UI code.

Further Reading: