Github: www.github.com/anuoua/unis
大家好我是 anuoua,我前段时间正式发布了我的前端框架 Unis。时隔几个月断断续续的修改,这个重大更新版本 1.2.0 现在正式发布。
此版本我对框架进行了大规模重构,着重解决跨端问题,我将 runtime 剥离了核心,抽离出了 dom 包并完成了 hydrate 逻辑,正式支持 SSR。
Unis 再也不是一个玩具了,它正式拥有了跨端能力!
和 React 和 Vue 3 的性能对比:
Unis 简要介绍
详细的看之前的文章《前端框架 Unis 带着它的生态来了!》
Unis 是一款类 React 框架,完美解决了 React Hooks 的心智负担高的问题,提供了更加直观的组件 API。Unis 独创的 Callback Reassign 编译策略,也许不用再期待 React Forget 编译器了,你可以享受高效的开发体验。
相信在使用其他框架的时候,你一定发现不少槽点。用 Vue 3 时,你会担心数据劫持篡改深层对象引用;用 React 时,你会厌烦于 Hooks 的心智负担,疲于处理 deps 带来的各种问题。
当你还在纠结 Vue 3 和 React 的各种槽点的时候,Unis 已经把开发体验从根本上提升了一个档次。
Unis 的组件编写方式如下:
import { useState } from "@unis/core";
import { render } from "@unis/dom";
const App = () => {
// 组件函数只在初始化的时候执行一次,不会多次执行
let [count, setCount] = useState(
0,
// 这部分是 Callback Reassign 编译策略产生的,用于刷新变量
// ([$0, $1]) => { count = $0; setCount = $1; }
);
// 事件绑定无需 useCallback,无需手动处理 deps 问题
const handleClick = () => {
setCount(++count);
}
return () => ( // 高阶函数
<div
// 内置支持 classnames: className="a b"
className={["a", { b: true }]}
>
count: {count}
<button onClick={handleClick}>增加</button>
</div>
)
}
这个版本为什么重要?
这个版本我着重解偶了 runtime,dom 部分单独封装,部分重构的代码也是为了更好的解偶,在架构上开放了 Operator(dom操作) 和 Toktik(类React Scheduler) 的接口,意味着任何人可以去实现自己的 runtime,包括但不限于小程序、类 React Native 移动端开发框架、类 pyqt 桌面开发框架等。
省流:开放能力,赋能跨端!
- 核心包
@unis/core
- 运行时
- Client
@unis/dom
- Server
@unis/dom/server
- Client
终于支持 SSR,SSR 的支持得益于 runtime 的解偶,是跨端已经可用的证明!
服务端
import express from "express";
import { renderToString } from "@unis/dom/server";
const app = express();
app.get("/", (req, res) => {
const SSR_CONTENT = renderToString(<div>hello world</div>);
res.send(`
<html>
<header>...</header>
<body>
<div id="root">${SSR_CONTENT}</div>
</body>
</html>
`);
});
客户端
import { render } from "@unis/dom";
render(
<App />,
document.querySelector("#root"),
true // 水合,复用服务端内容
);
此版本也加强了开发生态的适配,Callback Reassign 编译插件我也进行了重构,同时支持了 rollup 和 babel
- @callback-reassign/rollup-plugin
- @callback-reassign/babel-plugin
同时为了方便 Vite 和 Webpack 开发,也提供了预设,可以非常快速上手
- @unis/vite-preset
- @unis/babel-preset!
最近很火的 rspack,我尝试了下,运行会报错,原因是 rspack 对 jsx-runtime 解析有问题,待我反馈。
Stackbliz 在线尝试:Todo
总结
Unis 已经诞生有一段时间了,在 github 上开源也没几个 star,但我肯定会一直维护下去,这是我自己的前端生态,用自己的前端生态来开发项目,这是我一直以来的目标,我现在用它来写自己的小项目非常好用。
我现在唯一感受到的缺点是工业级 UI 库缺失,这点真的需要靠开源社区,个人精力非常有限,只能提供 @unis/transition
@unis/router
这些不需要太多维护精力的常用类库。虽然现在有 headless ui 库可以快捷封装使用,但是还是离 antd 这种工业级 ui 库有很大的距离,headless ui 扛不住复杂的后台管理系统界面。
所以希望有大佬感兴趣参与到 Unis 的开源建设中,真的很期待。
都看到这里了,说明你真的很感兴趣,能给我点个 start 吗?
Github: www.github.com/anuoua/unis