How iMove Turns Front‑End Logic into Visual Flowcharts and Ready‑to‑Run Code

iMove is an open‑source front‑end low‑code platform that tackles three common pain points in front‑end development: constantly changing UI, complex business logic often mixed with back‑end processing, and fragmented interfaces caused by historical architecture.

Key Features

Logic Reusability : Interfaces and UI can be assembled at the smallest granularity, enabling reuse of logic components.

Workflow Visualization : Reusable units are arranged as flowcharts, simplifying operations for product managers.

Operational Configuration Convergence : Multiple systems are unified, reducing operational costs.

Gameplay Capability Consolidation : Product features are distilled into reusable capabilities.

Developers can use iMove by simply double‑clicking a node, writing a function, exporting the code, and dropping it into a project.

What Is iMove?

It is a non‑intrusive tool.

Double‑click to write a function; the arranged workflow can be exported as executable code.

Testing is easy – right‑click to run the node directly.

It enables low‑code development where feature implementation resembles operational configuration.

Example Scenario

For a "Purchase Button" on a detail page, the required logic includes fetching product info, checking coupon eligibility, and displaying different button states based on the user’s status. The following pseudo‑code illustrates the flow:

// Check login
const checkLogin = () => {
  return requestData('/is/login').then(res => {
    const { isLogin } = res || {};
    return isLogin;
  }).catch(() => false);
};

// Fetch detail data
const fetchDetailData = () => {
  return requestData('/get/detail/data').then(res => {
    const { hasApplied, needFollowShop, needAddVip } = res;
    if (hasApplied) {
      setStatus('hasApplied');
    } else {
      if (needFollowShop) {
        setStatus('needFollowShop');
      } else if (needAddVip) {
        setStatus('needAddVip');
      } else {
        setStatus('exception');
      }
    }
  }).catch(() => setStatus('exception'));
};

checkLogin().then(isLogin => {
  if (isLogin) {
    return fetchDetailData();
  } else {
    goLogin();
  }
});

The example shows that even modest business logic can become hard to maintain when the code is tangled with UI and back‑end concerns. iMove solves this by expressing the same logic as a flowchart, making the process clear at a glance.

Advantages of iMove

Logic Reusability : Each reusable code fragment is encapsulated as a node; developers can import nodes or sub‑flows across projects, with parameter configuration for fine‑grained reuse.

Function‑Oriented Design : Every node exports a plain JavaScript function, so developers can import it like any npm module without worrying about global variable conflicts.

Workflow Visualization : The flowchart serves as natural documentation – "visual flow equals code comments".

Logic/UI Decoupling : UI changes do not affect stable business logic; multiple UI versions can share a single logic layer.

Simple Testing : Nodes can be executed directly in the browser, generating test cases without any test framework.

Language/Scenario Agnostic : Although built with JavaScript, iMove can compile flows to JavaScript, Java, or any language supported by the target runtime.

Application Scenarios

Front‑end flows such as click events or component lifecycle callbacks.

Back‑end flows using Node.js, Serverless, etc.

Full‑stack flows that combine front‑end interactions with back‑end APIs.

iMove Principles

The core of iMove is built on AntV X6, which provides a visual canvas for nodes and edges. A flow consists of:

Node : Executes a function and produces output.

Port : Input ports receive data; output ports emit data.

Link : Connects an output port of one node to the input port of another, forming a directed acyclic graph (DAG).

During execution, iMove extracts the DSL (JSON) exported by X6, generates individual JavaScript files for each node, and then runs the nodes in topological order based on the DAG.

Compilation

iMove supports two compilation modes:

Online Compilation : Generates a ZIP package in the browser using jszip and offers it for download.

Local Compilation : Uses a watch command to monitor flow‑chart saves and automatically rebuilds code in the local project, communicating via WebSocket (e.g., socket.io) or a simple HTTP server built with Koa/Express.

Running Node Code

iMove can execute node functions directly in the browser. Right‑clicking a node opens a panel where parameters can be entered and the function run instantly, providing a WYSIWYG development experience. The implementation relies on http‑import to load ESM or CJS modules on the fly.

Automatic npm Dependency Parsing

Each node may import npm packages. iMove parses the import statements with a regular expression, queries the npm registry (e.g., via npm view) to obtain the latest version and download URL, and automatically resolves the dependencies for the generated project.

Conclusion

While design‑to‑code tools like imgcook handle UI changes, iMove addresses the logical layer, offering a visual, low‑code approach that improves readability, maintainability, and development speed. Its open‑source nature invites developers to contribute and extend the platform.

Overall, iMove demonstrates how a visual, low‑code approach can streamline front‑end development, improve maintainability, and enable rapid iteration across UI and logic layers.