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:
- What exactly a single page application is
- Why use a frontend framework such as Backbone.js, Ember.js, or Angular.js
- Popular frontend development tools such as Grunt, Gulp, Browserify, SAAS, and Handlebars
- Test-driven development on the frontend
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:
- Bootstrapping the app—connecting to the server via AJAX to download the necessary startup data.
- Rendering the screens based on user actions—monitoring events triggered by the user and manipulating the DOM so that sections of the app are hidden, revealed, or redrawn, which emulate the feel of a desktop application.
- Communicating with the server—using AJAX to constantly send and receive data from the server, which maintains the illusion of a stateful connection via the browser.