ROBIN POKORNY ATACCAMA FRONTEND MEETUP 2025-10-29 RELAY AT UNICORN SCALE Lessons from Productboard
A presentation at Ataccama FrontEnd Meetup in October 2025 in Prague, Czechia by Robin Pokorny
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
