Frontend Structure Overview

Last Updated: May 19, 2025

This document provides a high-level overview of the frontend architecture in the Typus Development Framework.

Introduction

The Typus frontend is built with Vue 3 and follows a modular, component-based architecture designed for scalability and maintainability. The architecture emphasizes separation of concerns, reusability, and developer experience.

Directory Structure

The frontend codebase is organized into several key directories, each with a specific purpose:

frontend/src/
├── assets/       # Static assets (images, fonts, etc.)
├── components/   # Reusable UI components
├── config/       # Application configuration
├── core/         # Core framework functionality
├── dsl/          # Domain-Specific Language client
├── dsx/          # Dynamic Schema eXecution system
├── layouts/      # Page layouts
├── modules/      # Feature modules
├── pages/        # Page components
├── shared/       # Shared utilities and composables
└── types/        # TypeScript type definitions

Key Architectural Components

Core Framework

The core/ directory contains the foundational elements of the framework:

• Router: Handles application routing and navigation
• Store: Manages global state using Pinia
• Events: Event bus for cross-component communication
• Plugins: Plugin system for extending application functionality
• Middleware: Request interceptors and processing pipeline
• Layouts: Dynamic layout system
• Theme: Theming and styling system
• Errors: Error handling and reporting

Component System

Components are organized into several categories:

• Base Components: Foundational UI elements
• UI Components: Higher-level UI components built on base components
• Layout Components: Components for page structure
• System Components: Internal framework components
• DSX Components: Dynamic components rendered from configuration

Module System

The application is divided into feature modules, each representing a distinct functional area:

• Each module is self-contained with its own components, routes, and state
• Modules can be enabled/disabled without affecting the rest of the application
• Inter-module communication happens through the event system or store

DSX System

The Dynamic Schema eXecution (DSX) system allows for configuration-driven UI:

• Pages and components can be defined using JSON schemas
• DSX renders UI components based on these schemas
• Enables rapid development of admin interfaces and forms
• Supports dynamic behavior through expressions and conditions

DSL Client

The Domain-Specific Language client provides a type-safe API for data operations:

• Mirrors the backend DSL API for consistent data access
• Provides model-specific clients for type safety
• Handles data fetching, caching, and state management

Application Lifecycle

1. Initialization: The application bootstraps in main.ts
2. Plugin Registration: Core plugins are registered
3. Layout System: The layout system initializes
4. Routing: The router prepares routes from modules
5. Mounting: The Vue application mounts to the DOM
6. Rendering: The appropriate layout and page components render

Data Flow

Theming System

The framework includes a comprehensive theming system:

• Theme configuration defines colors, typography, and spacing
• Themes can be switched at runtime
• Components automatically adapt to the current theme
• Tailwind CSS integration for utility-based styling

Conclusion

The Typus frontend architecture provides a robust foundation for building complex web applications. By combining modular design, component-based architecture, and configuration-driven UI, it enables rapid development while maintaining code quality and developer experience.

The architecture is designed to scale from simple applications to complex enterprise systems, with each layer providing clear separation of concerns and well-defined interfaces.