Designing a Flexible UI Architecture with React and GraphQL

Many line-of-business apps we build today are "forms over data" applications. That data has its own backend schema and business rules, used by systems across the company. As that data flexes and scales, so do the needs of our UIs. Trying to manually track and maintain those data type changes in our UIs is time consuming and inevitably leads to bugs that cause data quality issues and results in real business impact.

Instead why don't we introduce our own UI schema that abstracts the myriad backend data sources with common sets of rules and metadata shared with both the client and server? I will show you how we designed and built a modern schema-driven UI architecture with React, Redux, TypeScript, and GraphQL that could manage business complexity and still scale to meet future data requirements.

I'll share some lessons learned and advice for your own applications so you can design your own data-driven flexible UI architecture that fits your business needs.