How do low code / no code systems work?

on

For many years, building software applications was the job of very skilled professionals who called themselves software engineers or developers. Others were just mere consumers or users of such software. Building software applications looked like magic to a layperson. However, the last decade (2010s) has witnessed innovative products that allow a user who is not necessarily an expert to create a complete software system from scratch with no software development skills required.

When I noticed such a product for the first time, I was intrigued: "How can something like this be built?" I wondered. I spent years running in the opposite direction — until 2021, when I was brought in to build one from scratch. We started building an LC/NC (low-code/no-code) platform for the health insurance domain with a team of developers. The platform had various modules such as:

  • A WYSIWYG (What You See Is What You Get) screen designer,
  • An API manager,
  • A workflow automation tool (similar to Zapier or n8n).

None of us had prior experience in developing a LC/NC platform. We had, however, a clear idea of the end product. It proved to be a thrilling and challenging project. In little more than three months, the small team of ours built the platform. This is a considerable achievement, especially considering the complexity of features and the timeline. This gave me great insights into how such systems work.

How LC/NC Systems Work?

LC/NC systems generally have a very straightforward architecture; most of them are in fact parsers of some kind. Every time a user interacts with an LC/NC platform, they are actually creating a textual representation of the GUI or workflows they are building. For example, on a screen designer where a user is dragging and dropping UI elements onto a canvas, the system is writing a JSON or XML file that represents this information in a structured way.

Here’s an example JSON generated for a simple form created using an LC/NC screen designer:

{
  "screen": {
    "id": "screen1",
    "name": "Contact Form",
    "elements": [
      {
        "type": "input",
        "id": "input1",
        "label": "Name",
        "placeholder": "Enter your name",
        "required": true
      },
      {
        "type": "input",
        "id": "input2",
        "label": "Email",
        "placeholder": "Enter your email",
        "required": true,
        "validation": {
          "type": "email"
        }
      },
      {
        "type": "button",
        "id": "button1",
        "label": "Submit",
        "action": "submitForm"
      }
    ]
  }
}

In this case, each user interaction—to add a text field, set a label, or define a button action—translates to corresponding JSON entries. The platform renders the screen or executes functionality with that JSON, so to the user, it's building software with ease.

Building a Workflow Tool

LC/NC workflow automation tools work similarly in which a user can design the workflows by dragging nodes on the canvas, where these nodes represent tasks, which get connected to one another and define the sequence of operations. Each node will execute some specific function such as arithmetic operation, API call, or downloading a file from the URL.

Here’s an example JSON representation of a workflow:

{
  "workflow": {
    "id": "workflow1",
    "name": "Data Processing Workflow",
    "nodes": [
      {
        "id": "node1",
        "type": "startNode",
        "name": "Get Input",
        "parameters": {
          "inputType": "text",
          "defaultValue": "Sample Data"
        }
      },
      {
        "id": "node2",
        "type": "apiCall",
        "name": "Perform an API call",
        "parameters": {
          "url": "https://example.com/api",
          "method": "POST",
          "body": {
            "result": "{{node2.result}}"
          }
        }
      },
      {
        "id": "node3",
        "type": "decisionNode",
        "name": "Send to API",
        "parameters": {
          "operation": "add",
          "operand1": 10,
          "operand2": 20
        }
      }
      // ...
    ],
    "connections": [
      {
        "from": "node1",
        "to": "node2"
      },
      {
        "from": "node2",
        "to": "node3"
      }
      // ...
    ]
  }
}

Below is a screenshot of a LC/NC platform workflow designer tool as visible to the LC/NC user:

Screenshot of an LC/NC platform workflow designer tool

Technical Details for Building LC/NC Systems

  1. Frontend Implementation
  2. Backend Architecture
    • Use a framework like Node.js (Express), Django, or Spring Boot to handle the parsing and execution logic.
    • Store the JSON or XML configurations in a database (e.g., MongoDB for JSON documents or a relational database like PostgreSQL).
  3. Execution Engine
    • Develop a parser to process the JSON or XML metadata.
    • Use an interpreter pattern to execute nodes sequentially.
    • Implement an event-driven architecture to handle node execution, where each node emits an event after completing its task.
    • For workflow execution, a library like Celery can be used for its implementation.
  4. Error Handling and Debugging
    • Add detailed logs for each node’s execution to simplify debugging.
    • Implement a visual debugger allowing users to track the execution flow in real time.
  5. Scalability
    • Use message queues (e.g., RabbitMQ or Kafka) for asynchronous processing of large workflows. (This goes hand-in-hand with Celery for workflow execution).
    • Containerize the application using Docker and deploy it on Kubernetes for scalability.

This method does not only democratize software development but also enables the creation of tailored solutions by users with little technical knowledge. LC/NC platforms can fill the gap between developers and end-users and unlock innovation potential across industries with a well-architected system.

Enough for the day, it's 12:30 am here right now and I'm off to sleep. See you guys on another post...👋

Location: India