flume

Flume is designed for applications with complex or diverse business logic needs. It is a good fit if you encounter any of the following scenarios:

• Your app serves users with very different business logic requirements.
• You frequently use "feature flags" to toggle code parts for different users.
• Business logic is frequently mixed with application logic.
• Complicated business logic makes code hard to maintain.
• You want to provide a visual editor so users can safely edit logic.
• You are frequently deploying new code versions just to update business logic.
• Non-programmers in your organization need to contribute to building application logic.
• You struggle to share and maintain business logic between frontend and backend.

A root-style graph is a specific pattern where one node acts as the central "root" node, and all other nodes stem from it. While these graphs may look like trees, the "leaves" of the tree can be interconnected as long as they eventually feed back into the root node.

Flume provides a RootEngine specifically optimized for efficiently resolving graphs built in this root-style architecture.

In Flume, a graph is a data structure used to model complex relationships between pieces of data. It is represented as a JSON object.

Key components of a graph include:

• Nodes: Individual pieces of data or logical units.
• Connections: The relationships between nodes (referred to as "edges" in general graph theory).

Flume is designed to represent logical statements (like if/then, for each, or switch) as a graph, allowing you to transform inputs into outputs through a visual, editable structure rather than hard-coded logic.

The behavior of the Flume node editor is determined by two primary configuration objects: nodeTypes and portTypes.

• nodeTypes: Defines the different types of nodes available in your editor.
• portTypes: Defines the different types of ports available on those nodes.

You can define these configurations manually as a standard JSON object, or use the FlumeConfig generator provided by Flume to simplify the creation process.

The project follows a specific structure required for the build process. The following files must exist with these exact names:

• public/index.html: The page template.
• src/index.js: The JavaScript entry point.

Key Rules:

• Processing: Only files inside src are processed by Webpack. To ensure your JS and CSS files are bundled, place them inside src.
• Assets: Only files inside public can be used directly from public/index.html.
• Top-level directories: You can create other top-level directories, but they will not be included in the production build (useful for documentation).

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

A Port is the connection point on a node (represented as colored dots) that determines how nodes interact. Ports define the data types that can be passed between nodes.

• Connection Rules: You can only create connections between ports that share the same type.
• Customization: While examples often use colors to represent types (e.g., green for strings, blue for booleans, red for numbers), you can configure ports to output any data type and assign any color in your own implementation.

The useRootEngine hook accepts an optional third parameter: a context object. This object is the primary mechanism for passing dynamic application data into your logic graph.

When your React component re-renders (for example, due to a state change like a user logging in), useRootEngine will run with the updated context, allowing the nodes in your graph to react to the new data and return updated attributes to your component.