408 - 《分享:蚂蚁前端框架历史》

发布于 2024年1月28日

题图:joannakosinska @ unsplash.com

感谢 @灏辰 邀请,这是应要求新写的一篇命题作文,和大家聊聊蚂蚁前端框架、构建和数据流的历史,时间是 15 分钟。为啥要把这些混着聊呢?因为最早我们的方案里是没有框架的,只有数据流和脚手架,迭代到后期才开始做框架。

本篇不包含蚂蚁的移动端框架历史。

1、Roof。

最早是 Roof,作者是 @加缪。Roof 不是框架,而是一个数据流方案。为啥叫 Roof?这和 Node 框架 Chair 还有一点点联系。Roof 经历了好几个版本,最早的可用版本 0.4,很多概念是由 baobab 而来,基于 cursor 设计了针对复杂场景的解法。然后随着 Redux 的流行,Roof 的 0.5 提供了 createRootContainer 和 createContainer,实现类似 react-redux 里 Provider 和 connect 的功能。

// 定义 state
createRootContainer({
  user: { name: 'chris', age: 30 }
})(App);

// 绑定 state
createContainer({
  myUser: 'user',
})(UserInfo);

2、Redux。

随着 Redux 的继续流行,大家更倾向于直接使用 Redux。虽然 Roof 迭代了几个版本,越来越像 Redux,但到 0.5.6@beta 之后就停滞了,大家开始考虑拥抱 Redux。

但 Redux 本身是个很小的库,他本身并没有针对很多问题的解,比如异步、路由等,当时我还画了上面这张图。这看起来是个缺点,但回头看我觉得是优点。没有解决同时提供了插件机制意味着给社区留下了很大的空间,当时社区有非常多的方案。比如异步这块有 redux-thunk、redux-promise 和 redux-saga 等,然后我们选择了 redux-saga。

3、Dva。

基于 redux 虽然灵活,但对团队而言,灵活不是我们想要的,因为灵活也会带来非常大的应用治理成本。同时,虽然 redux-saga 很强大,但也有saga 创建麻烦、脚手架代码多等问题。

function *userCreate() {
  try {
    // Your logic here
  } catch(e) {}
}
function *userCreateWatcher() {
  takeEvery('user/create', userCreate);
}
function *rootSaga() {
  yield fork(userCreateWatcher);
}

所以我们就有了 dva。

import React from 'react';
import dva, { connect } from 'dva';
import { Route } from 'dva/router';

// 1. Initialize
const app = 

内容预览已结束

此内容需要会员权限。请先登录以查看完整内容。