QuickUI is a lightweight frontend framework built on pure JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
Note
(Formerly known as PDQuickUI, renamed to QuickUI starting from version 0.6.0)
- Precise diffing algorithm for efficient DOM updates
- Smart attribute patching system that updates only changed values
- Intelligent child node comparison for minimal DOM manipulation
- 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
- 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
- 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
- Website: quickui.pardn.io
- Documentation: quickui.pardn.io/doc.html
npm i @pardnchiu/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>// 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";const app = new QUI({
id: "", // Specify rendering element
data: {
// Custom DATA
},
event: {
// Custom EVENT
},
when: {
beforeRender: function () {
// Stop rendering
},
rendered: function () {
// Rendered
},
beforeUpdate: function () {
// Stop updating
},
updated: function () {
// Updated
},
beforeDestroy: function () {
// Stop destruction
},
destroyed: function () {
// Destroyed
}
}
});- index.html
<body id="app"></body> <script> const test = new QUI({ id: "app", data: { hint: "hint 123", title: "test 123" }, render: () => ` "{{ hint }}", h1 { style: "background: red;", children: [ "{{ title }}" ] }` }) </script>
- result
<body id="app"> hint 123 <h1 style="background: red;">test 123</h1> </body>
| 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 |
| Attribute | Use Case | Example |
|---|---|---|
:path |
External template loading | <temp :path="./templates/header.html"></temp> loads header component |
| Attribute | Use Case | Example |
|---|---|---|
:for |
Array/Object iteration | <li :for="item in items">{{ item.name }}</li> renders list items |
| 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> |
| Attribute | Use Case | Example |
|---|---|---|
:model |
Two-way data binding | <input :model="userInput"> syncs with data |
| Attribute | Use Case | Example |
|---|---|---|
:animation |
Transition effects | <div :animation="fade-in">Content</div> |
:[css] |
Dynamic styling | <div :background-color="bgColor">Styled content</div> |
| Attribute | Use Case | Example |
|---|---|---|
:[attr] |
Dynamic attributes | <img :src="imageUrl" :alt="imageDesc"> |
| Attribute | Use Case | Example |
|---|---|---|
@[event] |
Event listeners | <button @click="handleClick">Click me</button> |
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.
©️ 2024 邱敬幃 Pardn Chiu