DSX System

Last Updated: May 19, 2025

This document provides an overview of the Dynamic Schema eXecution (DSX) system in the Typus Development Framework.

Introduction

The DSX system is a powerful feature of the Typus Framework that enables declarative, configuration-driven UI development. It allows developers to define user interfaces using TypeScript configuration rather than writing code, dramatically reducing development time while maintaining flexibility.

Core Concept

The fundamental concept behind DSX is simple yet powerful:

Define what you want, not how to build it.

Instead of writing code to create UI components, developers describe the desired outcome in a structured configuration format. The DSX system interprets this configuration and dynamically renders the appropriate components.

Key Features

Configuration-Driven UI

DSX allows entire pages and complex interfaces to be defined using TypeScript configuration:

Block-Based Architecture

The DSX system uses a block-based approach to UI construction:

• Pages are composed of multiple blocks
• Blocks are self-contained UI elements with specific functionality
• Layouts define how blocks are arranged on the page
• Context provides data and state management for blocks

Context System

Each block can operate with different types of context:

• Page Context: Shared across all blocks on a page
• Isolated Context: Specific to an individual block
• Parent-Child Context: Hierarchical context inheritance

DSL Integration

DSX seamlessly integrates with the DSL (Domain-Specific Language) system:

• Blocks can directly work with DSL models
• Data operations can be defined declaratively in the configuration
• Changes in data automatically reflect in the UI

How It Works

Configuration Structure

A typical DSX configuration includes:

1. Page Definition: Overall page structure and metadata
2. Layout Configuration: How the page is organized
3. Block Definitions: Individual UI components to render
4. Data Bindings: Connections to data sources
5. Event Handlers: Responses to user interactions

Rendering Process

The DSX rendering process follows these steps:

1. Parse Configuration: The DSX engine reads the TypeScript configuration
2. Resolve Dependencies: Required components and data are identified
3. Create Context: Context objects are initialized
4. Instantiate Blocks: Block components are created based on configuration
5. Bind Data: Data sources are connected to blocks
6. Render UI: The complete interface is rendered to the DOM
7. Handle Events: Event listeners are attached for interactivity

Dynamic Updates

When data or configuration changes:

1. The DSX engine detects changes
2. Only affected blocks are re-rendered
3. Context is preserved where appropriate
4. The UI updates seamlessly

Benefits

For Developers

• Rapid Development: Create complex UIs with minimal code
• Consistency: Standardized components and patterns
• Maintainability: Separation of UI structure from business logic
• Reusability: Blocks can be reused across different pages

For Business

• Faster Time-to-Market: Accelerated development cycles
• Flexibility: Easily adapt to changing requirements
• Reduced Technical Debt: Standardized approach reduces complexity
• Future-Proofing: UI can evolve independently of business logic

Use Cases

DSX is particularly well-suited for:

• Admin Interfaces: CRUD operations and data management
• Content Management: Editing and publishing workflows
• Dashboards: Data visualization and reporting
• Form-Heavy Applications: Complex data entry and validation

Example: Page Construction

A simplified example of how a page is constructed using DSX:

Declarative vs. Imperative

Traditional UI development is often imperative, focusing on how to build interfaces:

// Imperative approach (simplified)
const table = document.createElement('table');
data.forEach(item => {
  const row = document.createElement('tr');
  // Add cells, event handlers, etc.
  table.appendChild(row);
});

DSX takes a declarative approach, focusing on what should be displayed:

// Declarative approach (simplified DSX page configuration)
const pageConfig = {
  title: 'Blog Posts',
  layout: 'private',
  type: 'grid' as const,
  columns: 12,
  gap: 16,
  contextConfig: {
    model: BlogPostModel, // DSL model binding
    mode: FormMode.LIST,
  },
  blocks: [
    {
      colSpan: 12,
      components: [
        {
          type: dxTable,
          props: {
            columns: ['title', 'author', 'publishDate'],
            actions: ['edit', 'delete'],
            pagination: true
          }
        }
      ]
    }
  ]
}

Conclusion

The DSX system represents a paradigm shift in frontend development, moving from code-centric to configuration-centric UI creation. By separating the what from the how, it enables developers to build sophisticated interfaces faster and with greater consistency.

The combination of block-based architecture, context management, and DSL integration creates a powerful platform for building modern web applications with minimal code and maximum flexibility.