Devlog: week one

It's week 3 of RC. My first week was spent testing out some ideas. I made a silly terminal spreadsheet thing, it was neat, but not what I wanted to build.

Last week, I started to build some software that I think should exist.

I had some rough ideas to get started, but the hazy vision of what I'm building is starting to become clear enough to describe.

The above video shows a "development environment" running a "Hello, world"-style program.

Each "box" is a dynamic programmable unit, which has both a "value" and a "display".

The idea is that I want to see how it feels to have the lines blurred between "editing", "debugging", and "running" code.

Here, the "Hello, world" message (in box id_4) is able to be controlled and manipulated by:

• Box id_0, a text value, which says "Hello" or "Howdy" or whatever you'd like at the beginning
• Box id_1, an "Excitement level" button which increases the number of exclamation points each time you click it
• Box id_2 and id_3, two color pickers for the text & background color
• Box id_5, a "Greeting" text input, which lets you customize the second line text

Each of these boxes is like a variable declaration. Visually, they act a bit like a spreadsheet cell.

I want this tool to be something which can be used to build both the structure of an application and the debugging/data-entry tools to modify that application all in the same place.

Right now, it's just a single "module" with one namespace. But I think it's possible for something like this to work for projects both large and small.

Each piece of code is a "live" JavaScript (with JSX support) expression.

For reasons I don't have time to get into, each piece of code is also evaluated in a JavaScript sandbox (via QuickJS) for more control over the execution environment.

Each piece of code (and each calc() function) exists in a big dependency graph. When a value changes, its dependencies are marked as dirty in the graph and recalculated.

So each time something changes, everything that depends on that value is automatically recalculated. Just like a spreadsheet!

The JSX itself is rendered via Gooey, which means it behaves a bit differently from other JSX libraries like React.

There's a tutorial if you want to learn more, but in short:

// Gooey-style: 😇 normal class names & on: prefixed event handlers
const GooeyInputComponent = ({ onInput }) => (
  <div class="gooey-input">
    <label for="gooey-input-text">Input:</label>
    <input id="gooey-input-text" type="text" on:input={(e, el) => {
      onInput(el.value);
    }} />
  </div>
);

// React-style: 😕 confusing prop names & event names that don't match the DOM APIs
const ReactInputComponent = ({ onInput }) => (
  <div className="react-component">
    <label htmlFor="react-input-text">Input:</label>
    <input id="react-input-text" type="text" onChange={(e) => {
      onInput(el.target.value);
    }} />
  </div>
);

Today's build can be found here. The current build will be updated regularly here.

Click on a blank space to create a new box, you can drag around the name to move it around.

Let me know what you think!

Yes, it's very early, very ugly software: it is confusing, unpolished, and not anywhere close to finished. Heck, the menu says "Put a menu here"!

But! It cuts to the core and asks: What is an extremely interactive development environment?

I want a development environment where everything is extremely dynamic.

So much of art—so much of creation is discovery. And you can't discover anything if you can't see what you're doing.

Brett Victor, Inventing on Principle (around 05:19)

Twelve years ago, Brett Victor gave an extremely compelling talk called "Inventing on Principle". If you haven't seen it, watch the first 7 minutes, and if you're not convinced it's worth finishing you can go and close this page.

It's about the idea of making development environments where the result of executing code feels more malleable and connected to act of viewing and changing the code itself.

The thing that gets me is twelve years ago we had a demo showing some shockingly impressive development environments, and we're all still programming in a glorified text editor.

I think that's sad and I'd like to change that.