July 17-18th / New York CityJohn Jay College of Criminal Justice

Diamond Sponsors

Components as data: A cross-platform GraphQL-powered component API

Luke Herrington

Luke Herrington

Jul 18 14:45pm
Amazee Labs Hall

Discussions about "when" to use decoupled architecture are plentiful and important, but it often assumes or ignores another tricky decision: "Where" to decouple. This talk will discuss the “Decouple Line” and how moving it around can provide some amazing features to your API.

When designing a content API, the assumption is often that decoupling must match your data model, where tables in your data store are mapped to resources in your API (think, /author and /posts). This is often helpful and necessary for exposing the raw data that our UIs need, however, in a cross platform scenario where the iOS, Android, TV, and Web teams are all building similar features, this can lead to a lot of duplicated efforts and discrepancies between the apps. All of these platforms will be writing similar queries, denormalization logic, business logic, and A/B tests, and then finally render the UI with their respective component libraries. This can lead to platform specific bugs, inefficient queries, and design inconsistency across platforms.

Components as Data moves the “decouple line” further toward the frontend to absorb queries, denormalization, business logic, and A/B testing into the backend. In practice, the API serves JSON structured in terms of the tree of UI components that will be used to render the respective data. In doing so, it becomes a quasi frontend in its own right, but it renders JSON instead of HTML or native views. This enables some amazing features:

  • ⚛️ Simpler, presentational frontends

  • ⚙️ Centralized business logic

  • 👩‍🔬 Centralized A/B Testing and Feature Flagging

  • 🎨 Design consistency via a GraphQL powered “Design Schema”

  • 🔥 Query optimization

Finally, this pattern opens the door for writing a cross platform UI library that implements the “design schema” and can be used as the rendering engine across platform.

This talk will outline the Components as Data pattern, showing its strengths and weakness, and demonstrate via code and live demos how using this pattern, in coordination with a framework like React, can make for a very power tool for any business.

Back to Sessions

July 17-18th / New York City
John Jay College of Criminal Justice
524 W 59th St, New York, NY 10019