Book Image

Isomorphic JavaScript Web Development

By : Tomas Alabes, Konstantin Tarkus
Book Image

Isomorphic JavaScript Web Development

By: Tomas Alabes, Konstantin Tarkus

Overview of this book

<p>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.</p> <p>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.</p>

Related Content you might be interested in

Current Title:

Small book image
Isomorphic JavaScript Web Development
Tomas Alabes | Konstantin Tarkus
Oct, 2017 | 226 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Small book image
React Router Quick Start Guide
Sagar Ganatra
Sep, 2018 | 156 pages
Small book image
React 18 Design Patterns and Best Practices, 4e
Carlos Santana Roldaacuten
Jul, 2023 | 524 pages
Table of Contents (16 chapters)
Title Page
Title Page
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Getting Started with Isomorphic Web Apps
Getting Started with Isomorphic Web Apps
What are isomorphic apps?
How to write isomorphic JavaScript code?
Introduction to React.js
Sample app description
What we need to get started
Installing project dependencies
The basic project structure
Creating the first react component
Rendering a React app on both client and server
How to run and test our app locally
Summary
2
Creating a Web UI with React
Creating a Web UI with React
Component-based UI development
Stateful versus stateless React components
Grouping UI components in a project
Breaking the UI into a component hierarchy
Building a static version in React
Implementing a basic isomorphic router
Summary
3
Working with CSS and Media Assets
Working with CSS and Media Assets
Inline styles in React components
Getting started with CSS modules
Getting started with PostCSS
Getting started with Webpack loaders
Configuring Webpack for images and CSS
Sharing common settings across multiple CSS files
Summary
4
Working with Browsersync and Hot Module Replacement
Working with Browsersync and Hot Module Replacement
Getting started with Browsersync
Getting started with Hot Module Replacement
Summary
5
Rendering React Components on the Server
Rendering React Components on the Server
The core concepts of server-side rendering
Troubleshooting
Passing the component's state from server to client
Working with the React context
How to set the page title and meta tags
Working with third-party libraries
Fetching data from the server
Summary
6
Creating Data API with GraphQL
Creating Data API with GraphQL
The Basics of GraphQL
GraphQL query language
The GraphQL type system
Implementing a GraphQL server with Node.js
Backing GraphQL server by a SQL data store
Batching and caching
Summary
7
Implementing Routing and Navigation
Implementing Routing and Navigation
Pure server routing
Pure client routing
React server rendering
Summary
8
Authentication and Authorization
Authentication and Authorization
Token-based authentication and cookies
JSON Web Token (JWT)
Server authentication
Summary
9
Testing and Deploying Your App
Testing and Deploying Your App
Tests and deployment
Tests
Deployment
Summary

Summary

In this chapter, we walked through the basics of rendering the React components on the server, learned how to debug potential issues related to server-side rendering, and got familiar with a bunch of tricks and techniques which should help you to master isomorphic web application development.

It's highly recommended that you play with the sample source code accompanying this book (see the chapter-05 folder). Make sure that you can quickly accomplish the problems discussed in this book on your own, such as:

  • How to serialize a component's state on the server, embed it into a HTML page and restore (dehydrate) on the client? See components/CurrentTime.
  • How to pass the currently logged-in user object to React application? See server.js, components/Html, routes/Test.
  • How to set the document's title and other meta tags on both server and client? See server.js, components/Html, routes/Test.
  • How to include third-party UI components into your app that fail to render on the server?
  • How to fetch data...
Previous Section
End of Chapter 5
Next Chapter