Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Components as Data - A Cross Platform GraphQL Component API

JSConf via YouTube

Overview

Explore the concept of "Components as Data" and its impact on cross-platform GraphQL component APIs in this JSConf US 2019 talk. Delve into the intricacies of decoupled architecture, focusing on the crucial decision of where to decouple. Learn how shifting the "Decouple Line" can unlock powerful features for your API. Examine the limitations of traditional content APIs that map data models directly to resources, and discover how this approach can lead to duplicated efforts and inconsistencies across platforms. Understand the benefits of moving the decoupling process closer to the frontend, incorporating queries, denormalization, business logic, and A/B testing into the backend. Explore the practical implementation of serving JSON structured as UI component trees, effectively creating a JSON-rendering frontend. Discover the advantages of this approach, including simplified frontends, centralized business logic and A/B testing, design consistency through a "Design Schema," and optimized queries. Gain insights into developing a cross-platform UI library that implements the design schema and serves as a rendering engine for multiple platforms. Follow along with code examples, GraphQL schema demonstrations, and practical implementations in React to grasp the full potential of the Components as Data approach.

Syllabus

Intro
Components
Component Definition
Props
Component Example
Component Composable
I love components
Decoupling Architecture
restful
Stripe
HeyDos
Pagination
Monolith
Offline first application
Distributed local first
Example
React
Basic Components
Why GraphQL
GraphQL Schema
Page Type
Apollo Playground Example
Design Schema
GraphQL Component Library
React Frontend Implementation
Handling Variants
Good Parts
Final Thoughts

Taught by

JSConf

Reviews

Start your review of Components as Data - A Cross Platform GraphQL Component API

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.