组件库的新选择-Banana UI,一套原生跨框架的组件库

Github: github.com/FriedRiceNo...

官方文档: banana-ui.com/

Banana UI 是什么

Banana UI 是一套原生支持跨框架的组件库,它提供了一套常用的组件。Banana UI 历经一年多的开发,已在数个生产项目中经过验证,目前正在稳定迭代中。

Banana UI 的一些特性/特点

  • 🧩 可用于几乎任何 Web 框架(React、Vue、以及其他...)
  • 🌐 可用于原生环境(无框架)
  • 🚀 支持 SSR(甚至能用于 worker 环境)
  • 🛡 良好的 TypeScript 支持
  • 📱 适用于 PC 端,移动端也可用
  • 🧪 完善的单元测试

Banana UI 解决了什么问题?

Banana 最大的特点是它是一个基于 Web Components 的组件库,这意味着它可以在几乎所有的前端框架中使用,也可以在原生环境(无框架)中使用;并且它还支持服务端渲染(SSR) ,甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。

Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。

基于这点,Banana 适合这些场景:

  • 你正在开发一个需要支持多种框架的组件/插件/工具。
  • 你有多个项目,它们使用不同的前端框架,你希望能够在这些项目中使用相同的组件库。
  • 你开发的项目正在使用模板引擎,而不是前端框架(比如 Shopify、Wordpress 等)。
  • 你开发的项目没有使用前端框架,而是原生环境。
  • React 用户,我们提供了一个 React 版本,它对 React 做了专门的适配,可以更好地和 React 配合使用。
  • 当然,Vue 项目或其他 Web 框架也可以使用 Banana。

Q & A

  1. 我可以把它用于生产环境吗?

    可以。Banana UI 已经在一些项目中使用。但是请注意,它仍然处于早期阶段,可能会有一些问题。如果你在使用过程中遇到了问题,欢迎在 Issues 区 上提出问题或寻求帮助。

作者注:我目前在一个跨境电商公司工作,公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。

  1. Banana UI 使用了什么技术?

    Banana UI 底层基于Web Components,并使用Lit进行开发。

  2. Banana UI 是一个PC端组件库还是移动端组件库?

    它是一个面向PC端,移动端也可用的组件库,我们在组件设计上从PC端出发的同时,也在尽力保障移动端的可用性。事实上,我们也确实有把Banana UI用于移动端的项目。同时,如果你需要一个面向移动端的同类型组件库,你可以看看Quark Design

寻求帮助 & 参与贡献

欢迎任何形式的提问和贡献,你可以在 Issues 区 上提出问题或寻求帮助。 如果你想参与贡献,希望可以先查看 贡献指南

一些链接:

相关推荐
前端爆冲3 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾31 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin43 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox