How Flyde Bridges the Gap Between Code and Collaboration

flydelabs/flyde

Let's dive into Flyde, a fascinating open-source tool that's been gaining a lot of traction. As a software engineer, I'm always on the lookout for tools that make our lives easier and our teams more collaborative. Flyde seems to fit the bill perfectly.

Flyde is an open-source visual programming language specifically designed for backend logic. Think of it as a flowchart for your code. You can visually build complex logic by connecting different nodes, each representing a piece of functionality.

But here's the kicker
it doesn't replace your existing codebase. Instead, it integrates seamlessly with it. You can define your functions, APIs, or any other code you've already written as "nodes" in Flyde. This means you can build new logic visually using the code you've already created.

From an engineering perspective, this is incredibly useful for several reasons

Bridging the Gap
This is Flyde's biggest selling point. It allows non-technical team members like product managers and designers to understand and even contribute to backend logic. They can see the flow of data, suggest changes, and get a clearer picture of how the application works without needing to read a single line of code. This leads to fewer misunderstandings and faster development cycles.

Rapid Prototyping and Iteration
Need to quickly test a new business rule or API flow? You can build it in Flyde in minutes. No need to write boilerplate code or set up a new environment. This is perfect for A/B testing or trying out new features.

Visual Documentation
A Flyde flow is self-documenting. It's much easier to understand the a complex process by looking at a visual flow than by reading through a bunch of comments and code. This makes onboarding new team members much quicker.

Creating Reusable Components
You can encapsulate complex logic within a single Flyde node, which can then be reused in different parts of your application. This promotes modularity and makes your codebase cleaner.

Debugging
When an issue arises, you can visually trace the flow of data through your Flyde diagram to pinpoint exactly where things went wrong.

The beauty of Flyde is how easy it is to get started. You'll need to set it up in your project, and then you can start creating and using flows.

First, you'll need to install the Flyde package in your project. It's available on npm.

npm install flyde

You'll also want to install the VS Code extension for a great visual experience. Search for "Flyde" in the VS Code Extensions Marketplace.

A Flyde flow is simply a .flyde file. You can create one in your project, for example, my-flow.flyde. This file will contain the JSON representation of your visual flow.

This is where you integrate your existing code. You can define your own functions and expose them to Flyde as "nodes." Let's say you have a simple JavaScript file with a function to add two numbers.

math.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Now, you can tell Flyde about these functions. You'll need to create a "Flyde library" which is just a collection of your functions.

flyde.config.js

module.exports = {
  // We're creating a library named "My Math Library"
  // The 'nodes' property is where we define the nodes
  // We can either provide a path to a file or an array of objects
  nodes: [
    {
      path: './math.js',
      name: 'math',
      exportName: 'add'
    },
    {
      path: './math.js',
      name: 'math',
      exportName: 'subtract'
    }
  ],
};

Now, when you open the Flyde VS Code extension, you will see add and subtract nodes available to use in your visual flows!

Let's imagine we want to create a flow that takes a user's name, checks if it's a specific name, and then returns a personalized greeting.

First, we'll create the functions we need.

greeting.js

export const greet = (name) => `Hello, ${name}!`;

export const checkName = (name) => name === 'Alice';

Next, we'll expose these functions to Flyde.

flyde.config.js

module.exports = {
  nodes: [
    {
      path: './greeting.js',
      name: 'greeting',
      exportName: 'greet'
    },
    {
      path: './greeting.js',
      name: 'greeting',
      exportName: 'checkName'
    }
  ],
};

Now, using the VS Code extension, you can visually build this flow. It would look something like this

A Start node to receive the name input.

A checkName node, which takes the name as input.

A Conditional node, which uses the output of checkName to decide which path to take.

If the name is "Alice" (the "true" path), we could have a greet node that outputs Hello, Alice!.

If the name is not "Alice" (the "false" path), we could have another greet node with a different output, like Hello, stranger!.

Finally, an End node to return the final greeting.

You can run this flow from your code like this

import { createFlow, runFlow } from 'flyde';

// Load the flow from the file
const flow = await createFlow('./greeting-flow.flyde');

// Run the flow with some data
const result = await runFlow(flow, { name: 'Alice' });

console.log(result); // Expected output: { result: 'Hello, Alice!' }

const result2 = await runFlow(flow, { name: 'Bob' });

console.log(result2); // Expected output: { result: 'Hello, stranger!' }