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

Chapter 6. Creating Data API with GraphQL

In this chapter, you will learn how to create a data API server in compliance with GraphQL specification. Why GraphQL, and not a traditional RESTful API? Because, if you start developing a data API server following RESTful methodology and try to optimize it for your web and mobile client apps, at the end of the day, you will end up having something very similar to GraphQL, which is the technology used at Facebook to request and deliver data to mobile and web apps since 2012. It allows them to move fast, increase developer productivity and seems to be working brilliantly at Facebook scale and performance requirements, serving hundreds of billions of requests per day.

In 2015, it was open sourced in a form of GraphQL specification, a reference (runtime) library implemented in JavaScript, dev tools (GraphiQL IDE), and documentation that can be found at http://graphql.org.

The topics covered in this chapter are as follows:

  • The basics of GraphQL
  • GraphQL query...
Previous Section
End of Section 1
Next Section