quarkc v2.0.0
Quarkc, a cross technology stack / native component building tool.
outstanding case
introduce
Quarkc (Quark core abbreviation) is a web components framework with perfect development experience. With it, you can develop standard cross-framework components.
Why Quarkc?
Background 1: History of the front end The front-end has been developed for many years. Regardless of the size of the company, there are generally various technology stacks (React, Angular, Jq, Vue) / different versions of the same technology stack (Vue2, Vue3). If you want to develop a common component (for example: marketing pop-up window), the workload is double+ (different technical frameworks need to be developed/maintained/launched separately, and different versions of the same technology may also need to be developed/maintained/launched separately)
Background 2: The future of the front end The front-end framework will continue to iterate/develop, and there will be new versions and new frameworks. Using Quarkc to develop "universal components" will not update and iterate along with the "wave of front-end frameworks" (greatly reducing component development/maintenance costs).
The above background determines that the development and maintenance costs of front-end general-purpose components are relatively high.
Quarkc target
Let web components implement technology stack independent!
use
Component starter template
- Engineering installation
npm create quarkc@latest
cd project-name
npm install
npm start
- Custom components
import { QuarkElement, property, customElement } from "quarkc"
import style from "./index.less?inline"
@customElement({ tag: "my-element", style }) // custom tag/component, CSS
export default class MyElement extends QuarkElement {
@property() // external property
count
add = () => {
this.count += 1
}
render() {
return (
<button onClick={this.add}>count is: { this.count }</button>
)
}
}
- use
All kinds of tech stacks work.
<my-element count="count" />
<!-- vue -->
<my-element :count="count" />
<!-- react -->
<my-element count={count} />
<!-- svelte -->
<my-element {count} />
<!-- angular -->
<my-element [count]="count" />
Component packaging
Package default output is UMD / ESM format
npm run build
At this point, the resources under the build product lib/
can be used directly in the project. (Any front-end project can be used~)
import "your-element"
<my-element></my-element>
Component publishing
Components can be published to npm, installed with:
npm install your-element
Can be used as a CDN
<script src="https://fastly.jsdelivr.net/npm/quarkc"></script>
<script src="https://fastly.jsdelivr.net/npm/your-element"></script>
Also available as ES Module (recommended)
import "your-element"
For more details about publishing, click Publishing
Features
- Cross-Technology Stack: Components can be used in any frame or frameless environment, making your code more reusable
- The component size is very small and the performance is extremely high: Because Quarkc uses the browser's native API, your component can achieve optimal performance and small size
- Web Components, Simple, Fast!
- Browser native API, components can be used across technology stacks
- There is no front-end framework Runtime, and the size of Web components is extremely small
- High performance design, integration of Shadow DOM and Virtual DOM
- Components are directly decoupled, polished independently, and referenced on demand
Performance reference
Screenshot of a slightly complex component page running score:
Documentation
For full documentation, please visit quarkc.hellobike.com
26 days ago
29 days ago
29 days ago
29 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
6 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago