Web Application Architectures

Traditional Web Applications

  • Server accepts request
  • Generates HTML response
  • Response rendered in browser
  • User interacts with page
  • Actions result in new request/response cycle

http://example.org/list-of-cities

  • returns a page with a list of cities and a form to filter the list
  • user enters a filter term, clicks 'submit'

http://example.org/list-of-cities?filter=Syd

  • application generates a new page showing only those cities starting with 'Syd'
  • returns HTML page to client, browser displays it

Model-View-Controller Architecture

Applications are often structured as MVC with a database model, application logic in the controller and a view layer to create suitable output HTML pages. All of these parts run on the server to generate a response to the HTTP request.

Front End Web Applications

Modern applications rely more on the front-end - the browser. They make use of the fact that modern web browsers are very capable platforms for running complex code. Web applications are now true distributed systems with work being done both on the browser and in the back-end server.

The start of the change to modern web applications was the rise of AJAX - Asynchronous Javascript and XML where Javascript running in the browser interacts with the web server in the background. This allows the page to be updated with new information without forcing a full reload of the page. AJAX was first used to submit form data, accept responses and update the page to show results all without requiring a full page refresh. This provides a better user experience as they don't need to wait for a full page to load to see the results of a form submission. AJAX made pages more responsive providing a better user experience.

  • Modern applications push more work to the browser (front-end)
  • AJAX allows Javascript code to make requests
  • Javascript can update the page in-place without a refresh
  • Used first for form submission, more responsive
  • Later more of the page is generated by Javascript

As we saw more use of Javascript to build pages the idea of pushing all of the page construction to the front-end becomes more widespread. Instead of the server generating HTML pages to display the data they would just generate the data in machine readable form (JSON or XML) and serve simpler pages that were then extended using Javascript code.

The interaction between the browser based application and the server is now much simpler - the browser requests data from the server and then renders it into the HTML page. User interaction may result in new requests being sent for more data or form data being submitted to carry out actions.

The browser is also now much more capable as a data store. The WebStorage API implemented by modern browsers allow pages to store large amounts of data within the browser associated with a particular domain. Using this mechanism, Google Mail can store all of the headers for your email messages within your browser meaning that it can quickly rebuild the main page display without having to make a request to the server.