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

Isomorphic JavaScript Web Development

Book Description

Leverage the power of React and Node to build complete web applications in pure JavaScript

About This Book

  • Combine the ease of React in the front end with the power of Node at the back end to build robust apps in pure JavaScript
  • Get your hands dirty by building on an entire application throughout the course of the book
  • Become productive and save precious time by adopting isomorphic JavaScript programming techniques

Who This Book Is For

This book is ideally meant for intermediate web developers who are interested in building isomorphic applications using JavaScript.

What You Will Learn

  • Build on the client side with the awesomeness of React
  • Style your application effectively
  • Render the server side using React
  • Implement a GraphQL server based on Node, Express, and SQL
  • Fetch application data using Relay
  • Build an isomorphic router to use in the application
  • Deploy your application to a cloud host
  • Secure your application with a solid token-based authentication system

In Detail

The latest trend in web development, Isomorphic JavaScript, allows developers to overcome some of the shortcomings of single-page applications by running the same code on the server as well as on the client. Leading this trend is React, which, when coupled with Node, allows developers to build JavaScript apps that are much faster and more SEO-friendly than single-page applications.

This book begins by showing you how to develop frontend components in React. It will then show you how to bind these components to back-end web services that leverage the power of Node. You'll see how web services can be used with React code to offload and maintain the application logic. By the end of this book, you will be able to save a significant amount of development time by learning to combine React and Node to code fast, scalable apps in pure JavaScript.

Style and approach

This step-by-step, example-based guide will get you acquainted with using React for the front end as well as back-end development.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Getting Started with Isomorphic Web Apps
    1. What are isomorphic apps?
    2. How to write isomorphic JavaScript code?
    3. Introduction to React.js
    4. Sample app description
    5. What we need to get started
    6. Installing project dependencies
    7. The basic project structure
    8. Creating the first react component
    9. Rendering a React app on both client and server
    10. How to run and test our app locally
    11. Summary
  3. Creating a Web UI with React
    1. Component-based UI development
    2. Stateful versus stateless React components
    3. Grouping UI components in a project
    4. Breaking the UI into a component hierarchy
    5. Building a static version in React
    6. Implementing a basic isomorphic router
    7. Summary
  4. Working with CSS and Media Assets
    1. Inline styles in React components
    2. Getting started with CSS modules
    3. Getting started with PostCSS
    4. Getting started with Webpack loaders
    5. Configuring Webpack for images and CSS
    6. Sharing common settings across multiple CSS files
    7. Summary
  5. Working with Browsersync and Hot Module Replacement
    1. Getting started with Browsersync
      1. How to install
    2. Getting started with Hot Module Replacement
    3. Summary
  6. Rendering React Components on the Server
    1. The core concepts of server-side rendering
    2. Troubleshooting
    3. Passing the component's state from server to client
    4. Working with the React context
    5. How to set the page title and meta tags
    6. Working with third-party libraries
    7. Fetching data from the server
    8. Summary
  7. Creating Data API with GraphQL
    1. The Basics of GraphQL
    2. GraphQL query language
    3. The GraphQL type system
    4. Implementing a GraphQL server with Node.js
    5. Backing GraphQL server by a SQL data store
    6. Batching and caching
    7. Summary
  8. Implementing Routing and Navigation
    1. Pure server routing
      1. Express routing
    2. Pure client routing
      1. Hash versus history API
      2. React routing
    3. React server rendering
      1. Rendering a view
      2. Passing the state to the application
        1. Initial state
        2. Using react-router-config
        3. Using redux
    4. Summary
  9. Authentication and Authorization
    1. Token-based authentication and cookies
      1. Cookies
      2. Token-based authentication
    2. JSON Web Token (JWT)
      1. Using jwt-simple
    3. Server authentication
      1. Sign up
        1. JWT token claims
        2. JWT token secret
      2. Log in
      3. Routing redirection
        1. Authenticating high order component
        2. Server-side authentication check
      4. Log out
    4. Summary
  10. Testing and Deploying Your App
    1. Tests and deployment
    2. Tests
      1. Unit testing React with Mocha, Sinon, Chai, jsdom, and Enzyme
        1. Mocha
        2. Chai
        3. Sinon
        4. Testing
        5. Enzyme
      2. Integration tests with Nightwatch
    3. Deployment
      1. Production best practices
        1. Things to do in your code
          1. Using gzip compression
          2. Don’t use synchronous functions
          3. Lock dependencies
          4. Carry out logging correctly
          5. Be stateless
          6. Error handling
        2. Things to do in your environment/setup
          1. Set NODE_ENV to production
          2. Ensure your app automatically restarts
          3. Use an init system
          4. Run your app in a cluster
          5. Balancing between application instances using the cluster API
          6. Use tools that automatically detect vulnerabilities
          7. Use a load balancer
          8. Use a reverse proxy
      2. Deploying on a cloud platform
        1. Heroku
    4. Summary