Previous Chapter

16. Final Thoughts

About the Authors

Index

A

abstractions
- creating common, Creating Common Abstractions-Summary
- excessive use of, Responding to User Requests
- getting/setting cookies, Getting and Setting Cookies-Cookie example
- key to proper use of, Architecting Our Application
- models and, Sharing Models
- redirecting a request, Redirecting a Request-Redirection example
- when/why to use, When and Why to Use Abstraction
Ajax
- and classic web applications, The Ajax era
- non-cached calls in, Rendering a controller response
- rise of, Ajax: Rise of an Application Platform
- technical debt and, Ajax: Accumulation of Technical Debt
Amazon.com, importance of page load speed for, Introduction and Key Concepts
Angular, Full Stack Angular-Postscript
- and Web App Gap, Angular 2 Server Rendering
- GetHuman.com and, Full Stack Angular, GetHuman.com
- isomorphic Angular 1, Isomorphic Angular 1-Isomorphic Angular 1
- isomorphic JavaScript as inspiration for isomorphic Angular, Isomorphic JavaScript: The Future of Web Apps
- Preboot, Angular 2 Server Rendering
Angular 1
- isomorphic, Isomorphic Angular 1-Isomorphic Angular 1
- ng-conf 2015 and, Isomorphic Angular 1
Angular 2
- full-stack, Angular Universal-Angular Universal
- server rendering architecture, Angular 2 Server Rendering
- server rendering with, Angular 2 Server Rendering-Angular 2 Server Rendering
Angular Universal, Angular Universal-Angular Universal
API
- consistency with Brisket, Consistent API Across Environments-Tools That Do What You Expect in All Environments
- defining for cookies, Defining the API-Cookie example
application class, Creating the Application Class-Creating the Application Class
application core, size of, Managing Change
application project
- architecting, Architecting Our Application-Summary
- compiling from ES6 to ES5, Compiling from ES6 to ES5-Compiling from ES6 to ES5
- defining problem to be solved by, Understanding the Problem
- directory information, Initializing the Project
- initializing, Initializing the Project-Initializing the Project
- name of, Initializing the Project
- responding to user requests, Responding to User Requests-Improving the Response Flow
- restarting the server on distribution changes, Restarting the server on distribution changes
- setting up, Setting Up the Application Project-Restarting the server on distribution changes
- setting up development workflow, Setting Up a Development Workflow-Restarting the server on distribution changes
- sever installation, Installing the Application Server
- transporting to client, Transporting the Application to the Client-Summary
  - (see also porting of application to client)
- watching for source code changes, Watching for source code changes
- writing next-generation JavaScript (ES6), Writing Next-Generation JavaScript (ES6)-Writing Next-Generation JavaScript (ES6)
Asana, Client Simulation on the Server
Ashkenas, Jeremy, Client Architecture to the Rescue
ASP.NET MVC, The Problem
asynchronous module definition (AMD), Selecting a Bundling Library

B

Babel.js
- about, Getting Started
- for compiling ES6 to ES5, Compiling from ES6 to ES5-Compiling from ES6 to ES5
- plugin and presets, Compiling from ES6 to ES5
Babelify, Creating Our Bundle Task
Backbone.js, Client Architecture to the Rescue
- Brisket and, Brisket
- memory leaks, Child View Management
- model/collection implementation with Brisket, Model/Collection
- Rendr library, Isomorphic Angular 1
Berners-Lee, Tim, A Climate for Change
bidirectional data synchronization, Bidirectional Data Synchronization
Bjørnvig, Gertrud, Architecting Our Application
Bloomberg LP, Brisket
Bloomberg.com, Brisket, Making It Real, What’s Next for Brisket?
BloombergPolitics.com, Making It Real
BloombergView.com, Brisket, Best of Both Worlds, ClientApp and ServerApp
Bosch, Tobias, Isomorphic Angular 1
Brehm, Spike, Different Categories of Isomorphic JavaScript, Isomorphic JavaScript: The Future of Web Apps, Best of Both Worlds
Brisket, Brisket-Postscript
- Backbone model/collection implementation, Model/Collection
- child view management, Child View Management
- ClientApp and ServerApp classes, ClientApp and ServerApp
- code freedom, Code Freedom-Use Any Templating Language
- consistent API across environments, Consistent API Across Environments-Tools That Do What You Expect in All Environments
- consistent tool behavior across environments, Tools That Do What You Expect in All Environments
- early version, Early Brisket
- future of, What’s Next for Brisket?
- goals for, Best of Both Worlds
- integration of third-party code, Stay Out of the Way of Progress
- key tools extracted from, Making It Real
- layout template, Layout Template
- lessons learned while developing, Other Lessons Learned
- reasons for creating, The Problem-The Problem
- Rendr vs., Best of Both Worlds
- route handling, Code Freedom-Code Freedom
- templating engine switching, Use Any Templating Language
- view lifecycle, View Lifecycle
browser support, server rendering and, Angular 2 Server Rendering
Browserify, Environment Agnostic, Selecting a Bundling Library
browsers, headless, Full Stack Angular
bundling
- Brisket and, Other Lessons Learned
- bundle task creation, Creating Our Bundle Task-Creating Our Bundle Task
- for porting application to client, Bundling Our Application for the Client-Adding Our Client Implementation
- library selection for, Selecting a Bundling Library
bundling libraries
- RequireJS Optimizer, Selecting a Bundling Library
- selection of, Selecting a Bundling Library
business object/entity, Sharing Models

C

change
- as constant, Knowing How Much Structure Is Needed
- managing, Managing Change-Managing Change
child view management, Child View Management
classic web applications
- Ajax and, The Ajax era
- architecture of, Going Beyond Server-Side Rendering
- as prelude to isomorphic JavaScript, Classic web application-The Ajax era
client
- attaching DOM event handlers to, Attaching DOM Event Handlers
- controller instance creation on, Creating a Controller Instance
- degree of code shared with server (see spectrum, isomorphic JavaScript as)
- deserializing of data on, Deserializing Data
- getting/setting cookies on, Getting and setting cookies on the client
- implementing interface for getting/setting cookies, Implementing the interface for the client
- implementing redirect interface for, Implementing the interface for the client
- including redirect implementation in request lifecycle, Including the client implementation
- redirection on, Redirecting on the client
- rehydration (see rehydration of client)
- routing on the, Routing on the Client-Rendering a controller response
- SPA architecture and, Single-page web application
- transporting application to, Transporting the Application to the Client-Summary
  - (see also porting of application to client)
client simulation, Client Simulation on the Server
client-side rendering, performance impact of, Why Isomorphic JavaScript?
client/server transition, Sharing Templates
ClientApp class, ClientApp and ServerApp
Colony (case study), “Colony” Case Study: Isomorphic Apps Without Node-Next Steps
- final architecture, Final Architecture
- frontend single-page app, Frontend Single-Page App
- future issues, Next Steps
- global data structure, Data-Data
- layouts, Layouts-Layouts
- Page Maker class, Page Maker
- problem faced by, The Problem
- templating, Templating
- transpiled view models, Transpiled View Models-Transpiled View Models
compiling, ES6 to ES5, Compiling from ES6 to ES5-Compiling from ES6 to ES5
controller
- constructing an instance, Constructing a Controller Instance-Constructing a Controller Instance, Creating a controller instance
- creating, Creating a Controller-Creating a Controller
- executing an action, Executing a controller action
- executing the response flow, Executing the Controller Response Flow-Rendering a controller response
- extending, Extending the Controller
- instance creation on client, Creating a Controller Instance
- rendering a response, Rendering a controller response
cookies
- defined, Getting and Setting Cookies
- defining API for, Defining the API-Cookie example
- encoding, Implementing the interface for the client
- example of setting/getting on client/server, Cookie example
- getting and setting, Getting and Setting Cookies-Cookie example
- getting and setting on client, Getting and setting cookies on the client
- getting/setting on server, Getting and setting cookies on the server
- implementing interface for client, Implementing the interface for the client
- implementing interface for server, Implementing the interface for the server
- including implementations in request lifecycle, Including the cookie implementations
- standard interface for getting/setting, Creating an interface
Coplien, James, Architecting Our Application, Responding to and Calling the History API
Crockford, Douglas, The Perfect Storm: An All-Too-Common Story

D

data synchronization, bidirectional, Bidirectional Data Synchronization
Debergalis, Matt, Going Beyond Server-Side Rendering
dehydration, Sharing Templates
deserializing, Deserializing Data
design patterns, Families of Design Patterns, Flux, and Isomorphic JavaScript
distribution file, restarting server on changes in, Restarting the server on distribution changes
DOM (document object model)
- attaching event handlers to, Attaching DOM Event Handlers
- Brisket Views and, View Lifecycle
- template rendering and, Sharing Templates
- virtual DOM and checksums, Resuming on the Client
domain object/entity, Sharing Models

E

Eich, Brendan, Always Bet on JavaScript
environment-agnostic JavaScript, Environment Agnostic, On Nomenclature and Understanding
ES6
- compiling to ES5 from, Compiling from ES6 to ES5-Compiling from ES6 to ES5
- ES2015 vs., Getting Started
- writing, for application project, Writing Next-Generation JavaScript (ES6)-Writing Next-Generation JavaScript (ES6)

F

family of design patterns principle, Families of Design Patterns, Flux, and Isomorphic JavaScript
full-stack Angular 2, Angular Universal-Angular Universal

G

GetHuman.com, Full Stack Angular, GetHuman.com
global variables, Deserializing Data
Green, Brad, Isomorphic Angular 1
Grigorik, Ilya, Why Isomorphic JavaScript?
gulp-nodemon plugin, Restarting the server on distribution changes
Gulp.js
- about, Getting Started
- for application development workflow, Setting Up a Development Workflow-Restarting the server on distribution changes
- installation, Setting Up a Development Workflow
- watching for source code changes, Watching for source code changes
gulp.watch, Watching for source code changes

H

Handlebars, Templating
hapi.js
- about, Getting Started
- and user requests, Responding to User Requests, Creating a Controller
- cookie retrieval with, Getting and setting cookies on the server
- installation, Installing the Application Server
- redirects, Redirecting on the server
headless browsers, Full Stack Angular
History API
- Colony frontend SPA, Frontend Single-Page App
- leveraging, Leveraging the History API
- responding to/calling, Responding to and Calling the History API-Responding to and Calling the History API
- SPA library support for, Single-page web application
Hogan.js, Use Any Templating Language
HTML document, serving, Serving Our First HTML Document-Summary
HTML template, serving, Serving an HTML Template-Serving an HTML Template

I

idempotence, Creating a Controller Instance
isomorphic (term), On Nomenclature and Understanding
isomorphic abstractions (see abstractions)
isomorphic APIs, Isomorphic APIs
isomorphic JavaScript (generally)
- as spectrum, Isomorphic JavaScript as a Spectrum-Summary
- as union of classic web applications and SPA, Isomorphic JavaScript applications
- categories of, Different Categories of Isomorphic JavaScript-Summary
- characteristics of, Isomorphic JavaScript applications
- climate for development of, Evaluating Other Web Application Architecture Solutions-Isomorphic JavaScript applications
- defining, Defining Isomorphic JavaScript, On Nomenclature and Understanding
- environment-agnostic node modules, Environment Agnostic
- environment-specific, shimmed, Shimmed for Each Environment
- nomenclature, On Nomenclature and Understanding
- nomenclature and classifications, Different Categories of Isomorphic JavaScript
- origin of term, Different Categories of Isomorphic JavaScript
- reasons for using, Why Isomorphic JavaScript, Why Isomorphic JavaScript?-Summary
- shimmed for each environment, Shimmed for Each Environment, On Nomenclature and Understanding
- SPA architecture and, Single-page web application-Single-page web application
- universal JavaScript vs., On Nomenclature and Understanding
- when to avoid, Caveat: When Not to Go Isomorphic
isomorphic React.js (see React.js)
isomorphism, Different Categories of Isomorphic JavaScript

J

Jackson, Michael, Different Categories of Isomorphic JavaScript
Java, Node.js and, Caveat: When Not to Go Isomorphic
JavaScript
- Colony view model, Transpiled View Models-Transpiled View Models
- isomorphic vs. universal, On Nomenclature and Understanding
- Traceur and, Always Bet on JavaScript
- ubiquity of, Always Bet on JavaScript
jQuery, Model/Collection, ClientApp and ServerApp
JSON, The Perfect Storm: An All-Too-Common Story

L

layouts, Layout Template, Layouts-Layouts
lazy loading, Angular 2 Server Rendering
libraries, for bundling, Selecting a Bundling Library
link preview, Angular 2 Server Rendering
load time
- server rendering and, Angular 2 Server Rendering
- user expectations for, Introduction and Key Concepts
- Web App Gap and, Angular 2 Server Rendering
Luna, Client Simulation on the Server

M

mapping, Different Categories of Isomorphic JavaScript
memory leaks, Child View Management, Other Lessons Learned
Meteor.js, Bidirectional Data Synchronization
Minar, Igor, Isomorphic Angular 1
models, sharing, Sharing Models
MVC (Model-View-Controller) design pattern, Families of Design Patterns, Flux, and Isomorphic JavaScript

N

Newton, Isaac, Final Thoughts
node modules, environment-agnostic, Environment Agnostic
Node.js
- about, Getting Started
- cookie retrieval in, Getting and setting cookies on the server
- http module for redirects, Redirecting on the server
- installing from source, Installing from Source
- interacting with REPL, Interacting with the Node REPL
- isomorphic application without, The Problem
  - (see also Colony (case study))
- npm and, Managing Projects with npm
- streams, Creating Our Bundle Task
- version, Installing from Source
nomenclature, isomorphic JavaScript, Different Categories of Isomorphic JavaScript
npm, managing projects with, Managing Projects with npm
Nunjucks, Serving an HTML Template, Rendering a controller response

O

Osmani, Addy, Angular 2 Server Rendering

P

package management, Managing Projects with npm
package.json file, Initializing the Project-Initializing the Project
page load (see load time)
Page Maker class, Page Maker
path parameters, Working with Path and Query Parameters-Working with Path and Query Parameters
perceived load time, Angular 2 Server Rendering
- (see also load time)
perceived rendering speed, Classic web application
PHP, Node.js and, Caveat: When Not to Go Isomorphic
POJO (plain old JavaScript object), Serializing Data
porting of application to client, Transporting the Application to the Client-Summary
- adding client implementation, Adding Our Client Implementation
- bundle task creation, Creating Our Bundle Task-Creating Our Bundle Task
- bundling library selection for, Selecting a Bundling Library
- bundling of application, Bundling Our Application for the Client-Adding Our Client Implementation
- code organization, Organizing Our Code-Organizing Our Code
- executing the controller response flow, Executing the Controller Response Flow-Rendering a controller response
- leveraging the History API, Leveraging the History API
- responding to user requests, Responding to User Requests-Responding to and Calling the History API
- responding to/calling the History API, Responding to and Calling the History API-Responding to and Calling the History API
- routing on the client, Routing on the Client-Rendering a controller response
Preboot library, Angular 2 Server Rendering
pure components, Component memoization
Python, Node.js and, Caveat: When Not to Go Isomorphic

Q

query parameters, Working with Path and Query Parameters-Working with Path and Query Parameters

R

React.js, Isomorphic React.js at WalmartLabs-Postscript
- and TTFB, Time to First Byte
- boilerplate and patterns, React Boilerplate and Patterns-Resuming on the Client
- component memoization, Component memoization-Component memoization
- component rendering optimization, Component memoization-Component templatization
- component templatization, Component templatization-Component templatization
- rendering on the server, Rendering on the Server-Rendering on the Server
- resuming on the client, Resuming on the Client
- virtual DOM and checksums, Resuming on the Client
- Walmart approach to, The Walmart Approach-Next Steps
real-time web applications, Going Beyond Server-Side Rendering-Client Simulation on the Server
- bidirectional data synchronization, Bidirectional Data Synchronization
- client simulation on server, Client Simulation on the Server
- isomorphic APIs, Isomorphic APIs
redirects, Redirecting a Request-Redirection example
- API definition for, Defining the API-Redirection example
- Brisket, Tools That Do What You Expect in All Environments
- client, Redirecting on the client
- example, Redirection example
- implementing interface for client, Implementing the interface for the client
- including client implementation in request lifecycle, Including the client implementation
- interface creation for, Creating an interface
- on server, Redirecting on the server
rehydration of client
- attaching DOM event handlers, Attaching DOM Event Handlers
- controller instance creation, Creating a Controller Instance
- deserializing of data on client, Deserializing Data
- idempotence and, Creating a Controller Instance
- serializing of data on server, Serializing Data
- steps for, Serializing, Deserializing, and Attaching-Summary
- verifying process of, Verifying the Rehydration Process-Verifying the Rehydration Process
rendering speed, perceived, Classic web application
Rendr
- Backbone and, Isomorphic Angular 1
- Brisket vs., Best of Both Worlds
REPL (read-eval-print loop), Interacting with the Node REPL
request referrer, Brisket, Tools That Do What You Expect in All Environments
requests, responding to
- constructing a controller instance, Constructing a Controller Instance-Constructing a Controller Instance
- creating a controller, Creating a Controller-Creating a Controller
- creating an application class, Creating the Application Class-Creating the Application Class
- extending the controller, Extending the Controller
- improving response flow, Improving the Response Flow-Improving the Response Flow
- leveraging the History API, Leveraging the History API
- porting of application to client, Responding to User Requests-Responding to and Calling the History API
- redirecting, Redirecting a Request-Redirection example
- responding to/calling the History API, Responding to and Calling the History API-Responding to and Calling the History API
RequireJS Optimizer, Selecting a Bundling Library
Robbins, Charlie, Different Categories of Isomorphic JavaScript
route handling, Brisket, Code Freedom-Code Freedom
routes, sharing, Sharing Routes
routing, on client, Routing on the Client-Rendering a controller response
Ruby, Node.js and, Caveat: When Not to Go Isomorphic
Russell, Alex, Always Bet on JavaScript

S

search engine optimization (SEO)
- server rendering and, Angular 2 Server Rendering
- SPAs and, Single-page web application
server
- classic web application and, Classic web application
- client simulation on, Client Simulation on the Server
- degree of code shared with client (see spectrum, isomorphic JavaScript as)
- getting/setting cookies on, Getting and setting cookies on the server
- implementing interface for getting/setting cookies, Implementing the interface for the server
- installation for application project, Installing the Application Server
- redirection on, Redirecting on the server
- restarting on distribution changes, Restarting the server on distribution changes
- serializing of data on, Serializing Data
- SPA architecture and, Single-page web application
server rendering
- Angular 2, Angular 2 Server Rendering-Angular 2 Server Rendering, Angular 2 Server Rendering
- load time and, Angular 2 Server Rendering
- React.js, Rendering on the Server-Rendering on the Server
- SEO and, Angular 2 Server Rendering
- use cases for, Angular 2 Server Rendering-Angular 2 Server Rendering
- Web App Gap and, Angular 2 Server Rendering
ServerApp class, ClientApp and ServerApp
service workers, Angular 2 Server Rendering
serving an HTML document, Serving Our First HTML Document-Summary
- path/query parameters, Working with Path and Query Parameters-Working with Path and Query Parameters
- template, Serving an HTML Template-Serving an HTML Template
shim, defined, Different Categories of Isomorphic JavaScript
shimmed semantics, Different Categories of Isomorphic JavaScript, On Nomenclature and Understanding
shimmed-for-each-environment isomorphic JavaScript, Shimmed for Each Environment, On Nomenclature and Understanding
single-page application (SPA) architecture, Single-page web application-Single-page web application
- client-side template engines and, Sharing Views
- Colony case study, Frontend Single-Page App
- drawbacks, The Problem
- separation of server and client responsibilities, Single-page web application
source code, gulp.watch and, Watching for source code changes
spectrum, isomorphic JavaScript as, Isomorphic JavaScript as a Spectrum-Summary
- isomorphic vs. universal, On Nomenclature and Understanding
- sharing models, Sharing Models
- sharing routes, Sharing Routes
- sharing templates, Sharing Templates
- sharing views, Isomorphic JavaScript as a Spectrum-Sharing View Logic
Stapleton, Patrick, Isomorphic Angular 1
streams, Node.js and, Creating Our Bundle Task
structure, determining extent of, Knowing How Much Structure Is Needed-Managing Change

T

technical debt, Ajax and, Ajax: Accumulation of Technical Debt
templates, Sharing Templates, Serving an HTML Template-Serving an HTML Template
templating engines, Brisket, Use Any Templating Language
templatization, component, Component templatization-Component templatization
Time to First Byte (TTFB), Time to First Byte
tools, choosing, Angular Universal
Traceur, Always Bet on JavaScript
transpiler/transpiling, Transpiled View Models-Transpiled View Models, Always Bet on JavaScript
Twitter, Why Isomorphic JavaScript?

U

universal JavaScript, Different Categories of Isomorphic JavaScript, On Nomenclature and Understanding
URLs, redirects and (see redirects)
user requests (see requests, responding to)

V

view layer
- shared, Isomorphic JavaScript as a Spectrum-Sharing View Logic
- sharing templates, Sharing Templates
- sharing view logic, Sharing View Logic
view models, Transpiled View Models-Transpiled View Models
virtual DOM, Resuming on the Client

W

Walmart.com
- delivery problems, The Problem
- importance of page load speed for, Introduction and Key Concepts
- performance improvements, Performance Improvements-Performance Improvements
- React.js and, Isomorphic React.js at WalmartLabs-The Solution, The Walmart Approach-Next Steps
  - (see also React.js)
- TTFB problems, Time to First Byte
WalmartLabs, Why Isomorphic JavaScript, Isomorphic React.js at WalmartLabs-The Solution
wasm (WebAssembly), Always Bet on JavaScript
Web App Gap, Angular 2 Server Rendering
WebAssembly, Always Bet on JavaScript
Webpack, Selecting a Bundling Library

X

XMLHttpRequest object, The Ajax era

Previous Chapter

16. Final Thoughts

About the Authors