Introduction

The Brains@Play Framework (Brains@Play) is a rapid application design system for composing interactive, high-performance web applications using functional building blocks.

Brains@Play follows a datastream programming paradigm and models programs as directed graphs of data flowing between operations. The advantages of this approach are:

1. Inherent parallelization for use in large, decentralized systems.
2. Seamless transition between different transport protocols (e.g. HTTP, Websocket, WebRTC, etc.) for passing messages.
3. No need to maintain state as a developer

While the team behind Brains@Play has initially sought to re-envision physiological computing education with the University of Alabama's Human Technology Interaction Lab, we ultimately intend to steward this framework into a copyleft software ecosystem for open-source application development that will recompose the web into a massive collection of reusable code blocks.

The Developers

All core software for The Brains@Play Framework has been released under the AGPLv3 license. It is maintained by Garrett Flynn and Josh Brewster from Brains@Play LLC.

The Library

brainsatplay compiles files in the Web Application Specification Language (specified in the wasl library) to high-performance applications. Beyond wrapping its dependencies, this library:

• Transforms function arguments into graphscript graphs that can be targeted independently
• Compiles source text from other languages (e.g. Python, C++, etc) into functional nodes (TBD)

Using the @brainsatplay/studio, the underlying WASL structure can be inspected, modified, and extended with official components.

How It Began

At the core of brainsatplay is our decision to standardize the usage of ES Modules.

With the release of ECMAScript 2015 (ES6) in 2015, ECMAScript Modules (ES Modules) became the standard format to package JavaScript code for reuse and provide modularity to the Web.

hello.js

export const world = () => console.log('hello world!')
export const friend = () => console.log('hello friend!')

index.js

import * as hello from './hello.js'
hello.world()
hello.friend()

The release of Firefox 60 (May 2018) marked its support in all major browsers. And Node.js 14 (April 2021) finally made these capabilities stable for server-side code. But had anything really changed about reuse?

Package managers such as NPM and Yarn made the process of reusing code easier by installing sub-dependencies, configuring your dependency tree, and much more. But packages aren't composable. They don't have a shared structure.

While working on browser-based physiological computing systems, Joshua Brewster and Garrett Flynn designed the Web Application Specification Language (WASL): a standard that combines ESM and JSON to specify Web Components.

trigger.js

export const loop = 1000/10
export default () => true

hello.js

export default (message="world") => console.log(`hello ${message}!`)

index.wasl.json

{
    "name": "My App",
    "graph": {
        "nodes": {
            "trigger": {
                "src": "trigger.js"
            },
             "hello": {
                "src": "hello.js"
            }
        },

        "edges": {
            "trigger": {
                "hello": {}
            }
        }
    }
}

At that point, they hooked up Web Bluetooth, Web Serial, and other data acquisition APIs to these components and optimized brainsatplay and its dependencies to be as fast as possible.

Playing with Code

brainstplay embodies our desire to support the joy of developers as they create high-performance applications. It encompasses many different goals including free software use, a focus on inspectability and interactivity, and accessibility for everyone with a brain.

More generally, brainsatplay refers to the culture of rapid prototyping that permeates the project by composing simple components without the need to focus on unneccesary complexity.

Audience

This documentation is written for programmers who care about the future of composability. We assume that you can read JavaScript code—as all of the examples here are written for the browser (specifically the latest Chromium browsers) or Node.js. Other than that basic background, we try to present all the concepts you will need to use brainsatplay.