Skip to content

Application architectures of Web1.0 and Web2.0

August 12, 2009
The application architectures of Web1.0 and Web2.0 and the differences between them with regard to factors like response time and user interactivity can be well illustrated with the help of a simple example.
Take for instance a Login page comprising of two fields, username and password and a submit button. If a user wants to check the availability of a particular username, he is expected to enter the username, password and then click the submit button. The first level of validation happens on the client side by means of JavaScript. If the entry is invalid, an alert box appears prompting the user to re-enter the field. If the entry is valid, the page is submitted to the server which then checks the database and then refreshes and reloads the same Login page with a user-friendly message indicating the availability or non-availability of the username. So the full application interface is sent back to the browser with a new data. This is a typical example of a Web1.0 application which is based on the click, wait and page refresh interaction model. Thus in a Web1.0 application we can say that
(i)Page is the basic unit of the application.
(ii)Every event triggered by the client such as a button-click in the above example, is represented by a page, ie, either a new page is loaded or else the same page is refreshed and reloaded in which case the entire browser window needs to be refreshed (as in the above example) including the fixed interface elements that do not change from page to page.
(iii)As the server keeps refreshing and reloading the same page each time an event is triggered by the client, the response time will increase.
(iv)The user needs to wait and cannot carry out any further process until the server responds and updates the browser. The process will take even longer in case of a failure message like username not available.
The following diagram shows browser and server contact in Web 1.0 applications.

Let￯﾿ᄁ￯ᄒタ￯ᄒルs take the same example with a Web2.0 application.
The above diagram shows the Web 2.0 approach.
The same Login page and form fields are considered here. Assume that the username is entered. Once the cursor loses focus of the username field, an event is triggered that initiates the validation process for the username field.If the entry is invalid, an error message is displayed in a small <div> element after the javascript client-side validation. If the entry is valid, JavaScript will request information from the server regarding the username.
In this case the entire page is not submitted to the server and so the user can continue entering the password while the server processes the username thereby promoting asynchronous communication between the client and the server. While the user is entering the password, the response is delivered back to the page. It is also possible for another script to request data from the server while the server is already processing the request initiated by the first script. This kind of interaction between the client and the server is called asynchronous communication as the user does not have to wait until the server responds. The server-process thus takes place in the background without the knowledge of the user enabling a very rich online user-experience. Then depending on the availability of the username, either a success or failure message can be displayed in a small <div> element.
Moreover, the button in the above example can also be disabled to prevent the user from accidentally clicking the button before entering valid data. Hence Web2.0 applications facilitate enabling and disabling of interface elements.
Thus we understand that in a Web2.0 application:
(i)A page is broken down into smaller components or sections. Events are triggered within these components by the client.Ex.leaving a form field.
(ii)Asynchronous communication between client and server.
(iii)Enables updates to smaller portions of the interface. ex<div> element
(iv)Enabling and disabling of interface elements.
We may deduce the following differences with regard to the application architecture of Web1.0 and Web2.0:
Page is the basic unit in a Web1.0 application. Every event in a Web1.0 application is represented by a page.
The entire page is broken down into smaller components or sections. Events are triggered within these components.
The application interface and data are tied together. They are delivered to the browser by the web server at the same time, ie, each time data is changed, the interface must be reloaded.
Interface is independent of data. The entire interface need not be refreshed and delivered each time an event is triggered.Web2.0 applications permit updating small portions of the interface in response to events triggered within the components that make up the page. Hence there is no need to refresh and reload the entire application interface for a data change.
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: