重磅！哈啰 Quark Design 正式開(kāi)源，下一代跨技術(shù)棧前端組件庫(kù)

大家好，我是winty！新的一周，基于 Web Components 的組件庫(kù)來(lái)了。今日文章由哈啰 @Allan 投稿分享。

正文從這開(kāi)始～～



Quark Design 是什么？
Quark（夸克） Design 是由哈啰平臺(tái) UED 和增長(zhǎng) & 電商前端團(tuán)隊(duì)聯(lián)合打造的一套面向移動(dòng)端的跨框架 UI 組件庫(kù)。與業(yè)界第三方組件庫(kù)不一樣，Quark Design 底層基于 Web Components 實(shí)現(xiàn)，它能做到一套代碼，同時(shí)運(yùn)行在各類(lèi)前端框架中。

Quark Design 歷經(jīng)一年多的開(kāi)發(fā)時(shí)間，已在集團(tuán)內(nèi)部大量業(yè)務(wù)中得到驗(yàn)證，本著 “共創(chuàng)、共建、共享” 的開(kāi)源精神，我們于即日起將 Quark 正式對(duì)外開(kāi)源！Github 地址：https://github.com/hellof2e/quark-design (求 star、求關(guān)注～??)



注：文檔表現(xiàn) / 樣式參考了 HeadlessUI/nutui/vant 等。

Quark Design 與現(xiàn)有主流組件庫(kù)的區(qū)別是什么？
Quark (夸克) 有別于業(yè)界主流的移動(dòng)端組件庫(kù)，Quark 能同時(shí)運(yùn)行在業(yè)界所有前端框架 / 無(wú)框架工程中，做到真正的技術(shù)棧無(wú)關(guān)！我們不一樣，：)

不依賴(lài)技術(shù)棧（eg. Vue、React、Angular 等）

不依賴(lài)技術(shù)棧版本 (eg. Vue2.x、Vue3.x)

全新的 Api 設(shè)計(jì)（eg. 彈窗的打開(kāi)屬性由傳統(tǒng)的 Visible 調(diào)整為符合瀏覽器原生彈窗的 open 等）

公司前端技術(shù)生態(tài)項(xiàng)目技術(shù)棧多時(shí)，保持視覺(jué) / 交互統(tǒng)一

完全覆蓋您所需要的各類(lèi)通用組件

支持按需引用

詳盡的文檔和示例

支持定制主題

性能優(yōu)勢(shì) - 優(yōu)先邏輯無(wú)阻塞
我們以對(duì) React 組件的 Web Components 化為例，一個(gè)普通的 React 組件在初次執(zhí)行時(shí)需要一次性走完所有必須的節(jié)點(diǎn)邏輯，而這些邏輯的執(zhí)行都同步占用在 js 的主線(xiàn)程上，那么當(dāng)你的頁(yè)面足夠復(fù)雜時(shí)，一些非核心邏輯就將會(huì)阻塞后面的核心邏輯的執(zhí)行。

比如首次加載時(shí)，你的頁(yè)面中有一個(gè)復(fù)雜的交互組件，交互組件中又包含 N 多邏輯和按鈕等小組件，此時(shí)頁(yè)面的首次加載不應(yīng)該優(yōu)先去執(zhí)行這些細(xì)節(jié)邏輯，而首要任務(wù)應(yīng)當(dāng)是優(yōu)先渲染出整體框架或核心要素，而后再次去完善那些不必要第一時(shí)間完成的細(xì)節(jié)功能。例如一些圖像處理非常復(fù)雜，但你完全沒(méi)必要在第一時(shí)間就去加載它們。

當(dāng)我們使用 Web Components 來(lái)優(yōu)化 React 的時(shí)候，這個(gè)執(zhí)行過(guò)程將會(huì)變得簡(jiǎn)潔的多，比如我們注冊(cè)了一個(gè)復(fù)雜的邏輯組件，在 React 執(zhí)行時(shí)只是執(zhí)行了一個(gè) createElement 語(yǔ)句，創(chuàng)建它只需要 1-2 微秒即可完成，而真正的邏輯并不在同時(shí)執(zhí)行，而是等到 “核心任務(wù)” 執(zhí)行完再去執(zhí)行，甚至你可以允許它在合適的時(shí)機(jī)再去執(zhí)行。

我們也可以簡(jiǎn)單的理解為，部分邏輯在之后進(jìn)行執(zhí)行然后被 render 到指定 id 的 Div 中的，那么為什么傳統(tǒng)的組件為什么不能這么做呢？而非得 Web Components 呢？那就不得不提到它所包含的另一個(gè)技術(shù)特性：Shadow DOM

組件隔離（Shadow Dom）
Shadow DOM 為自定義的組件提供了包括 CSS、事件的有效隔離，不再擔(dān)心不同的組件之間的樣式、事件污染了。這相當(dāng)于為自定義組件提供了一個(gè)天然有效的保護(hù)傘。

Shadow DOM 實(shí)際上是一個(gè)獨(dú)立的子 DOM Tree，通過(guò)有限的接口和外部發(fā)生作用。我們都知道頁(yè)面中的 DOM 節(jié)點(diǎn)數(shù)越多，運(yùn)行時(shí)性能將會(huì)越差，這是因?yàn)?DOM 節(jié)點(diǎn)的相互作用會(huì)時(shí)常在觸發(fā)重繪（Repaint）和重排（reflow）時(shí)會(huì)關(guān)聯(lián)計(jì)算大量 Frame 關(guān)系。



而對(duì) CSS 的隔離也將加快選擇器的匹配速度，即便可能是微秒級(jí)的提升，但是在極端的性能情況下，依然是有效的手段。

Quark 能為你帶來(lái)什么？
提效降本幾乎是所有企業(yè)的主旋律，Quark 本身除了提供了通用組件之外，我們還為大家提供了開(kāi)箱即用的 CLI，可以讓大家在直接在日常開(kāi)發(fā)中開(kāi)發(fā)橫跨多個(gè)技術(shù)棧 / 框架的業(yè)務(wù)組件。比如一個(gè)相同樣式的營(yíng)銷(xiāo)彈窗，可以做到：

同時(shí)運(yùn)行在不同技術(shù)棧（Angular、Vue、React 等）的前端工程中

同時(shí)運(yùn)行在不同版本的技術(shù)棧中，比如能同時(shí)運(yùn)行在 Vue2.x、Vue3.x 中

Quark 能為你帶來(lái)什么？
提效降本幾乎是所有企業(yè)的主旋律，Quark 本身除了提供了通用組件之外，我們還為大家提供了開(kāi)箱即用的 CLI，可以讓大家在直接在日常開(kāi)發(fā)中開(kāi)發(fā)橫跨多個(gè)技術(shù)棧 / 框架的業(yè)務(wù)組件。比如一個(gè)相同樣式的營(yíng)銷(xiāo)彈窗，可以做到：

同時(shí)運(yùn)行在不同技術(shù)棧（Angular、Vue、React 等）的前端工程中

同時(shí)運(yùn)行在不同版本的技術(shù)棧中，比如能同時(shí)運(yùn)行在 Vue2.x、Vue3.x 中

CLI 內(nèi)部 Beta 版本目前初版已完成，github 地址：https://github.com/hellof2e/quark-cli。

適合場(chǎng)景：前端團(tuán)隊(duì)想發(fā)布一個(gè)獨(dú)立的組件或 npm 包，讓其他各類(lèi)技術(shù)棧的工程使用，從而達(dá)到提效降本的目的。

 npm i -g @quarkd/quark-cli
 npx create-quark


最后
Quark Design 歷經(jīng)一年多的開(kāi)發(fā)時(shí)間，期間有不少集團(tuán)內(nèi)部的同學(xué)參與并貢獻(xiàn)了代碼，在此先表示感謝，感謝大家對(duì)于 Quark Design 的熱情和支持。同時(shí)在開(kāi)源后也歡迎更多的社區(qū)同學(xué)參與共建 Quark Design，Quark Design loves u ??！

Github 地址：https://github.com/hellof2e/quark-design (求 star、求關(guān)注～??)




作者：Allan


歡迎關(guān)注微信公眾號(hào) ：前端Q