关于前端:重磅哈啰-Quark-Design-正式开源新一代跨技术栈前端组件库

39次阅读

共计 2145 个字符,预计需要花费 6 分钟才能阅读完成。

Quark Design 是什么?

Quark(夸克)Design 是由哈啰平台 UED 和增长 & 电商前端团队联结打造的一套面向挪动端的跨框架 UI 组件库。与业界第三方组件库不一样,Quark Design 底层基于 Web Components 实现,它能做到一套代码,同时运行在各类前端框架中。Quark Design 历经一年多的开发工夫,已在团体外部大量业务中失去验证,本着“共创、共建、共享”的开源精力,咱们于即日起将 Quark 正式对外开源!

Github 地址:https://github.com/hellof2e/q… (求 star、求关注~😁)

注:文档体现 / 款式参考了 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 关系。

而对 CSS 的隔离也将放慢选择器的匹配速度,即使可能是微秒级的晋升,然而在极其的性能状况下,仍然是无效的伎俩。

Quark 能为你带来什么?

提效降本简直是所有企业的主旋律,Quark 自身除了提供了通用组件之外,咱们还为大家提供了开箱即用的 CLI,能够让大家在间接在日常开发中开发横跨多个技术栈 / 框架的业务组件。比方一个雷同款式的营销弹窗,能够做到:

  • 同时运行在不同技术栈(Angular、Vue、React 等)的前端工程中
  • 同时运行在不同版本的技术栈中,比方能同时运行在 Vue2.x、Vue3.x 中

CLI 外部 Beta 版本已实现,开源日期略晚于 Quark Design。

可先关注组织地址:https://github.com/hellof2e,关注更新。

适宜场景:公司 / 团队外部公布一个独立的 npm 包,让其余团队装置应用,从而达到提效降本的目标。

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

写在最初

Quark Design 历经一年多的开发工夫,期间有不少团体外部的同学参加并奉献了代码,在此先表示感谢,感激大家对于 Quark Design 的激情和反对。同时在开源后也欢送更多的社区同学参加共建 Quark Design,Quark Design loves u ❤️!如果对 Quark(夸克)感兴趣的同学,欢送扫码退出开发群。如果无奈退出交换群(微信群扫码最多 200 人),能够增加微信:iderxu,拉你进群。

相干链接

  • GitHub: https://github.com/hellof2e/q…
  • Doc: https://quark-design.hellobik…
  • https://developer.mozilla.org…
  • https://www.webcomponents.org/
  • 2022 Web Components 趋势解读和倒退: https://zhuanlan.zhihu.com/p/…

正文完
 0