List of Figures

 

Chapter 1. Introduction to isomorphic web application architecture

Figure 1.1. A wireframe showing the homepage for All Things Westies, an isomorphic web app

Figure 1.2. Isomorphic apps build and deploy the same JavaScript code to both environments.

Figure 1.3. The isomorphic app flow from initial browser request to SPA cycle

Figure 1.4. The server-rendered version of the All Things Westies homepage

Figure 1.5. App flow for the initial server render

Figure 1.6. Browser render and bootstrap—between steps 1 and 4, the app won’t respond to user input.

Figure 1.7. Google PageSpeed Insights presents a warning for a single-page application. The application makes too many AJAX calls to fetch visible content after the initial load of the page.

Figure 1.8. In a single-page app version of All Things Westies, spinners would be shown during the first load instead of the real content.

Figure 1.9. Comparison of when the user sees the content of a web app. An isomorphic app displays its content much sooner than a single-page app.

Figure 1.10. Comparing the DOM trees: the virtual DOM changes are compared to the browser DOM. Then React intelligently updates the browser DOM tree based on the calculated diff.

Figure 1.11. The view (React) uses Redux to update the app state when the user takes an action. Redux then lets the view know when it should update based on the new app state.

Chapter 2. A sample isomorphic app

Figure 2.1. The home screen for the recipes app you’ll build in this chapter