SDUI at Scale: GraphQL & Elixir at Cars.com with Zack Kayser

https://is1-ssl.mzstatic.com/image/thumb/Podcasts115/v4/d0/11/11/d0111157-4c0b-04e6-b2f4-befc761c7b1a/mza_16239824909782127277.jpg/600x600bb.jpg

Elixir Wizards

SmartLogic LLC

199 episodes

2 months ago

Elixir Wizards is an interview-style podcast for anyone interested in functional programming and the Elixir Programming Language. Hosted by SmartLogic engineers and Elixirists Owen Bickford, Dan Ivovich, and Sundi Myint, this show features in-depth discussions with some of the brightest minds in the industry, discussing training and documentation in Phoenix LiveView, the evolution of programming languages, Erlang VM, and more. In the current season, we're branching out from Elixir to compare notes with thought leaders and software engineers from programming languages like JavaScript, Ruby on Rails, Go, Scala, Java, and more. Each episode will take a deep dive into a topic from Machine Learning and AI, to ECS and game development, to education and community. Learn more about how SmartLogic uses Phoenix and Elixir. (https://smartlogic.io/phoenix-and-elixir?utm_source=podcast)

All content for Elixir Wizards is the property of SmartLogic LLC and is served directly from their servers with no modification, redirects, or rehosting. The podcast is not affiliated with or endorsed by Podjoint in any way.

Technology

Education,

How To

https://assets.fireside.fm/file/fireside-images-2024/podcasts/images/0/03a50f66-dc5e-4da4-ab6e-31895b6d4c9e/episodes/a/a1f823ee-32ed-47d0-8571-bae12c48ac78/cover.jpg?v=1

SDUI at Scale: GraphQL & Elixir at Cars.com with Zack Kayser

Elixir Wizards

49 minutes 18 seconds

4 months ago

SDUI at Scale: GraphQL & Elixir at Cars.com with Zack Kayser

Zack Kayser, Staff Software Engineer at cars.com, joins Elixir Wizards Sundi Myint and Charles Suggs to discuss how Cars.com adopted a server-driven UI (SDUI) architecture powered by Elixir and GraphQL to deliver consistent, updatable interfaces across web, iOS, and Android.

We explore why SDUI matters for feature velocity, how a mature design system and schema planning make it feasible, and what it takes, culturally and technically, to move UI logic from client code into a unified backend.

Key topics discussed in this episode:

SDUI fundamentals and how it differs from traditional server-side rendering
GraphQL as the single source of truth for UI components and layouts
Defining abstract UI components on the server to eliminate duplicate logic
Leveraging a robust design system as the foundation for SDUI success
API-first development and cross-team coordination for schema changes
Mock data strategies for early UI feedback without breaking clients
Handling breaking changes and hot-fix deployments via server-side updates
Enabling flexible layouts and A/B testing through server-controlled ordering
Balancing server-driven vs. client-managed UI
Iterative SDUI rollout versus “big-bang” migrations in large codebases
Using type specs and Dialyxir for clear cross-team communication
Integration testing at the GraphQL layer to catch UI regressions early
Quality engineering’s role in validating server-driven interfaces
Production rollback strategies across web and native platforms
Considerations for greenfield projects adopting SDUI from day one
Zack and Ethan's upcoming Instrumenting Elixir Apps book

Links mentioned:

https://cars.com
https://github.com/absinthe-graphql/absinthe
Telemetry & Observability for Elixir Apps Ep: https://youtu.be/1V2xEPqqCso
https://www.phoenixframework.org/blog/phoenix-liveview-1.0-released
https://hexdocs.pm/phoenix_live_view/assigns-eex.html
https://graphql.org/
https://tailwindcss.com/
https://github.com/jeremyjh/dialyxir
https://github.com/rrrene/credo
GraphQL Schema https://graphql.org/learn/schema/
SwiftUI https://developer.apple.com/documentation/swiftui/
Kotlin https://kotlinlang.org/
https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5
Zack’s Twitter: https://x.com/kayserzl/
Zack’s LinkedIn: https://www.linkedin.com/in/zack-kayser-93b96b88

Special Guest: Zack Kayser.