Programming with Ratio
Today, I’m sharing a first glimpse of my new programming environment for prototyping and building user interfaces and apps. It’s like a breadboard for building software. You can wire up components, prototype, figure out, think, iterate. It’s a tool for creating tools.
It’s tough to share all the potential things it can be used for in one short video. I’ll try to refine it through more videos and writing in the next weeks.
The video is uncommented. So here’s a summary of noteworthy things:
In comparison to other “visual programming” tools with nodes & wires, this one comes with layout by default and higher level of abstraction. I think this leads to more organised ways to programming because there is less of a mess.
Building blocks can be as small as a Number Slider or as large as a CSS Inspector or List of Emails.
Complexity doesn’t matter as long as they define their interfaces through inputs and outputs. Often, I start with small blocks that I then combine into larger blocks.
In contrast to “pure” nodes & wires, the focus is not to make the parts of a programming language visible (variables, if, else, loops, ...) but to provide views on data and data flow.
Through copy & paste, insertion and other ways to make code more tangible and connectable, the otherwise tedious work of nesting components, setting up state and passing down props etc. becomes a lot less complicated to think about.
- There are workspaces, blocks and wires. It’s like nodes & wires, but with strict layout and user interfaces in mind.
- This is a programming environment; not a coding environment
- This doesn’t try to replace code, but makes working with code easier.
- Programming (dealing with data and organizing chunks of code) can be done visually.
- Copy & Paste as first-class citizen → Code becomes tangible
- By visualising and showing data, it reduces the mental overhead of keeping state and data in my head.
- Wires are a tool, not a necessity (in theory, a workspace could have a single self-contained block and no wires at all)
- Instead of needing to wire up every input, blocks can define their own inputs through inspectors or by providing their own UI – some blocks allow both: external inputs and UI
- Blocks can have high levels of abstraction (no need to create blocks to do something easy like a+b)
- Wires can be hidden and the program still makes sense because there is always some layout, user interface, …
- Various mechanisms for abstraction (wire up something, then copy the resulting block elsewhere), collapse blocks to hide data/UI, combine low level blocks (many inputs) into larger blocks (few inputs)
Demo: Assembling a Code Playground (July 16, 2021)
This is a demo of one of the first use cases I had in mind when creating my new programming environment for prototyping and building user interfaces and apps.
In this demo, I assemble a code playground for HTML, CSS and JavaScript. Just like any other online code playground, but this one is extensible.
Recipe:
- 3 × Code Editor
- 1 × HTML Renderer
In the video, I manually include the animation library "anime.js" into the website. An extension to this workspace would be another block that could be used to load external dependencies.
What’s included:
- Programming using Blocks and Wires
- Blocks as Objects: Cut, Copy, Paste, Rename
- Organization with Tabbed Workspaces and Layouts
- Data Fetching and Data Flow
Demo: Replacing a code editor with a user interface (July 17, 2021)
In this video I replace a code editor with a special purpose instrument for controlling animation properties. This is a common workflow while prototyping: code first, then adding raw user interfaces on top which can be refined more and more.