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

What we need to get started

We are going to build a sample isomorphic application by using JavaScript cross-stack. Therefore, the only requirement is to have the latest version of Node.js installed on your machine plus a text editor or IDE with ES6/ES2015 and JSX support. If you don't have Node.js installed, you can find the concrete steps on how to install it on the https://nodejs.org website.

Note

WebStorm, Atom, or Sublime Text 3 are generally considered good option. Those can run on any platform. Just make sure that your text editor is properly configured to work with ES6/ES2015 JavaScript, JSX, and ESLint.

Optionally, you can also install the React Developer Tools extension for Google Chrome or Firefox to help you with debugging React apps in the browser.

Previous Section
End of Section 6
Next Section