作者|徐顺发
编辑|邓艳琴
去年 10 月,我们对外开源了 Quarkd(quark design 缩写)。开源之初,我们给自己定下 star 数量超过 70 个就行的心态,却意外得到了 1600 多 star,很受鼓舞~ 那一刻起,我们知道,在前端框架“泛滥”的时代,还有一些人在追随原生技术,大道至简,平淡为归。这也让我们想起了 kk 说的那句话:所有创新都发生在事物边缘,所有的颠覆都来自边缘。
今天,我们正式对外开源 Quark 生态的又一成员,Quarkc(Quark core 缩写)。下面来做个简单介绍吧 :)
官网: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
2. 自定义组件
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>
)
}
}
3. 使用
接下来,这个组件(严格说是一个自定义元素)将能在被各种技术栈所使用。
<my-element count="count" />
<!-- vue -->
<my-element :count="count" />
<!-- react -->
<my-element count={count} />
<!-- svelte -->
<my-element {count} />
<!-- angular -->
<my-element [count]="count" />
组件特性
性能参考
一个略复杂的组件页面跑分截图:
文档
完整文档,请访问: 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
作者介绍
徐顺发,哈啰前端开发,机械工业出版社《React+Redux 前端开发实战》作者,多个开源库 Contributor。热衷于使用前沿技术提升前端生产力,近一年专注于 Web Components 的跨技术栈解决方案,目前致力于 Quark 技术生态建设。QCon 北京 2022 演讲嘉宾。