Chapter 1. What is a single-page application?
Figure 1.1. In a traditional web application, each new view (HTML page) is constructed on the server.
Figure 1.2. In an SPA, the presentation layer moves to the client-side code, and transactions never require a browser refresh.
Figure 1.3. The HTML shell is the beginning structure. It has no content yet, only an empty DIV tag.
Figure 1.4. Subsections of the shell are called regions. A region’s content is provided by a view.
Figure 1.5. In traditional site design, each HTML file is a complete HTML page.
Figure 1.6. In an SPA design, one complete HTML file contains placeholders for the HTML fragments stored in view files.
Figure 1.7. A view is the marriage of data and one or more templates.
Figure 1.8. Views are attached to the DOM dynamically, usually as a result of user navigation, beneath the initial container DIV or one of its regions.
Figure 1.9. Views in an SPA are seamlessly swapped (through DOM manipulation) for a given area of the screen, giving the user a more desktop-like feel.
Figure 1.10. CSS, HTML, and JavaScript are the building blocks for the single-page application. There’s no special language to learn and no browser plugins required.
Figure 1.11. Using regions, an SPA’s views can be placed so that it looks exactly like a traditional web page.