a blog by Boris Cherny

Data Fetching on the Web Still Sucks

It’s 2021, and data fetching on the web still sucks. This is crazy!

If you’re building a web app at scale you have plenty of options for data fetching, transport, caching, and management:


React+TypeScript: Use unions of objects for props

When typing React component props using TypeScript, I often see code that makes use of optional and nullable fields:

type Props = {
  href?: string
  onClick?: () => void
  text: string

function Button(props: Props) {
  if ('href' in props) {
    return <a className="Button" href={props.href}>{props.text}</a>
  if ('onClick' in props) {
    return <button className="Button" onClick={props.onClick}>
  throw ReferenceError(
    'You must pass either href or onClick to <Button />'

let a = <Button text="Click me" href="" />
let b = <Button text="Click me" onClick={() => {}} />

// OK. Should be an error
let c = <Button
  text="Click me"
  onClick={() => {}} />

// OK. Throws an error at runtime
let d = <Button text="Click me" />

In this example, Button is a React component that takes a prop text, and either an href or onClick prop controlling what happens when you press the button. Either href or onClick might be defined, and we throw a runtime exception if neither of them are defined.


On Derived State

Derived state for frontend applications comes up a lot. State B depends on State A, so after you update A, by the time you read B you want it to be updated based on the latest value of A. There’s a bunch of ways to model this, involving different tradeoffs:

  • Do you treat derived data and non-derived data the same?
  • Should users interact with the two the same way?
  • Do you re-compute dependent data in a lazy or eager way?
  • How much control do you need over re-computing derived data?

A popular solution is selector libraries like Reselect. The way they work is:


JavaScript in 2017: Year in Review, Predictions for 2018

2017 has been a wild year for JavaScript and frontend development. A new version of the language was released, GraphQL was announced, compile-to-JavaScript languages were rolled out by the dozen, React became the default frontend framework, and more. Here’s a rundown of 2017 trends, and my predictions for 2018:

The Rise of Compiled Languages on the Frontend

Language-to-language compilers let you do things like compile JavaScript to TypeScript (I think there will be a lot more interesting work in this space!), TypeScript to Flow, Flow to TypeScript, TypeScript to Reason, SQL to TypeScript, JavaScript to Go, and Go to JavaScript, to mention a few.


Options in TypeScript

If you wrote in Scala or Haskell before you tried TypeScript, you may have found yourself wondering: Where are the Options at?

For those not familiar, here is an excellent introduction to Scala’s Option type. At a high level, Option is an abstraction over null that gives useful semantics around running functions over possibly-null values. It implements a monad, a functor, and some other structures, but that’s not important for this post.