By Caleb Meredith and Andrew Wang

Airtable’s codebase follows an ethos of continual evolution. We’re unafraid of ripping out old code when it no longer meets our needs or introducing new technologies and patterns to reflect the current state of the art. Today, we’re going to provide an overview of some of the step-change moments in the history of our codebase, and dive deep into the largest of these changes: our migration to TypeScript. We’re also open-sourcing some of the tools we used to pull off this migration successfully.

Let there be light

This story starts at the very beginning, with the genesis commit…

Pick the programming language you know best. I’ll pick JavaScript. Now imagine every value you could create in that language. Yes, every value.

In JavaScript, you’d have numbers like 0, 1, -42, and 3.14. You’d have strings like the empty string "" or the classic "Hello, World!". You’d have objects like {id: 7, name: "Kate"} or {props: {...}, state: {...}} if you’re a React developer. You’d have functions like function add(a, b) { return a + b } or event => this.handleChange(

That’s a lot of values. An infinite amount of values.

This is the set of all values for…

Over the last year, the Flow team has been slowly auditing and improving all the possible error messages generated by the type checker. In Flow 0.66 we’re excited to announce a new error message format designed to decrease the time it takes you to read and fix each bug Flow finds.

Source: Dmitry Boldyrev

The images in this blog post are of Flow’s new CLI renderer, designed by Lee Byron. Lee graciously offered to design an updated CLI renderer when I introduced him to the new error message format.

Flow’s type system is structural and allows for thorough type inference. …

Learn what some of the unexpected costs of GraphQL non-null fields are.

In the GraphQL type system all types are nullable by default. This means that a type like Int can take any integer (1, 2, etc.) or null which represents the absence of any value. However, the GraphQL type system allows you to make any type non-null which means that the type will never produce a null value. When using a non-null type there will always be a value. A GraphQL non-null field is a GraphQL field where the type is non-null.

Non-null fields in GraphQL may seem great at first, after all they guarantee that you will always have a…

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React.

In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.

The biggest change we are making is to modify how you define React class components. From version 0.53.0 and on, the React.Component class will take two type arguments, Props and State (as opposed…

I currently have three conference talk proposals that contain ideas which I really want to explore. Even if I never end up giving a talk on these ideas I want to put these out into the world anyway and start talking about these ideas. I also think you will enjoy reading them 😉

The titles of my proposals are:

  1. I love JavaScript so I’d be sad to see it die.
  2. Write your own React!
  3. Designing Your GraphQL Schema

The first is based off of the controversial idea that JavaScript will die thanks to WebAssembly. …

Design principles for building effective GraphQL mutation systems that can evolve over time

Designing a good GraphQL API is tricky, because you always want to balance utility and convenience with a consideration around how the API may evolve in the future.

The main points to consider when designing your GraphQL mutations are:

  • Naming. Name your mutations verb first. Then the object, or “noun,” if applicable. Use camelCase.
  • Specificity. Make mutations as specific as possible. Mutations should represent semantic actions that might be taken by the user whenever possible.
  • Input object. Use a single, required, unique, input object type as an argument for easier mutation execution on the client.
  • Unique payload type. Use a…

Control normalized data with a GraphQL-native interface

GraphQL is strongest when it is a unified access point to your organization’s entire data universe: You may have a plethora of micro-services churning away in the background, but your GraphQL consumer doesn’t need to know those details. Instead, they can focus on being productive using your organization’s single, cohesive, data model.

Often, an app’s entire data universe is way too large to reasonably download and manage entirely in an app, but at the same time we want to fool our users into thinking that we’ve done just that. To build an app that creates this kind of user perception…

Edges have never been so fun!

I don’t read many books these days, but I do listen to books. Thanks to the incessant work of the Audible marketing team Amazon has converted me into an audiobook consumer. I’m pretty happy now with my new found hobby that allows me to take a book anywhere and “read” while doing tasks where my eyes would otherwise be occupied.

Yet there is one thing that I find difficult about the medium. Audiobooks don’t have pages. Pages exist in books to help people find stuff in a large collection of words, and pages help create clear boundaries between ideas. …

Meditation is incredibly difficult for me. First, I sit down. Second, I do some stuff with my arms and legs that I’m sure looks “zen.” Third, I’ll start deep-breathing, or what I think is deep-breathing because who has formal training in deep-breathing?

Within two seconds my phone has buzzed, a bird has chirped, water is dripping from the faucet, and my leg has fallen asleep because I’ve been sitting on it. …

Caleb Meredith

Product engineer at Airtable. Previously Facebook. @calebmer on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store