Lädt...


🔧 QuickUI: Lightweight Frontend Framework


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

GitHub

(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 &amp;&amp; isH2 = true

    
        <h2>test </h2>
    
    
  • Result: heading = 3 &amp;&amp; isH2 = null

    
        <h3>test 3</h3>
    
    
  • Result: heading = null &amp;&amp; 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).

©️ 2024 邱敬幃 Pardn Chiu

...

🔧 QuickUI: Lightweight Frontend Framework


📈 62.34 Punkte
🔧 Programmierung

🔧 QuickUI: 輕量化前端框架


📈 34.69 Punkte
🔧 Programmierung

🪟 The HyperX Pulsefire Haste is a lightweight mouse with a lightweight cost


📈 23.86 Punkte
🪟 Windows Tipps

🔧 The Battle of the Lightweight Frontend Frameworks


📈 21.6 Punkte
🔧 Programmierung

📰 heise+ | Web-Frontend mit Angular 2: Frontend mit Backend verknüpfen


📈 19.35 Punkte
📰 IT Nachrichten

🔧 Frontend Dev: Mastering the Art of Frontend Development


📈 19.35 Punkte
🔧 Programmierung

📰 ES-DE Frontend: Frontend für plattformübergreifende Spielesammlungen (Emus, Engines und mehr)


📈 19.35 Punkte
📰 IT Nachrichten

🔧 🌟 Micro Frontend vs. Atomic Frontend: A Modern Web Development Showdown 🚀


📈 19.35 Punkte
🔧 Programmierung

🔧 Hey Frontend Fam! Ready for State Of Frontend 2024? The survey is here!


📈 19.35 Punkte
🔧 Programmierung

🕵️ CVE-2022-43484 | TERASOLUNA Global Framework/Server Framework Spring Framework input validation


📈 18.14 Punkte
🕵️ Sicherheitslücken

🔧 Introducing RGFW: A lightweight Single Header Windowing framework & GLFW alternative


📈 17.97 Punkte
🔧 Programmierung

🔧 Day 1 Pygomo Development - Lightweight framework for game development.


📈 17.97 Punkte
🔧 Programmierung

🔧 Cheers to Craft Design: Beer CSS - A Lightweight Material Design Framework


📈 17.97 Punkte
🔧 Programmierung

📰 Nimbo-C2 - Yet Another (Simple And Lightweight) C2 Framework


📈 17.97 Punkte
📰 IT Security Nachrichten

📰 Nimbo-C2 - Yet Another (Simple And Lightweight) C2 Framework


📈 17.97 Punkte
📰 IT Security Nachrichten

🔧 PIANO: A Simple and Lightweight HTTP Framework Implemented in Go


📈 17.97 Punkte
🔧 Programmierung

📰 Pocsploit - A Lightweight, Flexible And Novel Open Source Poc Verification Framework


📈 17.97 Punkte
📰 IT Security Nachrichten

🔧 Help needed! A lightweight CSS framework/library


📈 17.97 Punkte
🔧 Programmierung

🔧 Hono.js: A Lightweight Framework with Big Potential 🚀


📈 17.97 Punkte
🔧 Programmierung

🔧 Introducing Roseview: The Lightweight UI Framework with Everything You Need, and Nothing You Don’t


📈 17.97 Punkte
🔧 Programmierung

🔧 Bottle - Python Lightweight and Fast micro web framework


📈 17.97 Punkte
🔧 Programmierung

📰 LightLLM: A Lightweight, Scalable, and High-Speed Python Framework for LLM Inference and Serving


📈 17.97 Punkte
🔧 AI Nachrichten

🔧 Meet Lithe: The Lightweight and Flexible PHP Framework


📈 17.97 Punkte
🔧 Programmierung

🔧 You don't need a frontend framework


📈 15.72 Punkte
🔧 Programmierung

🔧 React.js vs. Angular.js: Choosing the Best Frontend Framework for Your Project


📈 15.72 Punkte
🔧 Programmierung

🔧 React: Best Frontend Framework 2024


📈 15.72 Punkte
🔧 Programmierung

🔧 Switch from a Framework/Library User to a Pro Frontend Engineer


📈 15.72 Punkte
🔧 Programmierung

🔧 Introducing Remult: The Open Source Backend to Frontend Framework You Always Wanted


📈 15.72 Punkte
🔧 Programmierung

matomo