Designing a Flexible UI Architecture with React and GraphQL

on YouTube ↗01h 02m

" summary

A schema-driven UI is implemented with React, Redux, TypeScript, GraphQL and an Apollo + Redis cache to ship a UI schema that encodes validation, display hints, and attribute relationships. The system handles cached human-friendly values to avoid hundreds of browser requests, supports manage up to 200 items in a session with optimistic, batched saves, reduces attribute rollout from months to minutes, requires ~1 year of effort and ~1,000 tests, and successfully prevents many class-of-data-quality bugs.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 5:15ITEM DATA IS COMPLEX
3. 7:52CHALLENGES
4. 14:14RETHINKING ITEM DATA
5. 16:08DATA SCHEMA
6. 21:25A SCHEMA-DRIVEN UI
7. 22:52HIGH-LEVEL ARCHITECTURE
8. 25:51DATA RESOLUTION
9. 29:53SCHEMA ENGINE
10. 33:32WHY GRAPHQL?
11. 40:59DYNAMIC RENDERING
12. 46:09RELATIONSHIP SEMANTICS
13. 48:14MULTI-ITEM HANDLING
14. 51:48ASYNC AND OPTIMISTIC
15. 58:45WHERE CAN YOU START?

" related talks

• 23mOptimistic UI updates with Apollo Client and ReactRichard Carrigan · GraphQL Summit 2023
• 52mState management in a GraphQL eraKristijan Ristovski · Voxxed Days Bucharest 2018
• 28mSchema-Driven UI Components: Innovating Headless ERPSeiya Izumi, Masanori Uehara · GraphQLConf 2024
• 58mCrafting compelling real-time web experiences with GraphQL and ReactRob Crowley · NDC Sydney 2018
• 18mServer-Driven UI: Building Dynamic React ApplicationsDipanshu Gupta · React and Chill 2024
• 25mReact state management in a GraphQL eraKitze Ristovski · ReactJS Day 2017
• 55mFront-End Independence with GraphQL and ReduxChristiano Milfont, Yuri Adams · QCon São Paulo 2018
• 30mReact state management in a GraphQL eraKitze Ristovski · AgentConf 2018