Now that we've created a simple node editor with some useful nodes, we need a way to actually run our logic. While you are free to parse your logic graphs any way you see fit, Flume ships with a pre-built engine for running "root-style" logic graphs. The root engine is responsible for taking in a root-style graph generated with the Flume node editor, and returning the resolved properties of the root node. Let's take a look at how we can get the root engine up and running.
Setting up the engine
To get started, let's create a new file called
engine.js where we'll import
flume, and our config file from
Like before, we create a new instance of the RootEngine and set it to a variable that we'll export below. We also imported our config file and provided it to the root engine as the first parameter. In order for the engine to work though, we need to provide it with 2 helper functions:
The first thing we need to do is tell the root engine how to handle the controls for each of our ports. To keep things organized, let's create a new function above our root engine.
Let's break this down.
resolvePorts is a function that takes in the type of the port currently being processed, and all of the data from its controls. Then we open a switch statement with the port type, and return the port data for each port type. Because we only have 3 port types, we only have 3 entries in our switch statement. In our case, each of our ports only has one control, and we gave each control the same name as the port, so we can fill this function our pretty easily. In advanced use-cases, ports may have any number of controls, so this function will need to resolve each control, but this work for now.
This might seem a little unintuitive or redundant at first, but keep in mind that Flume doesn't make many assumptions about how you build or run your logic, so these functions are how you define that behavior.
The last function we need is
resolveNodes. This function tells each node how it should transform its inputs into its outputs. Let's create this function above the engine.
This function looks similar to
resolvePorts but has some key differences.
resolveNodes takes in the current node, the resolved input values, the nodeType (which we're not using in this example), and an object called
context. We create a switch statement using the node type, and return an object representing all of the outputs of that node. You may also notice that we didn't create a function for the
homepage node. Because we marked this node as the "root" node, the root engine will take care of resolving and returning the values of its inputs for us.
Remember, each node can conceptually be thought of as a single function that transforms inputs into outputs. Are you starting to see how easy it can be to expose some powerful programming functions in a visual way?
We'll explain the context object in more detail in the next section, but in short, the context object is how you can pass live data into your engine at runtime. In this case we're using it to get the current user.
In this section we setup a new
RootEngine, and gave it instructions for resolving our ports and nodes. In the next section we'll show how to hook up the root engine to React.