QuickUI: Lightweight Frontend Framework

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@%5BVERSION%5D/dist/QuickUI.js"></script>
    
    <!-- Version 0.5.4 and below -->
    <script src="https://cdn.jsdelivr.net/npm/pdquickui@%5BVERSION%5D/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

  npm i @pardnchiu/quickui
  

• Result

  <!-- Version 0.6.0 and above -->
  <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@%5BVERSION%5D/dist/QuickUI.js"></script>
  
  <!-- Version 0.5.4 and below -->
  <script src="https://cdn.jsdelivr.net/npm/pdquickui@%5BVERSION%5D/dist/PDQuickUI.js"></script>
  

---

:html

• index.html

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

• Result

  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
          }
      }
  });
  

Insert Block

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

:path

• test.html

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

• index.html

      <h1 id="test">test</h1>
  
  

• Result

      const app = new QUI({
          id: "app",
          data: {
              html: "<b>innerHtml</b>"
          }
      });
  
  

Loop Rendering

:for

• index.html

          <b>innerHtml</b>
  
  

• Result

  <h1 id="path-heading">path heading</h1>
  <p>path content</p>
  

• Result

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

Conditional Rendering

• index.html

      <h1 id="path-heading">path heading</h1>
      <p>path content</p>
  
  

• Result: heading = 1

  • {{ item }} {{ CALC(index + 1) }}
  const app = new QUI({ id: "app", data: { ary: ["test1", "test2", "test3"] } });

• Result: heading = null && isH2 = true

---

Nest loop

• index.html

  • {{ key }}: {{ val.name }}
    • {{ item.name }}
      • {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
  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: heading = 3 && isH2 = null

  • food: Food
    • Snacks
      • 1. Potato Chips -
      • 2. Chocolate -
    • Beverages
      • 1. Juice -
      • 2. Tea -
  • home: Home
    • Furniture
      • 1. Sofa - 0
      • 2. Table - 0
    • Decorations
      • 1. Picture Frame -
      • 2. Vase -

• Result: heading = null && isH2 = null

      <h1 id="title-heading">{{ title }} {{ heading }}</h1>
      <h2 id="title-heading">{{ title }} {{ heading }}</h2>
      <h3 id="title-heading">{{ title }} {{ heading }}</h3>
      <h4 id="title-heading">{{ title }} {{ heading }}</h4>
  
      const app = new QUI({
          id: "app",
          data: {
              heading: [Number|null],
              isH2: [Boolean|null],
              title: "test"
          }
      });
  
  

Template Rendering

• index.html

      <h1 id="test">test 1</h1>
  
  

• result

      <h2 id="test">test </h2>
  
  

Binding

    <h3 id="test">test 3</h3>

Event

    <h4 id="test">test </h4>

CSS

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

• index.html

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

• Result:

      hint 123
      <h1 id="test">test 123</h1>
  
  

Functions

LENGTH()

• index.html

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

• result

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

---

CALC()

• index.html

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

• result

      test
  
  

---

UPPER() / LOWER()

• index.html

      <p>Total: {{ LENGTH(array) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              array: [1, 2, 3, 4]
          }
      });
  
  

• result

      <p>Total: 4</p>
  
  

---

DATE(num, format)

• index.html

      <p>calc: {{ CALC(num * 10) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              num: 1
          }
      });
  
  

• result

      <p>calc: 10</p>
  
  

Lazyload

:lazyload

• index.html

      <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              test1: "upper",
              test2: "LOWER"
          }
      });
  
  

• result

      <p>UPPER lower</p>
  
  

---

SVG replacement

• test.svg

      <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              now: Math.floor(Date.now() / 1000)
          }
      });
  
  

• index.html

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

• result

      <img  src="/static/imghwm/default1.png" data-src="test.jpg" class="lazy" alt="QuickUI: Lightweight Frontend Framework" >
  
      const app = new QUI({
          id: "app",
          data: {
              image: "test.jpg"
          },
          option: {
              lazyload: true // Enable image lazy loading: true|false (default: true)
          }
      });
  
  

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

      <img  src="/static/imghwm/default1.png" data-src="test.jpg" class="lazy" alt="QuickUI: Lightweight Frontend Framework" >
  
  

• index.html

• result i18nLang = zh

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

• result i18nLang = en

Lifecycle Hooks

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

Data Retrieval

npm i @pardnchiu/quickui

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

The above is the detailed content of QuickUI: Lightweight Frontend Framework. For more information, please follow other related articles on the PHP Chinese website!