邱敬幃

Posted on Dec 20

QuickUI: Lightweight Frontend Framework

#javascript #frontend

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

QuickUI is a front-end rendering framework derived from PDRenderKit, focusing on enhancing front-end framework features.

By integrating a virtual DOM, it rewrites the rendering logic to improve rendering efficiency, enabling faster data observation and automatic updates.

This project removes the prototype extensions from PDRenderKit to ensure compatibility and performance, making it suitable for complex applications.

It provides both module and non-module versions and changes the license from GPL-3.0 in PDRenderKit to MIT.

Features

Clear Architecture: Separates UI from data logic, making it easier to maintain.
Code Simplicity: Reduces redundant code and enhances readability.
Automatic Rendering: Monitors data changes and updates automatically, minimizing manual operations.
Lightweight: Maintains full functionality within a file size of less than 20kb.

Installation

Install from npm
```
npm i @pardnchiu/quickui
```

Include from CDN

Directly include QuickUI

<!-- 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";

Usage

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

Automatic Rendering: Automatically reloads when data changes are detected.

Attributes Overview

Attribute	Description
`{{value}}`	Inserts text into HTML tags and automatically updates with data changes.
`:path`	Used with the `temp` tag to load HTML fragments from external files into the current page.
`:html`	Replaces the element's `innerHTML` with text.
`:for`	Supports formats like `item in items`, `(item, index) in items`, `(key, value) in object`. Iterates over data collections to generate corresponding HTML elements.
`:if` `:else-if` `:elif` `:else`	Displays or hides elements based on specified conditions, enabling branching logic.
`:model`	Binds data to form elements (e.g., `input`), updating data automatically when input changes.
`:hide`	Hides elements based on specific conditions.
`:animation`	Specifies transition effects for elements, such as `fade-in` or `expand`, to enhance user experience.
`:mask`	Controls block loading animations, supporting `true\
`:[attr]`	Sets element attributes, such as `ID`, `class`, image source, etc. Examples: `:id`/`:class`/`:src`/`:alt`/`:href`...
`:[css]`	Sets element CSS, such as margin, padding, etc. Examples: `:background-color`, `:opacity`, `:margin`, `:top`, `:position`...
`@[event]`	Adds event listeners that trigger specified actions upon activation. Examples: `@click`/`@input`/`@mousedown`...

Text Replacement

`{{value}}`

index.html

<h1>{{ title }}</h1>

    const app = new QUI({
        id: "app",
        data: {
            title: "test"
        }
    });

Result
```
    <h1>test</h1>
```

`:html`

index.html


    const app = new QUI({
        id: "app",
        data: {
            html: "&lt;b&gt;innerHtml&lt;/b&gt;"
        }
    });

Result
```
        <b>innerHtml</b>
```

Insert Block

> [!NOTE]
> Ensure to disable local file restrictions in your browser or use a live server when testing.

`:path`

test.html
```
<h1>path heading</h1>
<p>path content</p>
```

index.html


    const app = new QUI({
        id: "app"
    });

Result


    <h1>path heading</h1>
    <p>path content</p>

Loop Rendering

`:for`

index.html


    <ul>
        <li>{{ item }} {{ CALC(index + 1) }}</li>
    </ul>

    const app = new QUI({
        id: "app",
        data: {
            ary: ["test1", "test2", "test3"]
        }
    });

Result


    <li id="test1">test1 1</li>
    <li id="test2">test2 2</li>
    <li id="test3">test3 3</li>

Nest loop

index.html


<ul>
    <li>
        {{ key }}: {{ val.name }}
        <ul>
            <li>
                {{ item.name }}
                <ul>
                    <li>
                        {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

    const app = new QUI({
        id: "app",
        data: {
            obj: {
                food: {
                    name: "Food",
                    ary: [
                        {
                            name: 'Snacks',
                            ary1: [
                                { name: 'Potato Chips', price: 10 },
                                { name: 'Chocolate', price: 8 }
                            ]
                        },
                        {
                            name: 'Beverages',
                            ary1: [
                                { name: 'Juice', price: 5 },
                                { name: 'Tea', price: 3 }
                            ]
                        }
                    ]
                },
                home: {
                    name: 'Home',
                    ary: [
                        {
                            name: 'Furniture',
                            ary1: [
                                { name: 'Sofa', price: 300 },
                                { name: 'Table', price: 150 }
                            ]
                        },
                        {
                            name: 'Decorations',
                            ary1: [
                                { name: 'Picture Frame', price: 20 },
                                { name: 'Vase', price: 15 }
                            ]
                        }
                    ]
                }
            }
        }
    });

Result


<ul>
    <li>food: Food
        <ul>
            <li>Snacks
                <ul>
                    <li>1. Potato Chips - $10</li>
                    <li>2. Chocolate - $8</li>
                </ul>
                </li>
            <li>Beverages
                <ul>
                    <li>1. Juice - $5</li>
                    <li>2. Tea - $3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>home: Home
        <ul>
            <li>Furniture
                <ul>
                    <li>1. Sofa - $300</li>
                    <li>2. Table - $150</li>
                </ul>
            </li>
            <li>Decorations
                <ul>
                    <li>1. Picture Frame - $20</li>
                    <li>2. Vase - $15</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Conditional Rendering

index.html


    <h1>{{ title }} {{ heading }}</h1>
    <h2>{{ title }} {{ heading }}</h2>
    <h3>{{ title }} {{ heading }}</h3>
    <h4>{{ title }} {{ heading }}</h4>

    const app = new QUI({
        id: "app",
        data: {
            heading: [Number|null],
            isH2: [Boolean|null],
            title: "test"
        }
    });

Result: heading = 1
```
    <h1>test 1</h1>
```
Result: heading = null && isH2 = true
```
    <h2>test </h2>
```
Result: heading = 3 && isH2 = null
```
    <h3>test 3</h3>
```
Result: heading = null && isH2 = null
```
    <h4>test </h4>
```

Template Rendering

index.html


    const test = new QUI({
        id: "app",
        data: {
            hint: "hint 123",
            title: "test 123"
        },
        render: () =&gt; {
            return `
                "{{ hint }}",
                h1 {
                    style: "background: red;", 
                    children: [ 
                        "{{ title }}"
                    ]
                }`
        }
    })

result
```
    hint 123
    <h1>test 123</h1>
```

Binding



    test


    const app = new QUI({
        id: "app",
        data: {
            password: null,
        },
        event: {
            show: function(e){
                alert("Password:", app.data.password);
            }
        }
    });

Event


    test


    const app = new QUI({
        id: "app",
        event: {
            test: function(e){
                alert(e.target.innerText + " clicked");
            }
        }
    });

CSS

> [!NOTE]
> Supports simple settings using :[CSS property], directly binding data to style attributes.

index.html


    test

    const app = new QUI({
        id: "app",
        data: {
            width: "100px",
            color: "red"
        }
    });

Result:
```
    test
```

Functions

`LENGTH()`

index.html


    <p>Total: {{ LENGTH(array) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            array: [1, 2, 3, 4]
        }
    });

result
```
    <p>Total: 4</p>
```

`CALC()`

index.html


    <p>calc: {{ CALC(num * 10) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            num: 1
        }
    });

result
```
    <p>calc: 10</p>
```

`UPPER()` / `LOWER()`

index.html


    <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            test1: "upper",
            test2: "LOWER"
        }
    });

result
```
    <p>UPPER lower</p>
```

`DATE(num, format)`

index.html


    <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            now: Math.floor(Date.now() / 1000)
        }
    });

result
```
    <p>2024-08-17 03:40:47</p>
```

Lazyload

`:lazyload`

index.html


    <img>

    const app = new QUI({
        id: "app",
        data: {
            image: "test.jpg"
        },
        option: {
            lazyload: true // Enable image lazy loading: true|false (default: true)
        }
    });

result
```
    <img src="test.jpg">
```

`SVG` replacement

test.svg

index.html


    const app = new QUI({
        id: "app",
        data: {
            svg: "test.svg",
        },
        option: {
            svg: true  // Enable SVG file transformation: true|false (default: true)
        }
    });

result

i18n

> [!NOTE]
> If the format is an object, the multilingual content is directly configured.
> If the format is a string, the language file is dynamically loaded via fetch.

en.json

{
    "greeting": "Hello",
    "username": "Username"
}

index.html


    <h1>{{ i18n.greeting }}, {{ i18n.username }}: {{ username }}</h1>
    切換至中文
    Switch to English

const app = new QUI({
    id: "app",
    data: {
        username: "Pardn"
    },
    i18n: {
        zh: {
            greeting: "你好",
            username: "用戶名"
        },
        en: "en.json",
    },
    i18nLang: "zh | en", // Select the displayed language
    event: {
        change: e =&gt; {
            const _this = e.target;
            const lang = _this.dataset.lang;
            app.lang(lang);
        },
    }
});

result i18nLang = zh


    <h1>你好, 用戶名: Pardn</h1>
    切換至中文
    Switch to English

result i18nLang = en


    <h1>Hello, Username: Pardn</h1>
    切換至中文
    Switch to English

Lifecycle Hooks



    const app = new QUI({
        id: "app",
        when: {
            before_render: function () {
                // Stop rendering
                // retuen false 
            },
            rendered: function () {
                // Rendered
            },
            before_update: function () {
                // Stop updating
                // retuen false 
            },
            updated: function () {
                // Updated
            },
            before_destroy: function () {
                // Stop destruction
                // retuen false 
            },
            destroyed: function () {
                // Destroyed
            }
        }
    });

Data Retrieval



    Test


    const app = new QUI({
        id: "app",
        data: {
            // Value bound to the input
            test: 123
        },
        event: {
            get: _ =&gt; {
                // Show an alert with the value of test on button click
                alert(app.data.test);
            },
            set: _ =&gt; {
                let dom = document.createElement("button");
                // Assign the button click event to the get function
                dom.onclick = app.event.get;
                app.body.append(dom);
            }
        }
    });

Creator

邱敬幃 Pardn Chiu

License

This project is licensed under a Proprietary License.

You may use, install, and run this software only under the terms specified in the End-User License Agreement (EULA).

DEV Community

QuickUI: Lightweight Frontend Framework

Features

Installation

Usage

Overview

`{{value}}`

`:html`

`:path`

`:for`

Nest loop

`LENGTH()`

`CALC()`

`UPPER()` / `LOWER()`

`DATE(num, format)`

`:lazyload`

`SVG` replacement

Creator

邱敬幃 Pardn Chiu

License

Top comments (0)

Read next

Integrating Google Calendar API in Node.JS: A Guide to Event Creation and Meeting Scheduling

JavaScript Best Practices

My React Journey: Day 11

Quickly build UI components with AI

Features

Installation

Usage

Overview

{{value}}

:html

:path

:for

Nest loop

LENGTH()

CALC()

UPPER() / LOWER()

DATE(num, format)

:lazyload

SVG replacement

Creator

邱敬幃 Pardn Chiu

License

Read next

Integrating Google Calendar API in Node.JS: A Guide to Event Creation and Meeting Scheduling

JavaScript Best Practices

My React Journey: Day 11

Quickly build UI components with AI

`{{value}}`

`:html`

`:path`

`:for`

`LENGTH()`

`CALC()`

`UPPER()` / `LOWER()`

`DATE(num, format)`

`:lazyload`

`SVG` replacement