Building Isomorphic JavaScript Apps: From Concept to Implementation to Real-World Solutions

by Jason Strimpel, Maxime Najim

Overview

Often referred to as the holy grail of web application development, isomorphic JavaScript lets you run the same code on both the browser client and web application server. This hands-on guide shows you a practical approach to building and maintaining your own isomorphic JavaScript apps. You'll learn why this application architecture has become an increasingly popular way to fix business-critical issues such as page-load speeds and SEO compatibility.

Isomorphic JavaScript is becoming a real game changer, even for teams used to very different server stacks. Authors Jason Strimpel and Maxime Najim demonstrate why companies including Walmart, Airbnb, Facebook, and Netflix have adopted isomorphic libraries.

• Understand how isomorphic JavaScript can dramatically improve user experience
• Define a contract between the framework and your application for responding to resource requests
• Take framework and application code from server to client to make it an isomorphic codebase
• Create common abstractions, get and set cookies, and redirect user requests
• Learn why isomorphic JavaScript can finally bring a halt to the fat-server, fat-client pendulum
• Learn about advanced isomorphic JavaScript topics like collaborative, real-time applications

Product Details

ISBN-13:	9781491932933
Publisher:	O'Reilly Media, Incorporated
Publication date:	09/22/2016
Pages:	207
Product dimensions:	6.90(w) x 9.10(h) x 0.60(d)

About the Author

Jason Strimpel is a Staff Software Engineer on the platform team at WalmartLabs who specializes in the UI layer. Jason has been building web applications for the past 12 years. Approximately 3 years ago Jason began specializing in the front-end, in particular JavaScript. Since then Jason has worked with several component libraries and frameworks. However, Jason found limitations to these libraries when presented with uniquely challenging UI requirements, so he began developing his own custom components and catalog of helpers. He is an extremely passionate developer with a very bad sense of humor who loves simplifying the complexities that arise when building rich UIs.

Maxime Najim is a Software Architect at Walmart Labs. Prior to joining Walmart, Maxime has worked on software engineering teams at Netflix, Apple, and Yahoo!

Table of Contents

Preface ix

Part I Introduction and Key Concepts

1 Why Isomorphic JavaScript? 3

Defining Isomorphic JavaScript 4

Evaluating Other Web Application Architecture Solutions 4

A Climate for Change 4

Engineering Concerns 5

Available Architectures 5

Caveat: When Not to Go Isomorphic 13

Summary 13

2 Isomorphic JavaScript as a Spectrum 15

Sharing Views 16

Sharing Templates 17

Sharing View Logic 17

Sharing Routes 18

Sharing Models 18

Summary 18

3 Different Categories of Isomorphic JavaScript 19

Environment Agnostic 21

Shimmed for Each Environment 22

Summary 24

4 Going Beyond Server-Side Rendering 25

Real-Time Web Applications 26

Isomorphic APIs 27

Bidirectional Data Synchronization 27

Client Simulation on the Server 28

Summary 28

Part II Building Our First App

5 Getting Started 31

Getting Node Up and Running 32

Installing from Source 32

Interacting with the Node REPL 33

Managing Projects with npm 33

Setting Up the Application Project 34

Initializing the Project 34

Installing the Application Server 36

Writing Next-Generation JavaScript (ES6) 37

Compiling from ES6 to ES5 39

Setting Up a Development Workflow 41

Summary 45

6 Serving Our First HTML Document 47

Serving an HTML Template 47

Working with Path and Query Parameters 49

Summary 52

7 Architecting Our Application 53

Understanding the Problem 54

Responding to User Requests 54

Creating the Application Class 54

Creating a Controller 56

Constructing a Controller Instance 58

Extending the Controller 60

Improving the Response Flow 61

Summary 64

8 Transporting the Application to the Client 67

Bundling Our Application for the Client 67

Selecting a Bundling Library 67

Creating Our Bundle Task 68

Adding Our Client Implementation 70

Responding to User Requests 71

Leveraging the History API 72

Responding to and Calling the History API 73

Routing on the Client 77

Executing the Controller Response Flow 79

Organizing Our Code 84

Summary 86

9 Creating Common Abstractions 87

When and Why to Use Abstraction 87

Getting and Setting Cookies 88

Defining the API 88

Redirecting a Request 96

Defining the API 96

Summary 101

10 Serializing, Deserializing, and Attaching 103

Serializing Data 104

Creating a Controller Instance 106

Deserializing Data 108

Attaching DOM Event Handlers 109

Verifying the Rehydration Process 111

Summary 113

11 Closing Thoughts 115

Production Readiness 115

Knowing How Much Structure Is Needed 115

Managing Change 116

Conclusion 118

Part III Real-World Solutions

12 Isomorphic React.js at WalmartLabs 121

Origin of a Species 121

The Problem 122

The Solution 123

React Boilerplate and Patterns 124

Rendering on the Server 124

Resuming on the Client 128

The Walmart Approach 130

Overcoming Challenges 130

Time to First Byte 131

Component Rendering Optimization 131

Performance Improvements 136

Next Steps 139

Acknowledgments 139

Postscript 139

13 Full Stack Angular 141

Isomorphic JavaScript: The Future of Web Apps 142

Isomorphic Angular 1 142

Angular 2 Server Rendering 144

Angular Universal 149

GetHuman.com 151

Postscript 152

14 Brisket 153

The Problem 153

Best of Both Worlds 155

Early Brisket 156

Making It Real 157

Code Freedom 157

Use Any Templating Language 160

Consistent API Across Environments 161

Model/Collection 161

View Lifecycle 162

Child View Management 163

Tools That Do What You Expect in All Environments 163

Stay Out of the Way of Progress 164

ClientApp and ServerApp 164

Layout Template 164

Other Lessons Learned 164

What's Next for Brisket? 165

Postscript 165

15 "Colony" Case Study; isomorphic Apps Without Mode 167

The Problem 167

Templating 169

Data 169

Transpiled View Models 171

Layouts 173

Page Maker 175

Frontend Single-Page App 175

Final Architecture 176

Next Steps 177

16 Final Thoughts 179

Families of Design Patterns, Flux, and Isomorphic JavaScript 179

Always Bet on JavaScript 180

On Nomenclature and Understanding 181

Index 183