Skip to content

Latest commit

 

History

History
177 lines (139 loc) · 6.18 KB

README.md

File metadata and controls

177 lines (139 loc) · 6.18 KB
Raw

QuickUI: Lightweight Frontend Framework

Note

(Formerly known as PDQuickUI, renamed to QuickUI starting from version 0.6.0)

QuickUI is a front-end rendering framework built with pure JavaScript. By integrating virtual DOM technology, it enhances rendering performance, achieving rapid data responsiveness and automatic updates.

tag size
npm download jsdeliver

Features

Efficient Virtual DOM

  • Precise diffing algorithm for efficient DOM updates
  • Smart attribute patching system that updates only changed values
  • Intelligent child node comparison for minimal DOM manipulation

Reactive Data Handling

  • Deep data monitoring system for immediate state tracking
  • Automatic UI updates on data changes, no manual operation needed
  • Smart caching system to prevent unnecessary re-renders
  • Support for nested data structures with reactive handling

Advanced Template Features

  • Built-in internationalization (i18n) support for easy localization
  • Dynamic template loading with asynchronous processing
  • Powerful expression system supporting calculations, dates, and text processing
  • Comprehensive directive system for flexible DOM manipulation

Performance Optimizations

  • Lazy loading for images and SVG content to improve load times
  • Minimal file size with zero external dependencies
  • Smart event delegation and resource cleanup for optimized memory usage

Documentation

Installation

Install via npm

npm i @pardnchiu/quickui

Include via CDN

Include the QuickUI library

<!-- Version 0.6.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>

<!-- Version 0.5.4 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>

Module version

// Version 0.6.0 and above
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";

// Version 0.5.4 and below
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";

How to use

Initialize QUI

const app = new QUI({
    id: "", // Specify rendering element
    data: {
        // Custom DATA
    },
    event: {
        // Custom EVENT
    },
    when: {
        before_render: function () {
            // Stop rendering
        },
        rendered: function () {
            // Rendered
        },
        before_update: function () {
            // Stop updating
        },
        updated: function () {
            // Updated
        },
        before_destroy: function () {
            // Stop destruction
        },
        destroyed: function () {
            // Destroyed
        }
    }
});

Overview

Text & Content

Attribute Use Case Example
{{value}} Dynamic text content <p>{{ userName }}</p> displays user's name
:html Raw HTML insertion <div :html="richContent"></div> renders formatted content

Template Loading

Attribute Use Case Example
:path External template loading <temp :path="./templates/header.html"></temp> loads header component

List & Iteration

Attribute Use Case Example
:for Array/Object iteration <li :for="item in items">{{ item.name }}</li> renders list items

Conditional Rendering

Attribute Use Case Example
:if Conditional display <div :if="isLoggedIn">Welcome!</div>
:else-if/:elif Secondary conditions <div :elif="isPending">Loading...</div>
:else Fallback content <div :else>Please log in</div>

Form Binding

Attribute Use Case Example
:model Two-way data binding <input :model="userInput"> syncs with data

Styling & Animation

Attribute Use Case Example
:animation Transition effects <div :animation="fade-in">Content</div>
:[css] Dynamic styling <div :background-color="bgColor">Styled content</div>

Dynamic Attributes

Attribute Use Case Example
:[attr] Dynamic attributes <img :src="imageUrl" :alt="imageDesc">

Event Handling

Attribute Use Case Example
@[event] Event listeners <button @click="handleClick">Click me</button>

License

Similar to MIT License but provides obfuscated code only:

  • Same as MIT: Free to use, modify and redistribute, including commercial use
  • Main difference: Provides obfuscated code by default, source code available for purchase
  • License terms: Must retain original copyright notice (same as MIT)

For detailed terms and conditions, please see the Software Usage Agreement.

Creator

邱敬幃 Pardn Chiu

©️ 2024 邱敬幃 Pardn Chiu