Building Isomorphic JavaScript Apps · From Concept to Implementation to Real-World Solutions by Strimpel, Jason -- Read -- Imperial Library of Trantor

Index

Preface

Why Isomorphic JavaScript The Evolution of a Platform

Ajax: Rise of an Application Platform Ajax: Accumulation of Technical Debt

The Perfect Storm: An All-Too-Common Story

Client Architecture to the Rescue What Happened to Our Visits?

Isomorphic JavaScript: A Brave New World The Road Ahead Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

Jason Strimpel Maxime Najim

I. Introduction and Key Concepts 1. Why Isomorphic JavaScript?

Defining Isomorphic JavaScript Evaluating Other Web Application Architecture Solutions

A Climate for Change Engineering Concerns Available Architectures

Classic web application

The Ajax era

Single-page web application Isomorphic JavaScript applications

Caveat: When Not to Go Isomorphic Summary

2. Isomorphic JavaScript as a Spectrum

Sharing Views

Sharing Templates Sharing View Logic

Sharing Routes Sharing Models Summary

3. Different Categories of Isomorphic JavaScript

Environment Agnostic Shimmed for Each Environment Summary

4. Going Beyond Server-Side Rendering

Real-Time Web Applications

Isomorphic APIs Bidirectional Data Synchronization Client Simulation on the Server

Summary

II. Building Our First App 5. Getting Started

Getting Node Up and Running

Installing from Source Interacting with the Node REPL Managing Projects with npm

Setting Up the Application Project

Initializing the Project Installing the Application Server Writing Next-Generation JavaScript (ES6) Compiling from ES6 to ES5 Setting Up a Development Workflow

Watching for source code changes Restarting the server on distribution changes

Summary

6. Serving Our First HTML Document

Serving an HTML Template Working with Path and Query Parameters Summary

7. Architecting Our Application

Understanding the Problem Responding to User Requests

Creating the Application Class Creating a Controller Constructing a Controller Instance Extending the Controller Improving the Response Flow

Summary

8. Transporting the Application to the Client

Bundling Our Application for the Client

Selecting a Bundling Library Creating Our Bundle Task Adding Our Client Implementation

Responding to User Requests

Leveraging the History API Responding to and Calling the History API

Routing on the Client

Executing the Controller Response Flow

Creating a controller instance Executing a controller action Rendering a controller response

Organizing Our Code Summary

9. Creating Common Abstractions

When and Why to Use Abstraction Getting and Setting Cookies

Defining the API

Getting and setting cookies on the client Getting and setting cookies on the server Creating an interface Implementing the interface for the client Implementing the interface for the server Including the cookie implementations Cookie example

Redirecting a Request

Defining the API

Redirecting on the client Redirecting on the server Creating an interface Implementing the interface for the client Including the client implementation Redirection example

Summary

10. Serializing, Deserializing, and Attaching

Serializing Data Creating a Controller Instance Deserializing Data Attaching DOM Event Handlers Verifying the Rehydration Process Summary

11. Closing Thoughts

Production Readiness Knowing How Much Structure Is Needed

Managing Change

Conclusion

III. Real-World Solutions 12. Isomorphic React.js at WalmartLabs

Origin of a Species

The Problem The Solution

React Boilerplate and Patterns

Rendering on the Server Resuming on the Client

The Walmart Approach Overcoming Challenges

Time to First Byte Component Rendering Optimization

Component memoization Component templatization

Performance Improvements

Next Steps Acknowledgments Postscript

13. Full Stack Angular

Isomorphic JavaScript: The Future of Web Apps Isomorphic Angular 1 Angular 2 Server Rendering Angular Universal GetHuman.com Postscript

14. Brisket

The Problem Best of Both Worlds Early Brisket Making It Real Code Freedom

Use Any Templating Language

Consistent API Across Environments

Model/Collection View Lifecycle Child View Management Tools That Do What You Expect in All Environments

Stay Out of the Way of Progress

ClientApp and ServerApp Layout Template Other Lessons Learned

What’s Next for Brisket? Postscript

15. “Colony” Case Study: Isomorphic Apps Without Node

The Problem Templating Data Transpiled View Models Layouts Page Maker Frontend Single-Page App Final Architecture Next Steps

16. Final Thoughts

Families of Design Patterns, Flux, and Isomorphic JavaScript

Always Bet on JavaScript On Nomenclature and Understanding

Index

← Prev
Back
Next →

← Prev
Back
Next →