Building Isomorphic JavaScript Apps : from concept to implementation to real-world solutions

Isomorphic JavaScript, often described as the holy grail of web application development, refers to running JavaScript code on both the browser client and web application server. This application architecture has become increasingly popular for the benefits of SEO, optimized page load and full control of the UI, and isomorphic libraries are being used at companies like Walmart, Airbnb, Facebook, and Netflix. With this practical book, authors Jason Strimpel and Maxime Najim provide the knowledge you need to build and maintain your own isomorphic JavaScript apps. This book includes: * Part 1 identifies different classifications of isomorphic JavaScript apps, and shows you how to set up a development environment * Part 2 takes you from theory to practice by showing you how to build out your own isomorphic app * Part 3 takes you through existing solutions in the market today, providing you with the knowledge you need to bring isomorphic solutions into your development workflow Copyright 4 Table of Contents 5 Preface 11 Why Isomorphic JavaScript 11 The Evolution of a Platform 12 Ajax: Rise of an Application Platform 12 Ajax: Accumulation of Technical Debt 13 The Perfect Storm: An All-Too-Common Story 13 Client Architecture to the Rescue 14 What Happened to Our Visits? 14 Isomorphic A Brave New World 15 The Road Ahead 15 Conventions Used in This Book 16 Using Code Examples 16 Safari® Books Online 17 How to Contact Us 17 Acknowledgments 18 Jason Strimpel 18 Maxime Najim 18 Part I. Introduction and Key Concepts 21 Chapter 1. Why Isomorphic JavaScript? 23 Defining Isomorphic JavaScript 24 Evaluating Other Web Application Architecture Solutions 24 A Climate for Change 24 Engineering Concerns 25 Available Architectures 25 Caveat: When Not to Go Isomorphic 32 Summary 33 Chapter 2. Isomorphic JavaScript as a Spectrum 35 Sharing Views 36 Sharing Templates 37 Sharing View Logic 37 Sharing Routes 38 Sharing Models 38 Summary 38 Chapter 3. Different Categories of Isomorphic JavaScript 39 Environment Agnostic 41 Shimmed for Each Environment 42 Summary 44 Chapter 4. Going Beyond Server-Side Rendering 45 Real-Time Web Applications 46 Isomorphic APIs 47 Bidirectional Data Synchronization 47 Client Simulation on the Server 48 Summary 48 Part II. Building Our First App 49 Chapter 5. Getting Started 51 Getting Node Up and Running 52 Installing from Source 52 Interacting with the Node REPL 53 Managing Projects with npm 53 Setting Up the Application Project 54 Initializing the Project 54 Installing the Application Server 56 Writing Next-Generation JavaScript (ES6) 57 Compiling from ES6 to ES5 59 Setting Up a Development Workflow 61 Summary 65 Chapter 6. Serving Our First HTML Document 67 Serving an HTML Template 67 Working with Path and Query Parameters 69 Summary 72 Chapter 7. Architecting Our Application 73 Understanding the Problem 74 Responding to User Requests 74 Creating the Application Class 74 Creating a Controller 76 Constructing a Controller Instance 78 Extending the Controller 80 Improving the Response Flow 81 Summary 84 Chapter 8. Transporting the Application to the Client 87 Bundling Our Application for the Client 87 Selecting a Bundling Library 87 Creating Our Bundle Task 88 Adding Our Client Implementation 90 Responding to User Requests 91 Leveraging the History API 92 Responding to and Calling the History API 93 Routing on the Client 97 Executing the Controller Response Flow 99 Organizing Our Code 103 Summary 106 Chapter 9. Creating Common Abstractions 107 When and Why to Use Abstraction 107 Getting and Setting Cookies 108 Defining the API 108 Redirecting a Request 116 Defining the API 116 Summary 121 Chapter 10. Serializing, Deserializing, and Attaching 123 Serializing Data 124 Creating a Controller Instance 126 Deserializing Data 128 Attaching DOM Event Handlers 128 Verifying the Rehydration Process 130 Summary 133 Chapter 11. Closing Thoughts 135 Production Readiness 135 Knowing How Much Structure Is Needed 135 Managing Change 136 Conclusion 138 Part III. Real-World Solutions 139 Chapter 12. Isomorphic React.js at WalmartLabs 141 Origin of a Species 141 The Problem 142 The Solution 143 React Boilerplate and Patterns 144 Rendering on the Server 144 Resuming on the Client 148 The Walmart Approach 149 Overcoming Challenges 150 Time to First Byte 150 Component Rendering Optimization 151 Performance Improvements 156 Next Steps 159 Acknowledgments 159 Postscript 159 Chapter 13. Full Stack Angular 161 Isomorphic The Future of Web Apps 162 Isomorphic Angular 1 162 Angular 2 Server Rendering 164 Angular Universal 169 GetHuman.com 171 Postscript 172 Chapter 14. Brisket 173 The Problem 173 Best of Both Worlds 175 Early Brisket 176 Making It Real 177 Code Freedom 177 Use Any Templating Language 180 Consistent API Across Environments 181 Model/Collection 181 View Lifecycle 182 Child View Management 183 Tools That Do What You Expect in All Environments 183 Stay Out of the Way of Progress 184 ClientApp and ServerApp 184 Layout Template 184 Other Lessons Learned 184 What’s Next for Brisket? 185 Postscript 185 Chapter 15. “Colony” Case Study: Isomorphic Apps Without Node 187 The Problem 187 Templating 189 Data 189 Transpiled View Models 191 Layouts 193 Page Maker 195 Frontend Single-Page App 195 Final Architecture 196 Next Steps 197 Chapter 16. Final Thoughts 199 199 Always Bet on JavaScript 200 On Nomenclature and Understanding 201 Index 203 About the Authors 209 Colophon 209 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. 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. This book includes Part 1 identifies different classifications of isomorphic JavaScript apps, and shows you how to set up a development environment. Part 2 takes you from theory to practice by showing you how to build out your own isomorphic app. Part 3 takes you through existing solutions in the market today, providing you with the knowledge you need to bring isomorphic solutions into your development workflow "Isomorphic JavaScript, often described as the holy grail of web application development, refers to running JavaScript code on both the browser client and web application server. This application architecture has become increasingly popular for the benefits of SEO, optimized page load and full control of the UI, and isomorphic libraries are being used at companies like Walmart, Airbnb, Facebook, and Netflix. With this practical book, authors Jason Strimpel and Maxime Najim provide the knowledge you need to build and maintain your own isomorphic JavaScript apps"--publisher's description