You used to have two options for web app architecture: backend server-rendered in response to requests, or frontend browser-rendered, single page applications. Now you have a new choice: isomorphic apps, which let you take advantage of the best of both worlds. They render the HTML page on the server, deliver rendered markup to the browser, and behave like a single page application in the browser. You get server rendering benefits such as SEO-compatible stacks, fast page loads, improved performance, and the ability to take advantage of caching. And you get single page application advantages including no server interaction after the initial load, common UX patterns like modals, and fast response to user interactions. Node and React make isomorphic apps practical and simpler to build. Now you can write code that runs on the server and the client as well as effectively executing the handoff from the server to the client.
Isomorphic Development with JavaScript teaches web developers to build isomorphic web applications using JavaScript, NodeJS, and React. You'll begin by learning the difference between isomorphic, single page, and server rendered web applications as well as the advantages and challenges of isomorphic web applications. Then you'll get hands-on and build an isomorphic web application. You'll learn how to render views, fetch data with Redux, handle requests on the server, and serialize and deserialize data. This book covers isomorphic app basics, like React, Redux and Webpack. The last part shows you how to apply isomorphic architecture with frameworks like Angular 2 and Ember. By the end, you'll be able to build a high performance content site that will support your users' needs and your SEO goals.
Part 1: First steps
1. Introduction to Isomorphic Web Application Architecture
1.1. Isomorphic Web App Overview
1.1.1. How it works
1.1.2. Building our stack
1.2. Advantages of Isomorphic App Architecture
1.2.1. SEO Benefits
1.2.2. Performance Benefits
1.2.3. No JavaScript? No problem!
1.2.4. Maintenance and developer benefits
1.2.5. Challenges and Tradeoffs
1.3. Architecture Overview
1.3.1. Application Flow
1.3.2. Handling the server side request
1.3.3. Rendering in the Browser
1.4. Building the view with React
1.4.1. Understanding the Virtual DOM
1.5. Business Logic and Model: Redux
1.5.1. One Way Data Flow
1.6. Building the app: webpack
1.7. Summary
2. A Sample Isomorphic App
2.1. What we'll build in this chapter: Recipes Example App
2.2. Tools
2.2.1. Environment Setup and Package Install
2.2.2. Build and run the server
2.2.3. Running the browser with webpack
2.2.4. Multiple code entry points
2.3. Using redux to get data into our app
2.3.1. Setup Redux
2.3.2. Fetching the recipes data
2.4. The view
2.4.1. Introduction to JSX
2.4.2. React and Redux
2.4.3. Recipe App React Components
2.5. Server Rendering
2.5.1. Setting up a basic route on the server with middleware
2.5.2. Fetching the data
2.5.3. Rendering the view & serializing/injecting the data
2.5.4. Look Ma! No JavaScript
2.6. Browser Rendering
2.6.1. Deserializing the data& hydrating the DOM
2.7. Summary
Part 2: Isomorphic App Basics
3. React Overview
4. Intro to Webpack
5. Testing Isomorphic Apps
6. Redux/Flux
7. Building the Server
8. Isomorphic View Rendering
9. Handling Differences in Environments
10. Performance Optimizations
Part 3: Applying Isomorphic Architecture with Other Tools
11. Angular 2.0
12. Ember 2
What's inside
- Rendering pages with React
- Handling user sessions on both server and the browser
- Using Webpack and Babel for a modern JavaScript workflow
- Combining server rendered and SPA architecture
- Handling real-word caching and performance
- Putting together JavaScript libraries: Redux and React Router
- Debugging and testing in isomorphic environments
About the author
Elyse Kolker Gordon has been building web applications for five years and is a Technical Lead at Vevo, where she solves challenges with isomorphic apps every day. She writes technical articles and speaks about JavaScript at meetups and conferences. In her free time, she plays the drums and travels.
- MEAP combo $39.99 pBook + eBook
- MEAP eBook $31.99 pdf + ePub + kindle
FREE domestic shipping on three or more pBooks