Transforming Low‑Code to No‑Code: Visual Logic Orchestration on iceluna

Background

In recent years low‑code and no‑code have become hot topics in the front‑end community. Low‑code means developing applications with a small amount of code, while no‑code enables building applications through configuration without writing code. The company already has several low‑code platforms (iceluna, Yida, Lego, YunFengDie), but a generic no‑code platform is still under exploration.

Low‑code and No‑code

Both target specific scenarios such as activity pages, back‑office forms, and tables, where front‑end interactions are relatively convergent and can be assembled by dragging visual components. Our team is researching a front‑end solution for the marketing domain of back‑office systems. The core goal is efficiency: improving developer productivity and user experience by lowering the front‑end development threshold, addressing 80 % of common requirements through a ProCode → LowCode → NoCode pathway.

Pain Points of iceluna

iceluna, a leading internal low‑code platform, enables visual UI building but still requires manual coding for business logic, which raises the learning curve for non‑front‑end developers. A user survey showed that logic code and data binding are the most cited difficulties.

To reduce this barrier we aim to replace the final coding step with visual logic orchestration, achieving a no‑code development mode.

Visual Logic Orchestration

A demonstration shows how a piece of code can be expressed as a flowchart, making the logic intuitive, highly readable, and maintainable, effectively serving as natural product documentation.

Logic Node Abstraction

Creating a logic graph requires composing and linking abstracted logic nodes. Reusability and appropriate granularity of nodes are crucial: overly large nodes become business‑process orchestration, while overly small nodes revert to raw code.

Analysis of marketing back‑office code reveals that 90 % of business logic revolves around forms, dialogs, requests, messages, data handling, routing, and conditional checks. iceluna already provides many useful APIs that simplify node abstraction.

We distilled roughly ten reusable logic nodes, each mapping to a function that receives input and returns output.

Orchestration Protocol

To avoid reinventing the wheel we adopt the LF common visual logic orchestration protocol for iceluna.

Technical Challenges

Automatic Layout

Most existing orchestration tools rely on manual drag‑and‑drop. By converting async callbacks to synchronous flow, most logic becomes a linear sequence with occasional branches, allowing us to replace dragging connections with node addition and automatic linking. An auto‑layout algorithm based on DFS ensures branches are spaced to avoid overlap.

Code‑Schema Conversion

After visual composition we need the logic to run identically to source code. Two approaches were considered: an event‑stream executor (intrusive) and a bidirectional conversion between schema and code. We chose the latter, using Babel to parse code into an AST, locate statements, match them to logic nodes via regex, and generate schema; the reverse process produces readable code from schema.

Generated code retains the visual orchestration characteristics while improving readability and easing code review.

Debugging

To support non‑technical users we instrument each node with telemetry, allowing simulated execution to display node state, context parameters, and error types. Visual cues (green for success, red for failure) help quickly locate issues.

Summary and Outlook

Summary

Visual logic orchestration has been integrated into iceluna and is now in production for marketing tools. The transition from low‑code to no‑code is still exploratory, but represents a significant step forward.

Outlook

While NoCode currently fits vertical scenarios and may deliver a ~70 % MVP, enabling non‑technical users to quickly build usable products can drive commercial innovation. We anticipate a future development cycle of NoCode → LowCode → ProCode, with seamless hand‑off between stages.