React, Relay, and GraphQL

• An understanding of APIs

Audience

• Developers

In the years following 2010, the switch from native web platforms to their mobile counterpart required a more efficient data request system. At the time, companies relied on RESTful services that proved to be faulty due to their inability to adapt to convoluted requests in React applications, resulting in slow response times. In order to overcome this obstacle, Facebook engineers created services known as GraphQL and Relay. GraphQL simplifies the client to API relationship by automating requests while the JavaScript framework, Relay, manages data in React applications. Both Relay and GraphQL are used to optimize a React application's UI.

This instructor-led, live training (online or onsite) is aimed at developers who wish to use GraphQL and Relay to manage data in React applications.

By the end of this training, participants will be able to:

• Set up the necessary development environment to start data control for React applications.
• Deliver instant UI-response interactions.
• Aggregate data from multiple libraries into one convenient API.
• Pre-fetch using GraphQL and Relay.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

• To request a customized training for this course, please contact us to arrange.

Introduction

Overview of the Web Development Cycle

• Version control, coding, building, testing, and deploying
• Automating the process

The Fundamentals of APIs and Their Functionality

• Web Architecture Patterns: the composite pattern, proxy pattern, and facade pattern
• Operations: queries and mutations

Preparing the Development Environment

• Preparing the code repository (GitHub, GitLab, etc.)
• Installing NPM
• Preparing file dependencies

Developing an Application

• Creating a data-store that loads data folder content
• Creating a server file and configuring GraphQL
• Run React with Relay as the JavaScript framework
• Automating work with pre-fetching
• Using differed queries, define properties to find critical data
• Code-splitting data using Relay

Testing the Application

• Finding code errors with JSHint
• Testing optimization with web.dev

Securing the Application

• Authenticating users

Troubleshooting

Summary and Conclusion