Quark Design 是什么？

官网：quark-design.hellobike.com

github：github.com/hellof2e/qu…

群已满员，请增加管理员wx拉你入群：Sanqi9675

Quark（夸克） Design 是由哈啰平台 UED 和增长&电商前端团队联合打造的一套面向移动端的跨结构 UI 组件库。与业界第三方组件库不一样，Quark Design 底层根据 Web Components 完结，它能做到一套代码，一起运转在各类前端结构中。

Quark Design 历经一年多的开发时刻，已在集团内部很多事务中得到验证，本着“共创、共建、共享”的开源精力，咱们于即日起将 Quark 正式对外开源！Github地址：github.com/hellof2e/qu… (求star、求关注～)

重磅！哈啰 Quark Design 正式开源，下一代跨技能栈前端组件库

注：文档体现/款式参考了HeadlessUI/nutui/vant等。

Quark Design 与现有干流组件库的区别是什么？

Quark(夸克)有别于业界干流的移动端组件库，Quark 能一起运转在业界一切前端结构/无结构工程中，做到真正的技能栈无关 ！咱们不一样，：)

  • 不依赖技能栈（eg. Vue、React、Angular等）
  • 不依赖技能栈版别(eg. Vue2.x、Vue3.x)
  • 全新的Api设计（eg. 弹窗的翻开特点由传统的 Visible 调整为契合浏览器原生弹窗的 open等）
  • 公司前端技能生态项目技能栈多时，坚持视觉/交互一致
  • 彻底覆盖您所需要的各类通用组件
  • 支持按需引用
  • 详尽的文档和示例
  • 支持定制主题

功能优势-优先逻辑无阻塞

咱们以对 React 组件的 Web Components 化为例，一个普通的 React 组件在初度履行时需要一次性走完一切有必要的节点逻辑，而这些逻辑的履行都同步占用在 js 的主线程上，那么当你的页面满足杂乱时，一些非中心逻辑就将会阻塞后边的中心逻辑的履行。

比方初次加载时，你的页面中有一个杂乱的交互组件，交互组件中又包含 N多逻辑和按钮等小组件，此时页面的初次加载不应该优先去履行这些细节逻辑，而首要使命应当是优先渲染出整体结构或中心要素，而后再次去完善那些不必要第一时刻完结的细节功能。 例如一些图画处理非常杂乱，但你彻底没必要在第一时刻就去加载它们。

当咱们运用 Web Components 来优化 React的时候，这个履行进程将会变得简洁的多，比方咱们注册了一个杂乱的逻辑组件，在 React 履行时只是履行了一个 createElement 句子，创立它只需要 1-2 微秒即可完结，而真正的逻辑并不在一起履行，而是比及“中心使命”履行完再去履行，甚至你能够答应它在适宜的机遇再去履行。

咱们也能够简略的理解为，部分逻辑在之后进行履行然后被 render 到指定 id 的 Div 中的，那么为什么传统的组件为什么不能这么做呢？而非得 Web Components 呢？那就不得不提到它所包含的另一个技能特性：Shadow DOM

组件阻隔（Shadow Dom）

Shadow DOM 为自定义的组件供给了包含 CSS、事情的有效阻隔，不再担心不同的组件之间的款式、事情污染了。 这相当于为自定义组件供给了一个天然有效的保护伞。

Shadow DOM 实际上是一个独立的子 DOM Tree，通过有限的接口和外部产生效果。 咱们都知道页面中的 DOM 节点数越多，运转时功能将会越差，这是因为 DOM 节点的相互效果会时常在触发重绘（Repaint）和重排（reflow）时会关联核算很多 Frame 关系。

重磅！哈啰 Quark Design 正式开源，下一代跨技能栈前端组件库

而对 CSS 的阻隔也将加快选择器的匹配速度，即便可能是微秒级的提高，但是在极点的功能情况下，依然是有效的手段。

Quark 还能为你带来什么？

提效降本几乎是一切企业的主旋律，Quark 本身除了供给了通用组件之外，咱们还为我们供给了开箱即用的 CLI，能够让我们在直接在日常开发中开发横跨多个技能栈/结构的事务组件。比方一个相同款式的营销弹窗，能够做到：

  • 一起运转在不同技能栈（Angular、Vue、React等）的前端工程中
  • 一起运转在不同版别的技能栈中，比方能一起运转在 Vue2.x、Vue3.x 中

CLI 内部 Beta 版别目前初版已完结，github 地址：github.com/hellof2e/qu…。

适合场景：前端团队想发布一个独立的组件或npm包，让其他各类技能栈的工程运用，从而达到提效降本的目的。

npm i -g @quarkd/quark-cli
npx create-quark
重磅！哈啰 Quark Design 正式开源，下一代跨技能栈前端组件库

写在最终

Quark Design 历经一年多的开发时刻，期间有不少集团内部的同学参与并贡献了代码，在此先表示感谢，感谢我们关于 Quark Design 的热心和支持。一起在开源后也欢迎更多的社区同学参与共建 Quark Design，Quark Design loves u ❤️！假如对 Quark（夸克） 感兴趣的同学，欢迎扫码参加开发群。

假如无法参加沟通群（微信群扫码最多200人），能够增加微信：iderxu，拉你进群。

群已满员，请增加管理员wx拉你入群：Sanqi9675

相关链接

  • GitHub: github.com/hellof2e/qu…
  • Quark Doc: quark-design.hellobike.com/
  • developer.mozilla.org/en-US/docs/…
  • www.webcomponents.org/
  • 2022 Web Components 趋势解读和展: zhuanlan.zhihu.com/p/475779606