Taming Complex Interactions and Logic in Mid‑Backend Front‑End Development

Background of Mid‑Backend Front‑End Development Complexity

Developing mid‑backend front‑ends often encounters complex interactions and intricate logic, such as numerous business rules that are handled with sprawling if‑else statements, leading to unreadable, unmaintainable black‑box code.

In practice, business scenarios are numerous, iterations are frequent, and rapid changes make it hard for a single person to grasp all rules, especially when multiple stakeholders manage them. Industry‑specific legacy complexities further exacerbate the pain.

Beyond logic, usability of interactions is also a concern; without clear guidance, the system becomes difficult to use, and adding extensive user‑help interactions can increase development difficulty and accelerate decay.

Solution for Complex Interactions

1. Idea

Use dynamic annotations to generate interactive interfaces, turning cumbersome interaction code into concise low‑code configurations.

Typical back‑office pages contain lists and details with many guides; the repetitive interaction coding is replaced by low‑code components.

We separate the UI into business‑critical interactions (implemented with ProCode) and auxiliary content interactions (handled via low‑code).

The core goal is to keep business functionality in ProCode while delegating auxiliary interactions to low‑code configuration.

2. Practice

Identify auxiliary interactions that can be abstracted as reusable components.

Render these components on the page through dynamic annotations, capturing user actions such as clicks, hover, element creation/destruction, or URL changes.

When a matching behavior is detected, locate the insertion point and render the component according to predefined rules.

Components can interact via custom URL protocols to trigger actions like asking a bot, submitting tickets, showing messages, opening dialogs, or copying content.

3. Related Issues

When the DOM changes, the system re‑detects changes and re‑executes rendering to avoid component loss.

Non‑technical users may find CSS selectors or XPath difficult; to mitigate this, visual similarity matching with fuzzy criteria is used, allowing users to select visual features and automatically generate matching scripts.

Solution for Complex Logic

The next challenge is complex logic, addressed by strategy orchestration that generates logical code from configurations, reducing the need for ProCode in intricate scenarios.

Example: a high‑complexity form with three scenarios, 33 states, and 82 rules was originally built with ProCode; after five days of errors, strategy orchestration solved it in two days.

1. Idea

Complex logic creates high verification cost, development cost, black‑box risk, and rework. The solution focuses on three aspects: unpredictable multi‑state management, numerous conditions and linkages, and code decay due to technology changes.

These issues are reframed as state‑management problems under complex conditions and linkages.

2. Decision Orchestration

Decision tables transform nested if‑else structures into clearer representations, though they alone cannot express linkages.

By converting decision tables into decision trees that include linkage nodes, both conditions and interactions are orchestrated.

Example: a loan interest calculator is modeled with objects (loan type, repayment method, rate, term, cumulative interest) whose states are managed by three decision trees; changes in one object propagate to others, and a final tree computes the result.

3. Practice

Define strategy orchestration objects (e.g., form fields with states like visibility, read‑only, value) sourced from backend definitions.

Use decision‑tree orchestration to map all object state relationships and linkages, turning logic into decision trees.

Generate mock forms from metadata for real‑time validation, convert rules into test‑case mind maps, and produce detailed annotated code that can be stored in Git, compiled, or published as npm/CDN packages.

Conclusion

The two solutions—one for complex interactions and one for complex logic—are currently handled by separate platforms, making unified business support difficult. Future work aims to combine both approaches into a single, cohesive solution.