我终于可以不依赖 Vue 3 和 React 了!Unis 1.2.0 正式发布!支持 SSR

12,836 阅读3分钟

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
      // 内置支持 classnamesclassName="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

终于支持 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