Note

This README was generated by SKILL, get the ZH version from here.

QuickUI

A lightweight frontend framework built on pure JavaScript and native APIs, delivering efficient rendering and reactive data binding through virtual DOM.

Table of Contents

• Features
• Architecture
• File Structure
• License
• Author
• Stars

Features

npm i @pardnchiu/quickui · Documentation

Zero-Dependency Virtual DOM Engine

Built entirely on pure JavaScript and native browser APIs without any third-party libraries. A self-implemented virtual DOM diff/patch algorithm minimizes DOM operations for view updates, delivering high rendering performance while maintaining an extremely small bundle size.

Declarative Template Syntax

Use intuitive syntax such as {{value}}, :for, :if/:else-if/:else directly in HTML templates for data binding, loop rendering, and conditional rendering. Developers can implement dynamic view logic with minimal code, without learning additional build tools or template engines.

Reactive Data with i18n Support

Automatically detects data changes and triggers minimal-scope view updates, eliminating tedious manual DOM manipulation. Built-in i18n support enables multi-language switching through JSON locale files and i18n.key syntax, removing the need for additional translation frameworks.

Architecture

graph TB
    A[HTML Template] -->|Parse| B[vDOM Construction]
    B --> C[Template Rendering]
    C -->|:for| D[Loop Expansion]
    C -->|:if| E[Conditional Filtering]
    C -->|:path| F[External Loading]
    D --> G["Diff / Patch"]
    E --> G
    F --> G
    G -->|Minimal Operations| H[Actual DOM]
    I[Reactive Data] -->|Change Detection| G
    J[i18n JSON] -->|Language Switch| C

Loading

File Structure

QuickUI/
├── dist/
│   ├── QuickUI.js            # Minified build
│   ├── QuickUI.esm.js        # ESM build
│   └── QuickUI.css           # Stylesheet
├── src/
│   ├── function/             # Utility functions
│   ├── listener/             # Observers (Lazyload, SVG)
│   ├── model/                # Core classes (QUI, vDOM, Lifecycle)
│   └── interface.ts          # Type definitions
├── static/                   # Demo site assets
├── page/                     # Demo pages
├── package.json
└── README.md

License

This project is licensed under the Software Usage Agreement.

Author

邱敬幃 Pardn Chiu

Stars

---

©️ 2024 邱敬幃 Pardn Chiu