From ancient times to the 1600s, people believed that the planets' orbits must be perfect circles. This false belief introduced a ton of complexity into their models. This complexity persisted until Kepler came along with the stunning insight (hindsight sarcasm) that no, orbits were elliptical not circular. With this new insight, models of planetary motion became dramatically simpler.

This false belief, that orbits must be circular, helped stall our understanding of the solar system for 1000s of years! All the complex calculations that the astronomers studiously completed to force-fit the circular idea into their models just got in the way of understanding what was actually going on.

Find the right building blocks

Later in the talk, Alan Kay summarized his message by stating that "you get simplicity by finding slightly more sophisticated building blocks".

Each problem space has a "particularly felicitous point-of-view". Find that point-of-view and problem complexity collapses.

The right building blocks allows us to directly manipulate the parts of the problem that we actually care about. They create an immediate connection between our thoughts and the visible outputs.

With the right building blocks, creating is fun! It's play! With bad building blocks, it's tedious work and muddy thinking.

How do you design the right building blocks?

Ahhh, now we're getting to the really interesting question.

This isn't trivial. As we saw, many of the brightest minds for 1000s of years couldn't figure out that planets' orbits aren't circles. Leonardo da Vinci couldn't build most of the machines he dreamt up. And I, no Leonardo, couldn't ever improve on headroom.js.

But literally weeks into using React.js, I was able to easily make a new React headroom component that is dramatically simpler than headroom.js.

Which suggests React is a far better building block for the web than raw HTML/JS/CSS.

Which also suggests the general principle that if you're mired in complexity at one layer, you need to step down a layer or two and redesign the building blocks at that layer.

headroom.js is probably as simple as vanilla HTML/JS/CSS will allow it. We couldn't make building for the web simpler until we moved to a more sophisticated component model like React provides.

Another case study: gatsby-image

I recently introduced a new Gatsby/React component called gatsby-image.

It has some nice tricks that you'd expect from a modern image component. It uses the new IntersectionObserver API to cheaply lazy load images. It holds an image's position so your page doesn't jump around as images load. It makes it easy to add a placeholder—either a gray background or a blurry version of the image.

Here's what a really simple Gatsby page component using gatsby-image would look like: