Isomorphic Web Applications: Universal Development with React

by Elyse Kolker Gordon

Overview

Summary

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.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

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.

Table of Contents

PART 1 - FIRST STEPS
1. Introduction to isomorphic web application architecture
2. A sample isomorphic app
PART 2 - ISOMORPHIC APP BASICS
3. React overview
4. Applying React
5. Tools: webpack and Babel
6. Redux
PART 3 - ISOMORPHIC ARCHITECTURE
7. Building the server
8. Isomorphic view rendering
9. Testing and debugging
10. Handling server/browser differences 203
11. Optimizing for production
PART 4 - APPLYING ISOMORPHIC ARCHITECTURE WITH OTHER TOOLS
12. Other frameworks: implementing isomorphic without React
13. Where to go from here

Product Details

ISBN-13:	9781617294396
Publisher:	Manning
Publication date:	07/13/2018
Edition description:	1st Edition
Pages:	320
Product dimensions:	7.30(w) x 9.20(h) x 0.80(d)

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.

Table of Contents

Preface xiii

Acknowledgments xv

About this book xvii

About the author xxi

About the cover illustration xxii

Part 1 First Steps 1

1 Introduction to isomorphic web application architecture 3

1.1 Isomorphic web app overview 4

Understanding how it works 5

Building our stack 7

1.2 Architecture overview 8

Understanding the application flow 8

Handling the server-side request 10

Rendering in the browser 11

1.3 Advantages of isomorphic app architecture 12

SEO benefits 13

Performance benefits 14

No JavaScript? No problem! 17

Maintenance and developer benefits 17

Challenges and trade-offs 17

1.4 Building the view with React 18

1.5 Business logic and model: Redux 19

1.6 Building the app: webpack 20

2 A sample isomorphic app 22

2.1 What you'll build in this chapter: recipes example app 23

Building blocks: libraries and tools 24

Download the example code 26

2.2 Tools 27

Setting up the environment and installing packages 27

Running the server 29

Building the code for the browser with webpack 30

2.3 The view 32

React and components 33

Using JSX 34

App wrapper component 34

Building child components 36

HTML container 38

2.4 App state: Redux 39

Understanding Redux 39

Actions: fetching the recipes data 41

React and Redux 44

2.5 Server rendering 45

Setting up a basic route on the server with middleware 45

Fetching the data 46

Rendering the view and serializing/injecting the data 47

2.6 Browser rendering 48

Deserializing the data and hydrating the DOM 48

Part 2 Isomorphic APP Basics 51

3 React overview 53

3.1 Overview of React 54

3.2 Virtual DOM 56

3.3 Todo app overview 59

3.4 Your first React component 61

JSX basics 62

Building a reusable component 64

Using properties 66

Functional components 68

Conditionals and looping 69

3.5 Interactive components: React state 73

Using classes 74

React state 75

4 Applying React 78

4.1 React Router 79

Setting up an app with React Router 80

Adding child routes 82

Routing from components: Link 85

Understanding the router lifecycle 85

4.2 Component lifecycle 87

Hooking into mounting and updating to detect user's logged-in status 88

Adding timers 89

4.3 Component patterns 93

Higher-order components 93

Component types: presentation and container 94

5 Tools: webpack and Babel 96

5.1 Webpack overview 97

5.2 Babel overview 101

Getting started with Babel 101

The Babel CLI 103

5.3 The app code 104

5.4 Webpack config with loaders 105

Configuring the Babel loader 105

Configuring the CSS loader 107

5.5 Bundling for dev and production 108

Using webpack plugins 108

Creating globals 109

Working with source-maps 110

Preparing the build for production 111

6 Redux 113

6.1 Introduction to Redux 114

Getting started with notifications example app 114

Redux overview 115

6.2 Redux as an architecture pattern 117

6.3 Managing application state 119

Reducers: updating the state 122

Actions: triggering state updates 124

6.4 Applying middleware to Redux 125

Middleware basics: debugging 126

Handling asynchronous actions 126

6.5 Using Redux with React components 127

Wrapping your app with provider 128

Subscribing to the store from React 128

Part 3 Isomorphic Architecture 133

7 Building the server 135

7.1 Introduction to Express 138

Setting up the server entry point 139

Setting up routing with Express 140

7.2 Adding middleware for view rendering 142

Using match to handle routing 143

Rendering components on the server 145

Using render To Siring to create the view 148

7.3 Adding Redux 151

Setting up the can actions and reducers 152

Using Redux in renderView middleware 155

Adding data prefetching via middleware 156

8 Isomorphic view rendering 161

8.1 Setting up the browser entry point 163

Referencing the browser code 163

Rendering React in the browser 164

8.2 Matching server state on the first render 168

Senalizing the data on the server 169

Deserializing the data in the browser 171

Hydrating the store 171

8.3 Performing the first load 173

The React lifecycle on the first load 173

Isomorphic render errors 174

Using componentDidMount to prevent isomorphic had errors 175

8.4 Adding single-page app interactions 178

Browser muting: data fetching 179

9 Testing and debugging 184

9.1 Testing: React components 185

Using Enzyme to test components 187

Testing user actions 190

Testing nested components 192

9.2 Testing: thinking isomorphically 193

Testing React components on the sewer 193

Testing all the things 195

9.3 Using debugging tools 196

React Chrome Extension 197

Redux Chrome Extension 198

10 Handling server/browser differences 203

10.1 Isolate browser-specific code 204

Creating the environment variable for the server 207

Creating the environment variable for the browser 207

Using the variables 208

10.2 SEO and sharing 209

Setting up metadata tags 212

Rendering metatags into the head on the server 213

Handling the title 215

10.3 Multiple sources of truth 217

User agent best practices 217

Parse the user agent 218

11 Optimizing for production 222

11.1 Browser performance optimizations 223

Webpack chunking 223

Should component render 226

11.2 Server performance optimizations 228

Streaming React 228

Connection pooling 229

11.3 Caching 230

Caching on the server: in-memory caching 231

Caching on the server: persisted storage 233

CDN/edge strategies 234

11.4 User session management 234

Accessing cookies universally 236

Edge caching and users 237

Part 4 Applying Isomorphic Architecture with Other Tools 239

12 Other frameworks: implementing isomorphic without React 241

12.1 Blog example project 242

UI and component breakdown 242

Shared stubbed data API 243

12.2 Server rendering with Ember FastBoot 245

Ember app structure 248

Routes in Ember 249

Components 249

Implement isomorphic Ember 251

Pros and cons of isomorphic Ember 254

12.3 Universal Angular 254

Building blocks: components 258

Converting to universal: dependencies 259

Converting to universal: server and browser code 259

Fetching data in universal 262

Pros and cons of universal Angular 264

12.4 Nextjs: React isomorphic framework 264

Next.js structure 266

Next.js initial props 266

Pros and cons of Next.js 267

12.5 Comparing the options 267

13 Where to go from here 269

13.1 Additional tools and frameworks 270

Webpack Dev Server 270

Isomorphic frameworks 270

13.2 Up your game: building on isomorphic skills 271

React best practices 271

Up your Node.js game 271

Infrastructure 272

13.3 All the things: data, SEO, and performance 272

Data: accessing services with GraphQL 272

Search engine optimization 273

Web performance 274

Appendix A React Router 4 basics 275

Appendix B Server-side React Router 284

Appendix C Additional React Router 4 use cases 286

Index 289