https://github.com/pardnchiu/quickui
QuickUI is a lightweight frontend framework built on vanilla JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
https://github.com/pardnchiu/quickui
chiuchingwei conditional-rendering front-end-framework javascript-library loop-rendering native-api pardnchiu pardnio pardnltd ui-framework vanilla-javascript virtual-dom
Last synced: about 2 months ago
JSON representation
QuickUI is a lightweight frontend framework built on vanilla JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
- Host: GitHub
- URL: https://github.com/pardnchiu/quickui
- Owner: pardnchiu
- License: other
- Created: 2024-10-29T16:58:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-28T10:11:00.000Z (3 months ago)
- Last Synced: 2025-04-12T19:39:33.629Z (about 2 months ago)
- Topics: chiuchingwei, conditional-rendering, front-end-framework, javascript-library, loop-rendering, native-api, pardnchiu, pardnio, pardnltd, ui-framework, vanilla-javascript, virtual-dom
- Language: TypeScript
- Homepage: https://quickui.pardn.io
- Size: 3.33 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# QuickUI: Lightweight Frontend Framework
> [!NOTE]
> (Formerly known as PDQuickUI, renamed to QuickUI starting from version `0.6.0`)
> 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.
[](https://www.npmjs.com/package/@pardnchiu/quickui)
[](https://www.npmjs.com/package/@pardnchiu/quickui)
[](https://www.jsdelivr.com/package/npm/@pardnchiu/quickui)
[](https://github.com/pardnchiu/QuickUI/blob/main/README.zh.md)
## 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
- Website: [quickui.pardn.io](https://quickui.pardn.io/)
- Documentation: [quickui.pardn.io/doc.html](https://quickui.pardn.io/page/doc.html)
## Installation
### Install via npm
```shell
npm i @pardnchiu/quickui
```
### Include via CDN
#### Include the `QuickUI` library
```html
```
#### Module version
```javascript
// 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";
```
## How to use
### Initialize `QUI`
```Javascript
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
}
}
});
```
### Render Template
- index.html
```HTML
const test = new QUI({
id: "app",
data: {
hint: "hint 123",
title: "test 123"
},
render: () => `
"{{ hint }}",
h1 {
style: "background: red;",
children: [
"{{ title }}"
]
}`
})
```
- result
```HTML
hint 123
test 123
```
## Overview
### Text & Content
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `{{value}}` | Dynamic text content | `
{{ userName }}
` displays user's name |
| `:html` | Raw HTML insertion | `` renders formatted content |
### Template Loading
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:path` | External template loading | `` loads header component |
### List & Iteration
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:for` | Array/Object iteration | `
### Conditional Rendering
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:if` | Conditional display | `
| `:else-if`/`:elif` | Secondary conditions | `
| `:else` | Fallback content | `
### Form Binding
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:model` | Two-way data binding | `` syncs with data |
### Styling & Animation
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:animation` | Transition effects | `
| `:[css]` | Dynamic styling | `
### Dynamic Attributes
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `:[attr]` | Dynamic attributes | `` |
### Event Handling
| Attribute | Use Case | Example |
|-----------|----------|---------|
| `@[event]` | Event listeners | `Click me` |
## 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](https://github.com/pardnchiu/QuickUI/blob/main/LICENSE).
## Creator
邱敬幃 Pardn Chiu
***
©️ 2024 [邱敬幃 Pardn Chiu](https://pardn.io)