Tech stacks are a dime a dozen: everybody has one, and we all think ours is the best! The fact is there are many great tech stacks out there, there’s no right answer when selecting one, and the one your team chose isn’t necessarily any better or worse than the one your top competitor chose.

That said, for our team of TypeScript engineers we found this stack helped us build more than 2x faster (yes, we measured) and we all enjoyed it very much, so I wanted to mention it somewhere!

Overview

Pros

• Engineers can theoretically work on both the front and back-end; they only need to know one language: TypeScript!
• Type safety from your data store to the front-end
• The awesome benefits of GraphQL without the headaches of creating a server from scratch
  • Note: if you’ve tried GraphQL before, loved the FE benefits but hated the BE complexity, don’t stop reading yet. Hasura takes away 95% of that difficulty.
• Relay is very opinionated and allows even junior engineers to build a solid, performant FE

Cons

• Relay has a steeper learning curve than many front-end data management options
• Hasura is a paid product

React + Relay

You may know that Facebook built React, but did you know they also built a front-end GraphQL client called Relay (relay.dev)? In fact, if you install the Relay Chrome extension and open your Facebook account, you’ll get a cool view of your own data/state management within the app!

You’re probably familiar with React so I won’t dive into it much here, but I do want to talk a bit about Relay.

Relay is a GraphQL client, similar to Apollo client, but does far more than just help you query data. If you’ve used Redux, a frontend library for centralized state management, that’s the closest analogy I’m aware of.

And Relay is fantastic. I’ve used it in multiple production apps and can’t recommend it highly enough. It’s opinionated, which some engineers don’t like. The benefit being that as long as you don’t completely botch its implementation, you’ll end up with a React app that is:

• Performant