DEV Community

Cover image for QuickUI: Lightweight Frontend Framework
邱敬幃 Pardn Chiu
邱敬幃 Pardn Chiu

Posted on • Edited on

QuickUI: Lightweight Frontend Framework

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.

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

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

邱敬幃


©️ 2024 邱敬幃 Pardn Chiu

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay