What is a single page application?

The current trend with sophisticated web applications is to emulate desktop applications and veer away from the feel of a traditional website. With traditional websites, every interaction with the server requires a full-page postback that makes a complete round trip. As our web applications become more sophisticated, the need to send and retrieve data to and from the server increases.

If we rely on full-page postbacks every time, we need to facilitate one of these requests; our app will feel sluggish and unresponsive, as the user will have to wait for a full round trip with every request. Users demand more from their apps these days, and if you think about the application we've written, the Like button is a perfect example. Having to send a full-page postback to the server just because we wanted to increment a counter by one seems like a lot of unnecessary overhead. Fortunately, we were able to easily rectify this using jQuery and AJAX. This is a perfect example of how a single page application works (only on a much larger scale).

A great example of one of the first, standout single page applications is Google's Gmail. Gmail gives you an interface that is similar to Microsoft Outlook or any traditional desktop-based email client. User interaction with the application feels just as responsive as with a desktop application--the page never reloads, you can switch panes and tabs within the application with ease, and data is constantly being refreshed and updated in real time.

Creating an SPA typically involves having a single HTML page as the source of the application, which loads all of the necessary JavaScript in order to trigger a series of events that include:

  • Bootstrapping the app: This means connecting to the server via AJAX to download the necessary startup data
  • Rendering the screens based on user actions: This means monitoring events triggered by the user and manipulating the DOM so that sections of the app are hidden, revealed, or redrawn, which emulates the feel of a desktop application
  • Communicating with the server: This means using AJAX to constantly send and receive data from the server, which maintains the illusion of a stateful connection via the browser
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.128.200.220