哈啰下一代跨技術(shù)棧前端組件庫 Quark Design 正式開源!
Quark（夸克） Design 是由哈啰平臺 UED 和增長&電商前端團隊聯(lián)合打造的一套面向移動端的「跨框架 UI 組件庫」。與業(yè)界第三方組件庫不一樣，Quark Design ?底層基于 Web Components 實現(xiàn)，它能做到一套代碼，同時運行在各類前端框架中。
Quark Design 歷經(jīng)一年多的開發(fā)時間，已在集團內(nèi)部大量業(yè)務(wù)中得到驗證，本著“共創(chuàng)、共建、共享”的開源精神，我們于即日起將 Quark 正式對外開源！Github地址：https://github.com/hellof2e/quark-design (求star、求關(guān)注～??)
注：文檔表現(xiàn)/樣式參考了HeadlessUI/nutui/vant等。
Quark Design 與現(xiàn)有主流組件庫的區(qū)別是什么？
Quark(夸克)有別于業(yè)界主流的移動端組件庫，Quark 能同時運行在業(yè)界所有前端框架/無框架工程中，做到真正的「技術(shù)棧無關(guān)****！我們不一樣，：)」
- 不依賴技術(shù)棧（eg. Vue、React、Angular等）
- 不依賴技術(shù)棧版本(eg. Vue2.x、Vue3.x)
- 全新的Api設(shè)計（eg. 彈窗的打開屬性由傳統(tǒng)的 Visible 調(diào)整為符合瀏覽器原生彈窗的 open等）
- 公司前端技術(shù)生態(tài)項目技術(shù)棧多時，保持視覺/交互統(tǒng)一
- 完全覆蓋您所需要的各類通用組件
- 支持按需引用
- 詳盡的文檔和示例
- 支持定制主題
性能優(yōu)勢-優(yōu)先邏輯無阻塞
我們以對 React 組件的 Web Components 化為例，一個普通的 React 組件在初次執(zhí)行時需要一次性走完所有必須的節(jié)點邏輯，而這些邏輯的執(zhí)行都同步占用在 js 的主線程上，那么當(dāng)你的頁面足夠復(fù)雜時，一些非核心邏輯就將會阻塞后面的核心邏輯的執(zhí)行。
比如首次加載時，你的頁面中有一個復(fù)雜的交互組件，交互組件中又包含 N多邏輯和按鈕等小組件，此時頁面的首次加載不應(yīng)該優(yōu)先去執(zhí)行這些細(xì)節(jié)邏輯，而首要任務(wù)應(yīng)當(dāng)是優(yōu)先渲染出整體框架或核心要素，而后再次去完善那些不必要第一時間完成的細(xì)節(jié)功能。例如一些圖像處理非常復(fù)雜，但你完全沒必要在第一時間就去加載它們。
當(dāng)我們使用 Web Components 來優(yōu)化 React的時候，這個執(zhí)行過程將會變得簡潔的多，比如我們注冊了一個復(fù)雜的邏輯組件，在 React 執(zhí)行時只是執(zhí)行了一個 createElement 語句，創(chuàng)建它只需要 1-2 微秒即可完成，而真正的邏輯并不在同時執(zhí)行，而是等到“核心任務(wù)”執(zhí)行完再去執(zhí)行，甚至你可以允許它在合適的時機再去執(zhí)行。
我們也可以簡單的理解為，部分邏輯在之后進行執(zhí)行然后被 render 到指定 id 的 Div 中的，那么為什么傳統(tǒng)的組件為什么不能這么做呢？而非得 Web Components 呢？那就不得不提到它所包含的另一個技術(shù)特性：「Shadow DOM」
組件隔離（Shadow Dom）
「Shadow DOM」 為自定義的組件提供了包括 CSS、事件的有效隔離，不再擔(dān)心不同的組件之間的樣式、事件污染了。這相當(dāng)于為自定義組件提供了一個天然有效的保護傘。
Shadow DOM 實際上是一個獨立的子 DOM Tree，通過有限的接口和外部發(fā)生作用。我們都知道頁面中的 DOM 節(jié)點數(shù)越多，運行時性能將會越差，這是因為 DOM 節(jié)點的相互作用會時常在觸發(fā)重繪（Repaint）和重排（reflow）時會關(guān)聯(lián)計算大量 Frame 關(guān)系。
img而對 CSS 的隔離也將加快選擇器的「匹配速度」，即便可能是微秒級的提升，但是在極端的性能情況下，依然是有效的手段。
Quark 能為你帶來什么？「提效降本」幾乎是所有企業(yè)的主旋律，Quark 本身除了提供了「通用組件」之外，我們還為大家提供了開箱即用的 CLI，可以讓大家在直接在日常開發(fā)中開發(fā)橫跨多個技術(shù)棧/框架的「業(yè)務(wù)組件」。比如一個相同樣式的營銷彈窗，可以做到：
- 同時運行在不同技術(shù)棧（Angular、Vue、React等）的前端工程中
- 同時運行在不同版本的技術(shù)棧中，比如能同時運行在 Vue2.x、Vue3.x 中
CLI 內(nèi)部 Beta 版本目前初版已完成，github 地址：https://github.com/hellof2e/quark-cli。
適合場景：前端團隊想發(fā)布一個獨立的組件或npm包，讓其他各類技術(shù)棧的工程使用，從而達到提效降本的目的。
npm i -g @quarkd/quark-cli
npx create-quark
img
寫在最后
Quark Design 歷經(jīng)一年多的開發(fā)時間，期間有不少集團內(nèi)部的同學(xué)參與并貢獻了代碼，在此先表示感謝，感謝大家對于 Quark Design 的熱情和支持。同時在開源后也歡迎更多的社區(qū)同學(xué)參與共建 Quark Design，Quark Design loves u ??！
相關(guān)鏈接
- GitHub: https://github.com/hellof2e/quark-design
- Quark Doc: https://quark-design.hellobike.com/
- https://developer.mozilla.org/en-US/docs/Web/Web_Components
- https://www.webcomponents.org/
- 2022 Web Components 趨勢解讀和展: ?https://zhuanlan.zhihu.com/p/475779606