Quark 生态,再起航!哈啰 Quarkc 正式开源,低成本构建跨技术栈前...-技术圈

点击上方前端Q ，关注公众号

回复加群，加入前端Q技术交流群

去年 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 start

1. 自定义组件

          
            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" />