Designing a Flexible UI Architecture with React and GraphQL

Explore a modern approach to building flexible UI architectures for complex line-of-business applications in this conference talk. Learn how to design and implement a schema-driven UI architecture using React, Redux, TypeScript, and GraphQL to manage business complexity and scale with future data requirements. Discover strategies for abstracting backend data sources, implementing common rules and metadata, and addressing challenges in maintaining data type changes across UIs. Gain insights into high-level architecture, data resolution, schema engines, and the benefits of using GraphQL. Understand dynamic rendering, relationship semantics, multi-item handling, and asynchronous operations. Walk away with practical advice and lessons learned for designing your own data-driven flexible UI architecture tailored to your business needs.

Intro
ITEM DATA IS COMPLEX
CHALLENGES
RETHINKING ITEM DATA
DATA SCHEMA
A SCHEMA-DRIVEN UI
HIGH-LEVEL ARCHITECTURE
DATA RESOLUTION
SCHEMA ENGINE
WHY GRAPHQL?
DYNAMIC RENDERING
RELATIONSHIP SEMANTICS
MULTI-ITEM HANDLING
ASYNC AND OPTIMISTIC
WHERE CAN YOU START?