Typus Development Framework: System Architecture Overview

Last Updated: May 11, 2025

Introduction

Typus Development Framework is a comprehensive platform for rapid web application development, providing a complete technology stack and built-in infrastructure. The framework follows a modular architecture with clear separation of concerns, enabling developers to quickly build scalable and maintainable web applications. Key architectural principles include single source of truth through the Domain Specific Language (DSL) system, type safety across the entire stack, and a modular approach that allows for easy extension and customization.

Architecture Diagrams

High-Level Architecture

Shared Layer

Client Browser

Frontend Layer
Vue.js + TypeScript

Backend Layer
Express.js + TypeScript

Database
MySQL

File Storage

Task Dispatcher
Redis Queue

DSL System
Domain Specific Language

Email Worker

Telegram Worker

Background Worker

Data Flow

Task DispatcherDatabaseDSL SystemBackend LayerFrontend LayerClient BrowserTask DispatcherDatabaseDSL SystemBackend LayerFrontend LayerClient Browseralt[Asynchronous Operation][Synchronous Operation]User InteractionAPI RequestAccess Model DefinitionsReturn Model StructureDatabase QueryQuery ResultsQueue TaskAcknowledgeImmediate ResponseProcess TaskNotification (optional)Operation ResultUI Update

DSL System Architecture

Model Definitions
TypeScript

DSL Registry

Code Generation

TypeScript Interfaces

Prisma Schema

API Endpoints

Backend DSL
Implementation

Frontend DSL
Client

API Controllers

Services

Typed DSL Client

Request Lifecycle

Error Handling

HTTP Request

Middleware Pipeline

Router

Controller

Service

Repository/DSL

Database

HTTP Response

Error Middleware

Task Dispatcher System

Backend Services

Redis Queue

Task Dispatcher

Email Worker

Telegram Worker

Background Worker

Cron Jobs

Email Provider

Telegram API

Custom Tasks

Scheduled Tasks

Task Status Storage

Key Architectural Features

Modularity and Extensibility

  • Module System: The framework is built around a modular architecture where each module encapsulates specific functionality.
  • Pluggable Components: New modules can be added without modifying the core system.
  • Clear Interfaces: Well-defined interfaces between components allow for easy replacement and extension.

Single Source of Truth (DSL)

  • Centralized Model Definitions: All data models are defined once in the DSL system.
  • Automatic Code Generation: TypeScript interfaces, Prisma schema, and API endpoints are generated from model definitions.
  • Consistency: Ensures consistency between frontend, backend, and database layers.

Type Safety

  • End-to-End Type Safety: TypeScript is used throughout the stack.
  • Generated Types: Automatically generated interfaces ensure type consistency.
  • Runtime Validation: Input validation based on model definitions.

Task Dispatcher

  • Asynchronous Processing: Handles long-running operations outside the request lifecycle.
  • Reliability: Redis-based queue ensures task persistence and reliability.
  • Scalability: Workers can be scaled independently based on workload.

Security Architecture

  • JWT Authentication: Secure token-based authentication with refresh tokens.
  • Role-Based Access Control: Fine-grained permission management.
  • Input Validation: Automatic validation based on model definitions.
  • Middleware Pipeline: Security checks at multiple levels.

Logging and Error Handling

  • Structured Logging: Consistent log format across all components.
  • Centralized Error Handling: Global error middleware captures and processes errors.
  • Error Classification: Errors are categorized for appropriate handling and reporting.

WARNING

Failed to fetch dynamically imported module: https://typus.dev/assets/RecursiveNavItem-Cep7andh.js

{ "stack": "AppError: Failed to fetch dynamically imported module: https://typus.dev/assets/RecursiveNavItem-Cep7andh.js\n at https://typus.dev/assets/index-DS79FI73.js:315:420\n at dn (https://typus.dev/assets/vue-vendor-Ct83yDeK.js:13:1385)\n at We (https://typus.dev/assets/vue-vendor-Ct83yDeK.js:13:1455)\n at Ws.t.__weh.t.__weh (https://typus.dev/assets/vue-vendor-Ct83yDeK.js:14:7364)\n at jt (https://typus.dev/assets/vue-vendor-Ct83yDeK.js:13:1866)\n at v (https://typus.dev/assets/vue-vendor-Ct83yDeK.js:14:4019)\n at https://typus.dev/assets/vue-vendor-Ct83yDeK.js:14:4097" }