Architecture Overview:
The Tfkity Compiler Stack

Technical documentation regarding the implementation of the Object Engine, the Bi-Directional AST (Abstract Syntax Tree), and the compilation pipeline from TFY to TFaada.

Visual Context (Canvas)
Serialized Output (AST)
$login_button
{
  "id": "8x92_root",
  "type": "Container",
  "children": [
    {
      "id": "btn_01",
      "ref_name": "$login_button",
      "properties": {
         "width": "100%",
         "bg_color": "#bad872",
         "on_click": "fn_auth_init"
      },
      "constraints": {
         "top": "24px",
         "align": "center"
      }
    }
  ]
}

1. The Bi-Directional Object Model

Tfkity is fundamentally an Object Engine. Unlike standard WYSIWYG editors that output static HTML strings, Tfkity maintains a live memory heap of instantiated objects. When a user creates an element on the canvas (e.g., a Button), the engine registers a unique class instance with a defined set of mutable properties.

This architecture allows for "Bi-Directional Editing." Changes in the Visual Canvas update the JSON AST immediately. Conversely, code-based mutations target the AST, forcing a re-render of the Canvas. This ensures that the "Code View" and "Design View" never fall out of sync.

2. The $ Syntax (Object Referencing)

To facilitate runtime logic injection, Tfkity exposes specific objects globally via the $ prefix. This bypasses the need for DOM selectors.

// Direct property mutation (Updates Canvas + Production Build)
$button.width = "100%";
$button.style.backgroundColor = "#ff0000";

// Logic Binding
if (user.is_logged_in) {
    $button.text = "Dashboard";
    $button.on("click", () => router.push('/home'));
} else {
    $button.text = "Sign In";
}

3. The Compilation Pipeline

The core of the Tfkity architecture is the proprietary compiler chain. It consists of three distinct stages that transform high-level JSON into machine-optimized code.

01.

TFY (State Synchronizer)

TFY is the real-time observer. It watches the Canvas for layout changes (Drag & Drop events) and updates the in-memory JSON AST. It provides the "hot-reload" capability, ensuring that visual changes are reflected in the code editor within <16ms frame time.

02.

TFi (The Logic Compiler)

TFi accepts the JSON AST from TFY and the user-written JavaScript logic. It performs static analysis to link references (e.g., verifying that `$button` exists in the AST). It outputs .tfa files—an optimized intermediate bytecode representation.

03.

TFaada (The Framework)

TFaada is the in-house JavaScript framework that consumes .tfa bytecode. It acts as the build orchestrator. Depending on the target flag, TFaada compiles the project to device especific

04.

TfApp (Device Runtime)

TfApp is runtime container. TfApp renders the compiled native views. It provides the JS bridge allowing Tfkity code to access hardware APIs (Gyroscope, GPS, Camera, etc.) directly.

2025 Tfkity Co.