An Overview

The Data Reflection pattern keeps the web application content in sync with the database. This happens because the pattern runs in the back-end code and updates data that has changed while a user is logged in and using the application. As a typical XHR model does, the Data Reflection pattern starts with the user interface, where a user interacts with an element and the application makes a request. The major difference is that this pattern programmatically consists of JavaScript's setTimeout method. This method continuously makes XHRs through the Ajax engine to either call a server-side language and check for database updates or to check an XML file for updates. If there are updates, the new data is returned to the Ajax callback method and the application content is updated (or reflected); otherwise, there is nothing to reflect and therefore we do not complete the request. Figure 17.1 shows the data flow of the as it continually makes XHRs to the server-side language.

Figure 17.1. The constant data flow of the Data Reflection pattern.

This figure shows the data flow as the pattern makes requests to a server-side script and ultimately the database, but keep in mind that the pattern could loop back by requesting an XML file as well. Figure 17.1 shows the client on the front end of the application, with the setTimeout method continually making a request through the Ajax engine. When the Ajax engine receives the request, it either sends a POST or GET as an HTTP request to a server-side language or engine. The server-side engine checks the database for updates and does one of two things depending on the results. The results could yield no changes, which would cause the server-side script to respond to the Ajax engine with no updates, or the script could respond with updates that exist in the database. If there are updates in the database, the engine can respond with XML or JSON, which the Ajax engine will delegate to a callback method. The callback method will parse this data and reflect the changes in the user interface or the GUI as (X)HTML and/or CSS. This might seem like a lot of steps, but after we have the Ajax engine and the server-side engine running, we will not have to modify them any further. This means that after the application is set up, we should not have to touch the code and the users will keep the application running with fresh data. Now that we have an understanding of the Data Reflection pattern, let's step it up a notch and add more layers to the pattern. In this next section, we will extend this pattern to satisfy multiple users and allow them to interact with our application simultaneously with real-time updated content.

The Multi-User Pattern

The Data Reflection pattern can be extended to accommodate much more functionality. A perfect example of this is the Multi-User pattern. It is based on the Data Reflection pattern, yet it delegates the functionality between multiple users to provide them all with updated information from other user requests. Take a look at Figure 17.2 to get an idea of how the data flows from one user to the next in this pattern.

Figure 17.2. The Multi-User pattern as an extension of the Data Reflection pattern.

An example of this pattern is a chat application. Imagine multiple users from remote locations typing data into a chat window and clicking Send. Each time a user clicks the Send button, an XHR is made to update the database or file that is currently holding the chat content. While the users are chatting back and forth, this pattern is consistently polling from the server in the background to see whether there are any content updates on the server that a user does not yet have. If a user is up to date, nothing happens, but if she is not, she receives the latest content from the server. This is just one of a million examples of how we can use this pattern, but the same concept applies as far as the functionality works and the data flows in the back end of the application. Think about any situation that can possibly have multiple users and this pattern can be applied over and over again without changing the base code that we will write in the next section. Let's take a look at this code and how it will apply itself to the functionality in our application.