Duration
14 hours (usually 2 days including breaks)
Requirements
- An understanding of APIs
Audience
- Developers
Overview
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.
Course Outline
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