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>
Table of Contents (16 chapters)
Title Page
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

The Basics of GraphQL


GraphQL is an application layer query language from Facebook. Despite the name and connotations it may imply, it has nothing to do with Graph databases; it is agnostic to how data is stored. For example, https://github.com/graphql/swapi-graphql/ is a GraphQL server that is backed by the swapi.co REST API. The examples in https://github.com/graphql/raphql-js repository on GitHub are backed by in-memory JSON objects. In real-world applications, it's not uncommon that GraphQL types are backed by data stored in a number of backends, including types backed by SQL tables.

What does it look like? Let's say you have a webpage that displays a rental item, alongside a list of related ads in the same area:

The data required to render that page may look something like this:

{ 
  viewer: { name: 'Konstantin Tarkus' }, 
  offer: { 
    id: 123, 
    title: 'Children's Bike', 
    location: { city: 'New York', state: 'NY' }, 
    picture: { url: '//cdn.com/123.png', width: 800, height...