Component Diagram

Last Updated: May 19, 2025

This document provides a visual representation of the Typus Development Framework's component architecture, showing how different parts of the system interact with each other.

System Architecture Layers

The Typus Development Framework is organized into several distinct architectural layers, each with specific responsibilities and components.

Key Architectural Layers

1. Frontend Layer: Client-side application built with Vue.js and TypeScript
2. Backend Layer: Server-side application built with Express.js and TypeScript
3. Shared DSL Layer: Domain Specific Language system that serves as a single source of truth
4. Dispatcher Layer: Task queue and worker system for asynchronous processing
5. Database Layer: Data storage and access layer using MySQL and Prisma ORM

Detailed Component Architecture

Each architectural layer consists of multiple components that work together to provide the layer's functionality.

Frontend Layer Components

Key Frontend Components

• Routing System: Handles client-side navigation and route matching
• State Management: Manages application state using Pinia stores
• DSX System: Dynamic page rendering system that creates UI from JSON configurations
• UI Components: Reusable Vue components for building interfaces
• Module System: Organizes frontend code into logical modules

Backend Layer Components

Key Backend Components

• Core Module System: Provides base classes and infrastructure for modules
• Dynamic Router: Handles dynamic routing based on content and configuration
• API Controllers: Process incoming HTTP requests and return responses
• Services: Implement business logic and data operations
• Middleware Pipeline: Chain of middleware for request processing
• Security Components: Authentication, authorization, and other security features

Shared DSL Layer Components

Key DSL Components

• Model Definitions: Define entities, fields, and relationships
• DSL Registry: Central registry for all model definitions
• Code Generators: Generate code artifacts from model definitions
• Type System: Provides type definitions and validation

Dispatcher Layer Components

Key Dispatcher Components

• Task Queue: Redis-based queue for storing and distributing tasks
• Workers: Process tasks from the queue asynchronously
• Cron Jobs: Schedule and execute recurring tasks
• WebSocket Handlers: Manage real-time communication

Component Interactions

Request Processing Flow

The following diagram illustrates how a typical request flows through the system components:

Dynamic Routing and CMS Integration

The following diagram shows how the Dynamic Router integrates with the CMS system:

DSX Component Lifecycle

The following diagram illustrates the lifecycle of a DSX component:

Integration Components

The framework includes several integration components that connect with external systems:

Component Responsibilities

Frontend Layer

• Routing System: Client-side navigation, route matching, and parameter handling
• State Management: Application state, reactivity, and data persistence
• DSX System: Dynamic UI rendering from JSON configurations
• UI Components: Reusable interface elements with consistent styling
• Module System: Organization of frontend code into logical modules

Backend Layer

• Core Module System: Base infrastructure for creating and managing modules
• Dynamic Router: Content-based routing and URL resolution
• API Controllers: HTTP request handling and response formatting
• Services: Business logic implementation and data operations
• Middleware Pipeline: Request processing pipeline with authentication, validation, etc.
• Security Components: Authentication, authorization, and security features

Shared DSL Layer

• Model Definitions: Entity, field, and relationship definitions
• DSL Registry: Central access point for model definitions
• Code Generators: Automatic generation of TypeScript interfaces, Prisma schema, etc.
• Type System: Type definitions and validation rules

Dispatcher Layer

• Task Queue: Storage and distribution of asynchronous tasks
• Workers: Processing of tasks from the queue
• Cron Jobs: Scheduling and execution of recurring tasks
• WebSocket Handlers: Real-time communication management

Integration Components

• File Storage: File upload, storage, and retrieval
• Email Service: Email template rendering and sending
• External APIs: Integration with third-party services
• Notification Services: Multi-channel notification delivery

Conclusion

The component architecture of the Typus Development Framework is designed to be modular, extensible, and maintainable. Each component has a clear responsibility and interacts with other components through well-defined interfaces. This architecture allows for easy extension and customization while maintaining a consistent structure across the application.

The layered approach, with the Shared DSL Layer serving as a single source of truth, ensures consistency between the frontend and backend while reducing duplication and potential errors. The Dynamic Router and CMS integration provide a flexible system for content management and delivery, while the Dispatcher Layer enables efficient handling of asynchronous operations.