You used to have two options for web app architecture: backend server-rendered in response to requests, or frontend browser-rendered, single page applications. Now you have a new choice: isomorphic apps, which let you take advantage of the best of both worlds. They render the HTML page on the server, deliver rendered markup to the browser, and behave like a single page application in the browser. You get server rendering benefits such as SEO-compatible stacks, fast page loads, improved performance, and the ability to take advantage of caching. And you get single page application advantages including no server interaction after the initial load, common UX patterns like modals, and fast response to user interactions. Node and React make isomorphic apps practical and simpler to build. Now you can write code that runs on the server and the client as well as effectively executing the handoff from the server to the client.
Isomorphic Web Applications teaches web developers to build isomorphic web applications using JavaScript, NodeJS, and React. You'll begin by learning the difference between isomorphic, single page, and server rendered web applications as well as the advantages and challenges of isomorphic web applications. Then you'll get hands-on and build an isomorphic web application. You'll learn how to render views, fetch data with Redux, handle requests on the server, and serialize and deserialize data. This book covers isomorphic app basics, like React, Redux and Webpack. The last part shows you how to apply isomorphic architecture with frameworks like Angular 2 and Ember. By the end, you'll be able to build a high performance content site that will support your users' needs and your SEO goals.
"Filled with detailed diagrams, in-depth explanations of conceptsand techniques, and of course, loads and loads of code that can back it all up."
~ Peter Perlepes
"This book does a terrific job helped me get a grasp on a more modern JavaScript development."
~ Michael Jensen
"This book is all you need to be able to write an isomorphic app."
~ Adil Mezghouti
"Incredibly well-written."
~ Stephen Byrne
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.3. Routing from components: Link
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
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 3: 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
What's inside
- Rendering pages with React
- Handling user sessions on both server and the browser
- Using Webpack and Babel for a modern JavaScript workflow
- Combining server rendered and SPA architecture
- Handling real-word caching and performance
- Putting together JavaScript libraries: Redux and React Router
- Debugging and testing in isomorphic environments
About the author
Elyse Kolker Gordon has been building web applications for five years and is a Technical Lead at Vevo, where she solves challenges with isomorphic apps every day. She writes technical articles and speaks about JavaScript at meetups and conferences. In her free time, she plays the drums and travels.
FREE domestic shipping on three or more pBooks