Trying to get a diagram together that explains the bits of a modern Ajax driven web client to fellow techy co-workers.
So you have the data Object Layer (JSOL), the Control Layer (JSCL), the Display Layer (JSDL), the data Fetch and Post layers (JSFL and JSPL) and then the UI and XmlHttpRequest object. That is all client side communicating through a managed (JSFL, JSPL) XmlHttpRequest pipe with the web services on the server.
Effectively it is a MVC (Model View Controller) architecture but on the client side, in the browser.
A user may hit a button on the client which the JSCL picks up. It checks the JSOL to see if the required data is there, lets say it is not. So it then tells the JSFL to fetch the required data which goes through to the web services and then responds back up to the JSCL which updates the JSOL. The JSCL then fires the correct view in the JSDL which gets the data out of the JSOL and sticks it into the UI via the DOM.
If it is a data change then the JSCL will update the JSOL and tell the JSPL what data to update on the server.
Some of the principles of the architecture are:
- Only the JSCL interacts with the JSOL. The JSCL will update data when either fetched from the server or changed through the UI. It will send data to the UI via the JSDL and to the server via the JSPL.
- The JSPL and JSFL have their requests managed by the JSXM which unifies such tasks as batching and caching.
- The JSDL consists of views which when filled with data are inserted into the UI’s DOM. The JSDL doesn’t have any logic in it, just templates really. The JSCL does the logic.
