Isomorphic Web Applications
Universal Development with React
Elyse Kolker Gordon
  • May 2018
  • ISBN 9781617294396
  • 320 pages
  • printed in black & white

A practical guide to performant and modern JavaScript applications.

Bojan Djurkovic, Cvent

Isomorphic Web Applications teaches you to build production-quality web apps using isomorphic architecture. Designed for working developers, this book offers examples in relevant frameworks like React, Redux, Angular, Ember, and webpack.

Table of Contents detailed table of contents

Part 1: First steps

1. Introduction to Isomorphic Web Application Architecture

1.1. Isomorphic Web App Overview

1.1.1. Understanding how it works

1.1.2. Building our stack

1.2. Architecture Overview

1.2.1. Understanding the application Flow

1.2.2. Handling the server-side request

1.2.3. Rendering in the Browser

1.3. Advantages of Isomorphic App Architecture

1.3.1. SEO Benefits

1.3.2. Performance Benefits

1.3.3. No JavaScript? No problem!

1.3.4. Maintenance and developer benefits

1.3.5. Challenges and Trade-offs

1.4. Building the view with React

1.4.1. Understanding the Virtual DOM

1.5. Business Logic and Model: Redux

1.5.1. One Way Data Flow

1.6. Building the app: webpack

1.7. Summary

2. A Sample Isomorphic App

2.1. What you?ll build in this chapter: Recipes Example App

2.2. Building blocks: libraries and tools

2.2.1. Download the example code

2.3. Tools

2.3.1. Setting up the environment and installing packages

2.3.2. Run the server

2.3.3. Building the code for the browser with webpack

2.4. The view

2.4.1. React and Components

2.4.2. Using JSX

2.4.3. App Wrapper Component

2.4.4. Building Child Components

2.4.5. HTML Container

2.5. App State: Redux

2.5.1. Understanding Redux

2.5.2. Actions: Fetching the recipes data

2.5.3. React and Redux

2.6. Server Rendering

2.6.1. Setting up a basic route on the server with middleware

2.6.2. Fetching the data

2.6.3. Rendering the view and serializing/injecting the data

2.7. Browser Rendering

2.7.1. Deserializing the data and hydrating the DOM

2.8. Summary

Part 2: Isomorphic App Basics

3. React Overview

3.1. Overview of React

3.2. Virtual DOM

3.3. To-do app overview

3.4. Your First React Component

3.4.1. JSX Basics

3.4.2. Building a reusable component

3.4.3. Using Properties

3.4.4. Functional components

3.4.5. Conditionals and Looping

3.5. Interactive components: React state

3.5.1. Using Classes

3.5.2. React State

3.6. Summary

4. Applying React

4.1. React Router

4.1.1. Setting up an app with React Router

4.1.2. Adding Child Routes

4.1.4. Understanding the router lifecycle

4.2. Component Lifecycle

4.2.1. Hooking into mounting and updating to detect user?s logged in status

4.2.2. Adding Timers

4.3. Component Patterns

4.3.1. Higher-Order Components

4.3.2. Component Types: Presentation and Container

4.4. Summary

5. Tools: Webpack and Babel

5.1. Webpack Overview

5.1.1. Getting started with webpack CLI

5.2. Babel overview

5.2.1. Getting started with Babel

5.2.2. The Babel CLI

5.3. The App Code

5.4. Webpack Config with Loaders

5.4.1. Configuring the Babel loader

5.4.2. Configuring the CSS loader

5.5. Bundling for Dev and Production

5.5.1. Using webpack plugins

5.5.2. Creating Globals

5.5.3. Working with sourcemaps

5.5.4. Preparing the build for production

5.6. Summary

6. Redux

6.1. Introduction to Redux

6.1.1. Getting Started with Notifications Example App

6.1.2. Redux Overview

6.2. Redux as an Architecture Pattern

6.3. Managing Application State

6.3.1. Reducers: Updating the State

6.3.2. Actions: Triggering State Updates

6.4. Applying Middleware to Redux

6.4.1. Middleware basics: debugging

6.4.2. Handling Asynchronous Actions

6.5. Using Redux with React components

6.5.1. Wrapping your app with Provider

6.5.2. Subscribing to the store from React

6.6. Summary

Part 3: Isomorphic Architecture

7. Building the Server

7.1. Introduction to Express

7.1.1. Setting up the Server Entry Point

7.1.2. Setting up routing with Express

7.2. Adding Middleware for view rendering

7.2.1. Using match to handle routing

7.2.2. Rendering components on the Server

7.2.3. Using renderToString to create the view

7.3. Adding Redux

7.3.1. Setting up the cart actions and reducers

7.3.2. Using Redux in renderView Middleware

7.3.3. Adding data prefetching via middleware

7.4. Summary

8. Isomorphic View Rendering

8.1. Setting up the Browser Entry Point

8.1.1. Referencing the browser code

8.1.2. Rendering React in the Browser

8.2. Matching Server State on the First Render

8.2.1. Serializing the data on the server

8.2.2. Deserializing the data in the browser

8.2.3. Hydrating the store

8.3. Performing the fhe First Load

8.3.1. The React Lifecycle on the first load

8.3.2. Isomorphic Render Errors

8.3.3. Using componentDidMount to prevent isomorphic load errors

8.4. Adding Single-Page App Interactions

8.4.1. Browser Routing: Data Fetching

8.5. Summary

9. Testing and Debugging

9.1. Testing: React Components

9.1.1. Using Enzyme to Test Components

9.1.2. Testing User Actions

9.1.3. Testing Nested Components

9.2. Testing: Thinking Isomorphically

9.2.1. Testing React Components on the server

9.2.2. Test All The Things

9.3. Using Debugging Tools

9.3.1. React Chrome Extension

9.3.2. Redux Chrome Extension

9.4. Summary

10. Handling Server/Browser Differences

10.1. Isolate Browser-specific code

10.1.1. Creating the environment variable for the server

10.1.2. Creating the environment variable for the browser

10.1.3. Using the variables

10.2. SEO and Sharing

10.2.1. Setting up metadata tags

10.2.2. Rendering metatags into the head on the server

10.2.3. Handling the title

10.3. Multiple sources of truth

10.3.1. User Agent Best Practices

10.3.2. Parse the User Agent

10.4. Summary

11. Optimizing for Production

11.1. Browser Performance Optimizations

11.1.1. Webpack chunking

11.1.2. Should component render

11.2. Server Performance Optimizations

11.2.1. Streaming React

11.2.2. Connection pooling

11.3. Caching

11.3.1. Caching on the server: In-memory caching

11.3.2. Caching on the server: Persisted Storage

11.3.3. CDN/Edge strategies

11.4. User Session Management

11.4.1. Accessing cookies universally

11.4.2. Edge Caching and Users

11.5. Summary

Part 4: Applying Isomorphic Architecture with Other Tools

12. Other frameworks: Implementing Isomorphic without React

12.1. Blog Example Project

12.1.1. UI and Component Breakdown

12.1.2. Shared Stubbed Data API

12.2. Server Rendering with Ember Fastboot

12.2.1. Ember App Structure

12.2.2. Routes in Ember

12.2.3. Components

12.2.4. Implement Isomorphic Ember

12.2.5. Pros and Cons of Isomorphic Ember

12.3. Universal Angular

12.3.1. Building blocks: components

12.3.2. Converting to Universal: Dependencies

12.3.3. Converting to Universal: Server and Browser Code

12.3.4. Fetching Data in Universal

12.3.5. Pros and Cons of Universal Angular

12.4. Next.js: React Isomorphic Framework

12.4.1. Next.js Structure

12.4.2. Next.js Initial Props

12.4.3. Pros and Cons of Next.js

12.5. Comparing the options

12.6. Summary

13. Where to go from here

13.1. Additional Tools and Frameworks

13.1.1. Webpack Dev Server

13.1.2. Isomorphic Frameworks

13.2. Up Your Game: Building on Isomorphic Skills

13.2.1. React Best Practices

13.2.2. Up Your Node.js Game

13.2.3. Infrastructure

13.3. All the Things: Data, SEO, and Performance

13.3.1. Data: Accessing Services with GraphQL

13.3.2. Search Engine Optimization

13.3.3. Web Performance

13.4. Summary

Appendixes

Appendix A: React Router 4 basics

A.1. Browser-only routing with React Router 4

A.1.1. Creating the app

A.1.2. Routing in components

A.2. Creating a single source of truth

A.2.1. Routes as config

A.2.2. Configuring the routes in the components

A.3. Handling lifecycle events

A.3.1. Using higher-order components to manage route changes

A.3.2. Prefetching the data for the view

Appendix B: Server-side React Router

B.1. Prefetch data on the server

Appendix C: Additional React Router 4 use cases

C.1. Moving analytics to onRouteChange

C.2. Adding dynamic routes

C.3. Code splitting: React Loadable

About the Technology

Build secure web apps that perform beautifully with high, low, or no bandwidth. Isomorphic web apps employ a pattern that exploits the full stack, storing data locally and minimizing server hits. They render flawlessly, maximize SEO, and offer opportunities to share code and libraries between client and server.

About the book

Isomorphic Web Applications teaches you to build production-quality web apps using isomorphic architecture. You'll learn to create and render views for both server and browser, optimize local storage, streamline server interactions, and handle data serialization. Designed for working developers, this book offers examples in relevant frameworks like React, Redux, Angular, Ember, and webpack. You'll also explore unique debugging and testing techniques and master specific SEO skills. 

What's inside

  • Controlling browser and server user sessions
  • Combining server-rendered and SPA architectures
  • Building best-practice React applications
  • Debugging and testing

About the reader

To benefit from this book, readers need to know JavaScript, HTML5, and a framework of their choice, including React and Angular.

About the author

Elyse Kolker Gordon runs the growth engineering team at Strava. Previously, she was director of web engineering at Vevo, where she regularly solved challenges with isomorphic apps.


placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks

Clear and powerful. If you need just one resource, this is it.

Peter Perlepes, Growth

Thorough and methodical coverage for novice users, with handy insights and many ‘aha’ moments for advanced users. Highly recommended.

Devang Paliwal, Synapse

An essential guide for anyone developing modern JavaScript applications.

Mike Jensen, UrbanStems