Quarkc, a cross technology stack / native component building tool.

outstanding case

| author | github address | screenshot / link | ---- | ---- | ----- | | @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/[email protected]/demo.html | | @khno | https://github.com/khno/quark-element-demo-celebrate | https://unpkg.com/quarkc-demo-celebrate@latest/demo.html | | @hellof2e | https://github.com/hellof2e/quark-doc-header | https://quarkc.hellobike.com/#/ | | @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html | | @dyf19118 | https://github.com/dyf19118/quark-ui-rate |  | | @hellof2e | https://github.com/hellof2e/quark-doc-home | |

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

1. Engineering installation

npm create quarkc@latest
cd project-name

npm install
npm start

2. 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>
     )
   }
}

3. 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