On Space Time Computation

In response to Dan Abramov's React for Two Computers

A summary of the points I'll address from the above article.

Dan has written an excellent piece that gets at the technical formalities with interactive examples of the challenges and a solution to space time computation.

I've thought a lot about the problem domain of Space Time computation, but from a different lens.

To summarize the key difference between Dan's approach and mine. One, a timeless solution to allow the future to be invoked from the past. The other, a timefull solution that allows the past to be called from the future.

A brief note on tags

Tags alone represent data and rely on code to be executed.

Imagine a custom element, an HTML tag, that has never been defined before.

<action-script>

The intention of this tag is to invoke an arbitrary action of an arbitrary script. A basic “Hello World” in this paradigm is:

<action-script data-action="world" data-script="./hello.js" data-label="Hello World"></action-script>

// hello.js
export function world(event, target) {
  return 'Hello World'
}

We've defined a function named world in the hello.js file that returns “Hello World”.

The following code defines the custom element action-script. It will embed within itself a button with the data-label attribute; in the hello world example from above, the button will read “Hello World”.

When that button is clicked, it will invoke the actionScript function using the data-action and data-script variables from the action-script tag.

import elf from '@silly/elf'

const $ = elf('action-script')

$.draw(target => {
  return `
    <button>
      ${target.dataset.label}
    </button>
  `
})

$.when('click', 'button', actionScript)

export async function actionScript(event) {
  const root = event.target.closest($.link)
  const { action, script } = root.dataset
  
  if(script && action) {
    const dispatch = (await import(script))[action]
    if(dispatch) {
      await dispatch(event, root)
    }
  }
}

A brief note on JavaScript

Now that we've defined a tag, we have the ability to execute JavaScript from our Hypertext.

In the time travel paradigm, the future, the Late World, will always be the last computer to execute code. Using Old World Terminology, we can call the person using this last computer the “End-User.”

As such, the system composing the Hypertext will likely come from a Server or the Early World, the system administrator, the computer maintained by the author of the End-User License Agreement.

JavaScript itself can run anywhere. In a browser, in a native application, as a system process, or as a command-line tool.

We'll call such applications of JavaScript, the Any World.

Tying together the Early World, the Late World, and the Any World

There exists a computer in the Early World that is a web server

// early-world.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('<action-script data-script="./hello.js" data-world="world"></action-script>');
});

app.listen(process.env.PORT || 3000);

There exists a computer in the Late World that will call the Early World and be returned the action-script tag that to be run on the Late World machine.

As it stands now, when the Hello World button is clicked on the Late World computer, it will download the hello.js file from the Late World and the world function will run on the Early World computer.

This isn't similar to Dan's article at all

Not yet, but we're getting there, bear with me.

So far we've looked at historical Server –> Client architecture, but with a more dynamic nature. We introduced the concept of the Any World, but we haven't used it yet.

The nature of executing code across machines is embedding data into code and then passing that code to another machine to execute.

What we're going to look at next is exploiting the Any World to create an example that is both the Early World and Late World systems, a way to beat the space-time boss.

Instead of using express to compose and return the action-script tag, we'll create a new custom element space-time that will embed the hello.js file as a data-uri to be loaded directly in the Late World.

To round out the example, the alert is replaced with a toast that will be dynamically loaded from the Late World, aka self.location.href.

import elf from '@silly/elf'

const $ = elf('space-time')

$.draw(() => {
 const code = `
    export async function world(event, target) {
      const { toast } = await import('${self.location.origin}/public/elves/plan98-toast.js')
      if(toast) {
        toast('Hello World')
      }
    }
  `;

  const encodedJs = btoa(helloJsCode);

  // Create the data URL
  const dataUrl = `data:text/javascript;base64,${encodedJs}`;


  return `
    <action-script data-script="${dataUrl}" data-action="world">Hello World</action-script>
  `
})

View the example below or as a full page here

To demonstrate no funny business here, this is the actual code for space-time as pasted above, or as a full page here