ROBIN POKORNY ATACCAMA FRONTEND MEETUP 2025-10-29 RELAY AT UNICORN SCALE Lessons from Productboard

FE Platform The team selected and provided tooling 2.5 years Serving as architect Full rewrite of thick web client to thin with GraphQL & Relay

01 QUICK INTRO INTO RELAY 02 WINS & CHALLENGES WE SAW 03 WHO SHOULD USE RELAY?

QUICK INTRO INTO RELAY 01

CREATED BY FACEBOOK SAME TEAM THAT CREATED GRAPHQL DEEPLY OPINIONATED ‘BUILT FOR SCALE’ ‘GRAPHQL BEST PRACTICES BAKED IN’

COLOCATION QUERY AGGREGATION Components declare their data dependencies One request per page and other optimisations

DEMO

Automatic request deduplication FOR FREE Built-in pagination via Connections Optimistic updates

THE MAGIC

NODE INTERFACE Global Object Identification Spec facebook.com/10235697663175551 → Photo facebook.com/1452660028278850 → Group Relay Store = One source of truth Update once → reflects everywhere

WINS & CHALLENGES WE SAW 02

DEMO

WINS TYPE SAFETY END-TO-END ENUMS & FUTURE-PROOFING Catch breaking changes at build time. Full autocomplete in IDE. No manual type definitions. Schema evolution without breaking clients REFETCHABLE FRAGMENTS PAGINATION WITH @CONNECTION Initial page load: one aggregated query. Need fresh data? Refetch just this fragment. UsePaginationFragment hook handles everything for standard schema SUSPENSE INTEGRATION OPTIMISTIC RESPONSES React 18 Suspense works out of the box UI updates instantly, rollback on error

CHALLENGES DOCUMENTATION & COMMUNITY Tutorial often outdated Small community = fewer answers Hard to Google solutions Diving in source code was common IMPACT ON ARCHITECTURE Architecturally significant decision Dictates best practises for schema Node query needs ALL types Federation + Node query = pain INITIAL INVESTMENT Shallow (!) learning curve Server engineers needs to know it Requires solid React knowledge Tooling takes time to set up

WHO SHOULD USE RELAY? 03

USE SKIP Advanced data model Simple CRUD Large scale application Independent pages Need polished, consistent UX Unwilling to accept the Relay way Team can invest in learning & culture Can’t invest in learning curve

RELAY IS FERRARI-LEVEL ENGINEERING Not every team is ready. More should try it.

LET’S CONNECT WEB NAME me@robinpokorny.com EMAIL