In this chapter, we will take a look at web application development from the frontend perspective, specifically with a Single Page Application (SPA), also referred to as thick client apps. With SPA, a large chunk of the presentation layer is off-loaded to the browser, and the browser is responsible for rendering pages, handling navigation, and making data calls to an API.
In this chapter, we will cover:
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 would require 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 e-mail client. User interaction with the application feels just as responsive as 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 a Single Page Application typically involves having a single HTML page as the source of the application that loads all of the necessary JavaScript in order to trigger a series of events that include:
3.144.115.154