Skip to content

Instantly share code, notes, and snippets.

@andyjessop
Created March 8, 2024 09:17
Show Gist options
  • Save andyjessop/4e48ae6089e1591dc03c08b72af5d282 to your computer and use it in GitHub Desktop.
Save andyjessop/4e48ae6089e1591dc03c08b72af5d282 to your computer and use it in GitHub Desktop.
NeurFlow concept

NeurFlow Documentation

Introduction

NeurFlow is a revolutionary new programming language for building complex, dynamic, and reactive user interfaces. Inspired by the structure and function of neural networks, NeurFlow allows you to define your application as a network of interconnected "neurons".

Core Concepts

Neurons

In NeurFlow, a neuron is the fundamental building block of your application. There are several types of neurons:

  1. State Neurons: These neurons hold the state of your application. They can be initialized with default values and can be updated based on user interactions or external data.

  2. Derived Neurons: These neurons compute values based on the current state or other derived neurons. They are used to transform data or compute conditional values.

  3. Atom Neurons: These are the basic building blocks of the user interface. They represent simple, standalone pieces of the UI, such as text, icons, or inputs.

  4. Molecule Neurons: These are composed of multiple atom neurons and represent more complex, reusable pieces of the UI.

  5. Organism Neurons: These are high-level components composed of multiple molecule neurons. They represent complete sections of the UI.

  6. Page Neurons: These are the top-level neurons that represent an entire page or view in your application.

Connections

Neurons are connected to each other to define the flow of data through your application. A connection is defined using the > operator.

For example, StateA > DoubleValue > StateB means "take the value of StateA, pass it through the DoubleValue neuron, and update StateB with the result".

Connections can also include conditional logic using ternary expressions. For example, StateA > (value > 10 ? "High" : "Low") > StateB will update StateB with "High" if the value of StateA is greater than 10, otherwise it will update it with "Low".

Events

Neurons can emit and listen to events. This is how user interactions and other asynchronous actions are handled in NeurFlow.

For example, a button neuron might have an on_click event that triggers an update to a state neuron.

Rendering

NeurFlow automatically handles the rendering of your application based on the current state of the neuron network. When a state or derived neuron updates, all neurons that depend on it are automatically re-rendered.

This declarative approach to rendering makes NeurFlow applications highly reactive and efficient.

Syntax

A NeurFlow application is defined in a .neuro file. The basic syntax is as follows:

// Comments start with //

// Define a state neuron
MyState state {initialValue}

// Define a derived neuron
MyDerived derive {MyState > transform}

// Define an atom neuron
MyAtom atom {
    Text text {MyDerived}
    Button button {Click me!}
        on_click > MyEvent > MyState
}

// Define a molecule neuron
MyMolecule molecule {
    AtomA
    AtomB
}

// Define an organism neuron
MyOrganism organism {
    MoleculeA
    MoleculeB
}

// Define a page neuron
MyPage page {
    MyOrganism
}

Conclusion

NeurFlow represents a new paradigm in user interface development. By defining your application as a network of neurons, you can create complex, dynamic UIs in a highly declarative and reactive way.

The separation of concerns into different types of neurons promotes reusability and modularity, while the declarative nature of the connections makes the flow of data and dependencies explicit and easy to reason about.

We believe that NeurFlow has the potential to revolutionize how we build user interfaces. We're excited to see what you'll create with it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment