O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Isomorphic JavaScript Apps

Building Isomorphic JavaScript Apps

by Maxime Najim, Jason Strimpel
Publisher: O'Reilly Media, Inc.
Release Date: September 2016
ISBN: 9781491932926
View table of contents
Start reading

Book Description

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.

Table of Contents

  1. Preface
    1. Why Isomorphic JavaScript
    2. The Evolution of a Platform
      1. Ajax: Rise of an Application Platform
      2. Ajax: Accumulation of Technical Debt
    3. The Perfect Storm: An All-Too-Common Story
      1. Client Architecture to the Rescue
      2. What Happened to Our Visits?
    4. Isomorphic JavaScript: A Brave New World
    5. The Road Ahead
    6. Conventions Used in This Book
    7. Using Code Examples
    8. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
      1. Jason Strimpel
      2. Maxime Najim
  2. I. Introduction and Key Concepts
  3. 1. Why Isomorphic JavaScript?
    1. Defining Isomorphic JavaScript
    2. Evaluating Other Web Application Architecture Solutions
      1. A Climate for Change
      2. Engineering Concerns
      3. Available Architectures
    3. Caveat: When Not to Go Isomorphic
    4. Summary
  4. 2. Isomorphic JavaScript as a Spectrum
    1. Sharing Views
      1. Sharing Templates
      2. Sharing View Logic
    2. Sharing Routes
    3. Sharing Models
    4. Summary
  5. 3. Different Categories of Isomorphic JavaScript
    1. Environment Agnostic
    2. Shimmed for Each Environment
    3. Summary
  6. 4. Going Beyond Server-Side Rendering
    1. Real-Time Web Applications
      1. Isomorphic APIs
      2. Bidirectional Data Synchronization
      3. Client Simulation on the Server
    2. Summary
  7. II. Building Our First App
  8. 5. Getting Started
    1. Getting Node Up and Running
      1. Installing from Source
      2. Interacting with the Node REPL
      3. Managing Projects with npm
    2. Setting Up the Application Project
      1. Initializing the Project
      2. Installing the Application Server
      3. Writing Next-Generation JavaScript (ES6)
      4. Compiling from ES6 to ES5
      5. Setting Up a Development Workflow
    3. Summary
  9. 6. Serving Our First HTML Document
    1. Serving an HTML Template
    2. Working with Path and Query Parameters
    3. Summary
  10. 7. Architecting Our Application
    1. Understanding the Problem
    2. Responding to User Requests
      1. Creating the Application Class
      2. Creating a Controller
      3. Constructing a Controller Instance
      4. Extending the Controller
      5. Improving the Response Flow
    3. Summary
  11. 8. Transporting the Application to the Client
    1. Bundling Our Application for the Client
      1. Selecting a Bundling Library
      2. Creating Our Bundle Task
      3. Adding Our Client Implementation
    2. Responding to User Requests
      1. Leveraging the History API
      2. Responding to and Calling the History API
    3. Routing on the Client
      1. Executing the Controller Response Flow
    4. Organizing Our Code
    5. Summary
  12. 9. Creating Common Abstractions
    1. When and Why to Use Abstraction
    2. Getting and Setting Cookies
      1. Defining the API
    3. Redirecting a Request
      1. Defining the API
    4. Summary
  13. 10. Serializing, Deserializing, and Attaching
    1. Serializing Data
    2. Creating a Controller Instance
    3. Deserializing Data
    4. Attaching DOM Event Handlers
    5. Verifying the Rehydration Process
    6. Summary
  14. 11. Closing Thoughts
    1. Production Readiness
    2. Knowing How Much Structure Is Needed
      1. Managing Change
    3. Conclusion
  15. III. Real-World Solutions
  16. 12. Isomorphic React.js at WalmartLabs
    1. Origin of a Species
      1. The Problem
      2. The Solution
    2. React Boilerplate and Patterns
      1. Rendering on the Server
      2. Resuming on the Client
    3. The Walmart Approach
    4. Overcoming Challenges
      1. Time to First Byte
      2. Component Rendering Optimization
      3. Performance Improvements
    5. Next Steps
    6. Acknowledgments
    7. Postscript
  17. 13. Full Stack Angular
    1. Isomorphic JavaScript: The Future of Web Apps
    2. Isomorphic Angular 1
    3. Angular 2 Server Rendering
    4. Angular Universal
    5. GetHuman.com
    6. Postscript
  18. 14. Brisket
    1. The Problem
    2. Best of Both Worlds
    3. Early Brisket
    4. Making It Real
    5. Code Freedom
      1. Use Any Templating Language
    6. Consistent API Across Environments
      1. Model/Collection
      2. View Lifecycle
      3. Child View Management
      4. Tools That Do What You Expect in All Environments
    7. Stay Out of the Way of Progress
      1. ClientApp and ServerApp
      2. Layout Template
      3. Other Lessons Learned
    8. What’s Next for Brisket?
    9. Postscript
  19. 15. “Colony” Case Study: Isomorphic Apps Without Node
    1. The Problem
    2. Templating
    3. Data
    4. Transpiled View Models
    5. Layouts
    6. Page Maker
    7. Frontend Single-Page App
    8. Final Architecture
    9. Next Steps
  20. 16. Final Thoughts
    1. Families of Design Patterns, Flux, and Isomorphic JavaScript
      1. Always Bet on JavaScript
      2. On Nomenclature and Understanding
  21. Index