共计 2238 个字符，预计需要花费 6 分钟才能阅读完成。
去年 10 月，咱们对外开源了 Quarkd（quark design 缩写）。开源之初，咱们给本人定下 star 数量超过 70 个就行的心态，却意外失去了 1600 多 star，很受鼓励～ 那一刻起，咱们晓得，在前端框架“泛滥”的时代，还有一些人在追寻原生技术，大道至简，平淡为归。
这也让咱们想起了 kk 说的那句话：所有翻新都产生在事物边缘，所有的颠覆都来自边缘。
明天，咱们正式对外开源 Quark 生态 的又一成员，Quarkc（Quark core 缩写）。上面来做个简略介绍吧：）
Quarkc 将于 2023-06-30·北京稀土开发者大会进行分享
官网：https://quark.hellobike.com/
github(欢送 star)：https://github.com/hellof2e/quark
Quarkc 是什么？
Quarkc (Quark core 缩写) 是由哈啰平台前端团队开发的一套面向未来的 无框架 组件构建工具！它能够让你实现低成本 / 高效开发规范的 跨框架组件 或者 构建整个利用，底层基于浏览器原生 API: Web components。
无需 AST，无需黑魔法，Quarkc 能够让你低成本实现 Write once, run anywhere！
外围：让组件实现技术栈无关！
Why Quarkc ?
背景 1:【前端的历史】
前端倒退多年，无论大小公司，个别都存在各种技术栈(React, Angular, Jq, Vue) / 同种技术栈的不同版本（Vue2, Vue3）。如果要开发某个通用组件（比方：营销弹窗），工作量就是 double+（不同技术框架须要离开开发 / 保护 / 上线，同技术不同版本可能也须要离开开发 / 保护 / 上线）
背景 2:【前端的将来】
前端框架会持续迭代 / 倒退，会有新的版本，新的框架呈现。用 Quarkc 开发“通用型组件”，不会随着“前端框架浪潮”而更新迭代（极大升高组件研发 / 保护老本）。
以上背景，总结一下就是：前端的过来与将来，决定了 前端通用型组件 的开发和保护老本比拟高。
而基于浏览器原生 API 构建的组件（无框架组件），却能“畅游”于各种前端框架，使得组件的研发老本 成倍的升高，跨技术框架越多，收益越高。
比方，公司同时存在 Vue2、Vue3、React 技术栈我的项目，要开发一个公共抽奖转盘，那就须要 3 套代码来反对，而 Quarkc，一套代码就能搞定！
上面截图是哈啰平台前端团队实在遇到的案例场景：
Quarkc 指标
让 Web 组件实现技术栈无关！
Quarkc 应用
1、工程装置
npx create-quark-app create project-name
cd project-name
npm install
npm start- 自定义组件
import {QuarkElement, property, customElement} from "quarkc"
import style from "./index.less?inline"
@customElement({tag: "my-element", style}) // 自定义标签 / 组件、CSS
export default class MyElement extends QuarkElement {@property() // 内部属性
count
add = () => {this.count += 1}
render() {
return (<button onClick={this.add}>count is: {this.count}</button>
)
}
}- 应用
接下来，这个组件（严格说是一个自定义元素）将能在被各种技术栈所应用。
<my-element count="count" />
<!-- vue -->
<my-element :count="count" />
<!-- react -->
<my-element count={count} />
<!-- svelte -->
<my-element {count} />
<!-- angular -->
<my-element [count]="count" />组件个性
- 跨技术栈：组件能够在任何框架或无框架的环境下应用，让你的代码更具复用性
- 组件体积极小，性能极高：因为 Quarkc 应用的是浏览器原生 API，所以你的组件能够达到最优性能，且体积玲珑
- Web Components, Simble, Fast！
- 浏览器原生 API，组件能够跨技术栈应用
- 没有前端框架 Runtime，Web 组件体积小到极致
- 高性能 设计，Shadow DOM 与 Virtual DOM 交融
- 组件间接解耦，独立打磨，按需援用
性能参考
一个略简单的组件页面跑分截图：
文档
残缺文档，请拜访 https://quark.hellobike.com
优良示例
拜访：
https://quark.hellobike.com/#/zh-CN/docs/example
分割咱们 / 技术交换
Quark 技术生态开发交换群（已超 200 人，无奈间接扫码进群），可扫码增加小助手微信拉你进群: yhy20200619edit
写在最初
Quarkc 从开始到当初历经 1 年多的工夫，期间有不少团体外部的同学参加并奉献了代码，在此先表示感谢，感激大家对于 Quarkc 的激情和反对。同时在开源后也欢送更多的社区同学参加共建 Quarkc，Quarkc loves u ❤️！
Quark 技术生态前面会陆续有其它技术产品对外，敬请期待。
Quarkc GitHub(欢送 star): https://github.com/hellof2e/quark
Quark Doc: https://quark.hellobike.com
