Designing Reusable Front‑End Components with YOHO’s Logic Orchestration Platform

Introduction

The previous article covered Logic, Runtime & DSL and introduced the three‑blade approach to orchestration: component, orchestrator, and runtime. This piece focuses on component design and the YOHO platform that powers visual logic orchestration.

Component Types

Components are divided into basic components (only start and end nodes to keep the UI simple) and business components , which are the actual logic fragments developers create, package, and publish. Business components are a specialized kind of basic component (a custom node) but are treated as a separate major category because of their significance.

Component Language and Attributes

Key attributes of a business component are defined in four JSON files placed in a standard directory structure:

.
|-- schema
|   |-- input.json
|   |-- output.json
|   `-- branch.json
|-- index.js
|-- package.json

index.js

: entry file; its source code is stored in the component’s code field when published. package.json: lists dependencies that are stored alongside the code field. input.json: JSON Schema describing the component’s input form, stored in the input field. output.json: JSON Schema describing the component’s return value, stored in the output field. branch.json: enumerates the possible branches and their human‑readable labels.

Branch‑handling code must follow a strict pattern. For a “login check” component with two branches (logged‑in and not logged‑in), the implementation looks like:

function foo() {
  if (isLogined) {
    return { branch: 0, data: { key: value } };
  } else {
    return { branch: 1, data: { key: value } };
  }
}

The corresponding branch.json is: ['已登录', '未登录'] The numeric branch value returned by the component is used as an index into the branch.json array, ensuring the runtime follows the correct execution path.

Overall Component Design

Tooling provides a template initializer and a scaffolding CLI, a VSCode extension for a better developer experience, and a component SDK generated from the component OpenAPI. Currently the SDK serves local development; a public component marketplace is planned for April. Form rendering is powered by form‑render, enabling visual configuration of component inputs.

The marketplace isolates components by application and tag, consolidating all business components for later integration into the Youku material center.

Component Lifecycle

After a component is published, it appears in the marketplace, can be dragged onto a canvas to create an instance, and participates in a full business workflow. The canvas uses branch.json to display branching logic, while input.json drives a visual form via form‑render. Once the instance is linked to a UI builder, the UI consumes the component’s output.json to render data. At runtime the flow is: start → DSL parsing → component loading & registration → component validation → component execution. During execution the runtime injects helpers and payloads, providing utility functions and configuration data.

Open Questions

Should a business component be placed before the end component in a workflow?

Can a component’s JSON Schema be modified after publication?

Front‑End Specific Logic Orchestration

Most of the company’s orchestration work is service‑side; front‑end orchestration is less common. To avoid altering existing build services, YOHO loads component JavaScript on demand during the dslWillInterpret lifecycle. Each component is tiny (a few kilobytes), and caching further reduces network traffic.

Dynamic loading also solves version‑collision problems when multiple orchestration instances use different versions of the same component, preventing uncontrolled bundle growth.

YOHO Platform Overview

YOHO is positioned as a platform that defines protocols and standards rather than a fully centralized solution. It offers a unified node service with an OpenAPI for external consumption, while front‑end adapters can be optionally used. The design embraces “unity in diversity” – teams can adopt only the parts they need.

Future Plans

YOHO aims to cover the first 75% of business modules with logic orchestration, leaving the remaining 25% (highly custom or gameplay‑heavy modules) to dedicated engineering teams. The goal is to extend Flow‑Based Programming (FBP) capabilities so developers can program, test, and debug flows online, improving speed and safety.

Conclusion

Value of Logic Orchestration

Visual development simplifies business logic production.

Decoupling UI from logic improves maintainability.

Reusable logic enables multiple behaviors from the same code.

Pure JavaScript execution provides cross‑platform compatibility and can reduce migration costs dramatically.

Online testing and automatic error correction increase code safety.

YOHO’s Value

Unified orchestration standards across large teams.

Convenient tools and libraries that accelerate business adoption.