去年 10 月，我们对外开源了 Quarkd（quark design 缩写）。
（https://github.com/hellof2e/quark-design）
开源之初，我们给自己定下 star 数量超过 70 个就行的心态，却意外得到了 1600 多 star，很受鼓舞～ 那一刻起，我们知道，在前端框架“泛滥”的时代，还有一些人在追随原生技术，大道至简，平淡为归。
这也让我们想起了 kk 说的那句话：所有创新都发生在事物边缘，所有的颠覆都来自边缘。
今天，我们正式对外开源 Quark 生态 的又一成员，Quarkc（Quark core 缩写）。下面来做个简单介绍吧 ：）
Quarkc 将于 2023-06-30·北京稀土开发者大会进行分享。
（https://conf.juejin.cn/xdc2023/topic?id=13）
官网：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 使用
工程安装
npx create-quark-app create project-name
cd project-name
npm install
npm start1. 自定义组件
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>
)
}
}2. 使用
接下来，这个组件（严格说是一个自定义元素）将能在被各种技术栈所使用。
<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 人，无法直接扫码进群），可扫码加我微信 czyx123g 拉你进群。
写在最后
Quarkc 从开始到现在历经 1 年多的时间，期间有不少集团内部的同学参与并贡献了代码，在此先表示感谢，感谢大家对于 Quarkc 的热情和支持。同时在开源后也欢迎更多的社区同学参与共建 Quarkc，Quarkc loves u ❤️！
Quark 技术生态后面会陆续有其它技术产品对外，敬请期待。
Quarkc GitHub(欢迎 star):
https://github.com/hellof2e/quark
Quark Doc:
https://quark.hellobike.com
最后, 送人玫瑰，手留余香，觉得有收获的朋友可以点赞，关注一波 ，我们组建了高级前端交流群，如果您热爱技术，想一起讨论技术，交流进步，不管是面试题，工作中的问题，难点热点都可以在交流群交流，为了拿到大Offer，邀请您进群，入群就送前端精选100本电子书以及 阿里面试前端精选资料 添加 下方小助手二维码或者扫描二维码 就可以进群。让我们一起学习进步.
推荐阅读
（点击标题可跳转阅读）
[面试必问]-你不知道的 React Hooks 那些糟心事
[面试必问]-全网最全 React16.0-16.8 特性总结
[架构分享]- 微前端qiankun+docker+nginx自动化部署
觉得本文对你有帮助？请分享给更多人
关注「React中文社区」加星标，每天进步
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
