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

感谢 @灏辰 邀请,这是应要求新写的一篇命题作文,和大家聊聊蚂蚁前端框架、构建和数据流的历史,时间是 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 =