让你早点下班的前端框架：Refina.js

KermanX
126 阅读3分钟

GitHub | Documentation | 中文文档 | 互动教程

或许你常常会想，一下子就能想明白交互逻辑的网页，为什么实现起来，动辄就要几百行代码，花很多时间？

前端框架要解决这个问题——但是前端框架已经太多了，实在不想了解一个新的，除非是——从根本上就不同的前端框架？

Refina.js 就是。Refina.js 遵循开发效率>可配置性>运行效率的设计理念，首先保证开发效率极高，再去追求细节的可配置程度、功能的完美性和兼容性。

使用 Refina.js，可以以极高的效率，做出超越绝大部分国内中小厂、外包公司的网页。Refina.js 大大提高了完美程度的下限。目前根据数个实际项目估计得出，使用 Refina.js 的代码量约为"传统"前端框架的60%~70%，开发效率提高了1.4x~1.6x 倍。

Talk is cheap, show me the code!

这是一段 Vue.js 代码： vue.png

这是等价的 Refina.js 版本： refina.png

注释： refina-commented.png

特点

  • Refina.js 的代码更紧凑（废话更少）
  • Refina.js 使用纯TypeScript/JavaScript ，这意味所有开发工具都可以直接支持 Refina.js
  • Refina.js 的状态是普通的JS值，不需要 ref()，不需要 setState，也不需要复杂的编译时转换
  • Refina.js 抛弃了类XML的语法，没有结束标签，按位置传入属性，并且不用回调函数处理事件
  • Refina.js 的组件是“调用即声明”的，而非像 JSX 那样创建并返回一棵组件树

Refina.js 的这种写法受到了 Dear ImGui 的启发。后者已经有大量的用户。

功能

  • 组件化
  • 视图分割
  • 完善的类型提示
  • 热模块替换 (Hot Module Replacement, HMR)
  • 插件系统
  • npm create refina 快速创建项目

生态

  • 使用 Vite.js
  • MdUI 组件库：基于 MdUI v2 二次封装的组件库 @refina/mdui 已经发布
  • Basic Components 组件库：对一些HTML元素的简单封装
  • FluentUI 组件库：因为原来的实现基于React，需要重写。目前正在开发中，已经完成了大部分较复杂的组件
  • 支持 Tailwind CSS
  • 支持 Griffel.js

如果你觉得感兴趣，或许可以花上一点时间，了解一下Refina.js。希望它不会让你失望——我相信它是独一无二的。

写在最后

  • 由于根本上的不同，Refina.js 不能被经典的理论解释，比如：Refina.js 拥有“半个 VDOM”

  • Refina.js 是怎么感知状态变化的？接收事件之后自动更新页面，通过提高更新效率来实现相当低(~20ms)的延迟

  • Refina.js 的组件的抽象层次比其他框架的抽象层次更高，因此需要手动配置的属性更少，当然可自定义的程度也就降低了

  • Refina.js 已经可用。底层的设计已经比较稳定，但是写法上的设计仍在不断改进。相关的组件库也在积极开发中

  • Refina.js 会弃坑吗？有许多说好不会弃坑的项目最后还是弃坑了。好在 Refina.js 的设计决定了它本身非常轻量，维护起来比其他框架轻松太多

  • 声明：术业有专攻，Refina.js 不能用于开发定制程度过高的网页（需要大量不典型的组件的那种）。Refina.js 专为让你早点下班而设计——而不是为了让你早点被替代而设计

⭐ Star & 👁️ Watch Refina.js
avatar
文章
阅读
粉丝