在2017在线技术峰会“阿里开源项目最佳实践”上，蚂蚁金服前端工程师崔晓斌为大家带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始说起，着重说明React组件库antd相关技术及其应用，接着分析了dva，最后阐述了开源的意义。
3月1号下午，云栖社区将迎来2017在线技术峰会——“阿里开源项目最佳实践”。来自淘宝、天猫、阿里云、蚂蚁金服的8位项目核心成员将现场剖析阿里开源项目背后的技术实践，分享开源经验。其中，蚂蚁金服前端工程师崔晓斌为大家带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始说起，着重说明React组件库antd相关技术及其应用，接着分析了dva，最后阐述了开源的意义。
以下是精彩内容整理：
蚂蚁金服于 2015 年发布并开源了基于 Ant Design 设计规范的 React 组件库 antd，从那时起，antd 就持续地得到社区的关注和帮助。经过近两年的发展，antd 在 GitHub 上面已经拥有超过一万的 Star，在内部也落地了超过 400 个项目。但其实， antd 只是我们推动 React 技术栈落地的一个切入点而已，为了进一步的提高开发效率同时也需要保证代码质量和项目的可维护性等，我们还需要提供 antd 的相关配套工具以及统一的应用架构。
研发模式变迁
传统研发模式中，一个项目中会有相应的后端、前端、设计师、产品经理和测试，每一部分都有专业的人来做。其中，只有后端、产品经理和测试是与业务强绑定的，前端和设计师更多地是作为流动性的资源进行投放。
我们当时面临着前端和设计资源缺乏的问题，而我们内部有着大量的中后台系统，在资源缺乏的前提下不可能保证每一个系统都有足够的前端和设计资源。这些缺乏前端和设计资源的项目的用户体验自然不会特别好，开发效率也不会高。而且，前端分散在各个业务线，对其职业发展也是非常不利的。
因此，我们的痛点是前端与设计人员紧缺而导致的老系统难以维护、新系统研发效率不高，大量产品特别是企业平台类产品的用户体验还停留在初级阶段，用户体验亟待提升等。
那么，如何在资源紧缺的情况下支持大量中后台产品同时还要兼顾研发效率和用户体验？
为了解决这个问题，我们进行了一次研发模式的变迁，从传统研发模式转变成全栈研发模式。每一个项目里面只会会分配相应的全栈开发和产品经理，前端和设计不再作为资源投入，仅提供前端或者设计的基础设施，也就意味着我们需要从一个资源型团队向服务型团队转变。
在这个过程中，我们推出了Ant Design中台设计语言。但 Ant Design只是一个切入点，为了进一步提高研发效率，而且还要保证代码质量和可维护性，还需要提供一些相关配套。
antd 相关配套
如果只是个人或者小团队使用antd组件，antd 自身已经能满足其使用场景。但像蚂蚁金服这样大规模使用时，仅仅提供组件库远远是不够的，还要提供相关的配套。目前提供的配套包括Riddle、Themer和脚手架市场。
Riddle
图为antd在蚂蚁金服内部落地的数据，antd在内部大概有四百多个系统在使用，这些系统还分散在各个业务线，不同的业务线都有使用antd的UI组件库。所以如果全栈开发在使用antd的过程中碰到一些bug，或是对某些场景有疑问时，我们就只能进行线上交流。为了提高沟通效率，我们需要一个工具来辅助交流。
关注了 ant-design 这个仓库的同学会知道，如果外部用户给我们提了一个 bug， 我们会要求他使用 CodePen 提供可重现的在线demo以排查问题，其实 Riddle也起到类似的作用。但之所以会开发Riddle而不是直接使用CodePen，是因为：首先，国内访问CodePen会面临网络问题；其次，CodePen的用户体验并不怎么好；第三，蚂蚁金服作为一个商业机构，并不是所有的代码都能开放出去，所以我们需要有一个自己私有的服务。
Riddle 的功能与 CodePen 相似，在左边编辑代码，右边即可实时预览。
Riddle在用户体验上的提升在于：使用Riddle时可以不需要任何配置就能直接使用ES2015和 JSX 的语法，还支持css-modules，同时，Riddle也做了优化，如果检测到代码使用了import语句，就会自动加载相应依赖，并且可以指定依赖的版本。
Riddle首页左侧有一些标签，右边是相应标签下的示例。通过打标签的方式将Riddle的示例整理起来，可以起到Cookbook的作用，给全栈开发提供不同场景下的参考实现。
同时，示例也会按业务线进行划分，比如在同一条业务线，会有一些通用的代码，我们就可以将这些代码沉淀在Riddle上面作为一个示例，然后全栈开发就可根据需要参考这些示例的实现，或直接拷贝使用。之所以是把公共代码写成 Riddle 的示例而非业务组件，是因为并不是所有业务代码都具备抽象成业务组件的价值，所以只能作为Riddle示例存在。
Themer
使用过 antd的同学应该会知道，其实 antd的主题是可以配置的，通过配置变量表里的变量可以修改 antd的主题。但这个配置方法并不特别友好，因为它需要使用到构建工具，所以我们提供了Themer这个主题配置平台。
进入主题配置页面，就可以在左边配置相关变量，右边实时预览效果。最后可以将变量表导出。现在已经提供了不少可配置的变量，包括颜色、边框、按钮、字体、表单控件和圆角等等。
同时，Themer还是一个主题共享平台，当我们配置好主题后，可以保存到Themer上，其他人可以通过Themer找到他需要的主题直接使用，或基于该主题再进行配置。
脚手架市场
新建一个项目时，首先要新建相关的目录结构，然后要配置项目依赖和工具，这是一个繁琐并重复的劳动；其次，现在前端构建流程越来越复杂，我们不可能一开始就把环境配置好。为了解决前面两个问题，我们可以提供脚手架工具。
通过dva-cli，我们可以生成通用的脚手架。但往往还需要对脚手架进行进一步的配置，才能符合自己所开发项目的需求。所以，全栈开发人员为了方便，可能会选择直接拷贝同一条业务线里的其它项目作为脚手架使用。但拷贝过来的项目会有大量不需要的代码，配置也不一定是需要的，甚至依赖都是旧版本。所以我们要针对不同的使用场景，有针对性地提供符合其特点的脚手架。
所以我们提供了antd自己专用的脚手架市场，以便我们的用户通过它分享或者查找脚手架。与 Yeoman的 generator相比，脚手架市场的脚手架开发难度相对较低。
目前脚手架市场已经开放到外部，可以通过GitHub账号登录，并且可以在登录后以PR的形式将整理出的脚手架提交到脚手架市场。
同时脚手架市场也支持在线上预览脚手架运行起来之后的效果。
应用架构 dva
由于前端的业务逻辑和数据层都在变得越来越复杂，我们在使用React时不可能仅仅使用React原生提供的数据通信方案，或直接用React组件管理业务逻辑，所以需要框架帮助处理这些问题。同时，我们内部有近500个系统在使用React技术栈，不可能让每一个项目自己去折腾一套自己数据通信等方案。所以我们要提供一个统一的应用架构，也就是dva。
在谈 dva 之前，需要先了解一下蚂蚁金服 React 应用架构的历史。其实与antd同期，我们就开始探索自己的应用架构Roof，并且Roof@0.4就开始在内部大规模推广，但由于Roof本身概念比较多，难于理解，所以在Roof@0.5中简化了一些概念，并引进了Redux里面的概念，然后在迭代的过程中，Roof 变得越来越像 Redux，最后甚至直接用Redux作为核心。
Redux
在 Roof 变得和 Redux相差无几后，不少项目就开始直接使用Redux了，直接使用 Refux可以享受到很多好处：
- 轻量级数据流方案，解决从 state 到 component 的单向数据流转问题
- 借助 Action 和 Reducer 实现可预测的 state 变更
- 社区活跃，丰富的扩展、调试方案
但 Redux 的使用也带来了新的问题：
项目中遇到的每个问题都有非常多的库以供选择，给项目带来了技术选型的成本；
Redux作为一个类库，并没有对代码作过多的约束，这是灵活性，但对于蚂蚁金服这种规模的使用而言，就会变得不可控；
开发功能时，一个功能的代码分散在 reducers actions sagas 等目录下面，需要来回切换，影响专注力；
用户发起异步请求时页面或部分 UI 需要进入 loading 状态，这需要通过一遍遍重复地写 showLoading 和 hideLoading来实现；
出错处理太繁琐，每个异步 saga 都要 try .. catch；
项目太大了，需要动态加载方案。
Dva
所以我们推出了自己的应用架构dva，就是为了解决上面的问题。dva开放以来，已经得到了广泛的认可，现在在github上已经有2600个star，并且得到了大V的支持和推广。现在dva已经是我们内部主推的应用架构，有接近20%系统在使用dva。
那么。dva到底是什么呢？
dva是一个框架而非类库，它会对代码的写法和组织方式有比较多的约束以保证不同团队写出的代码尽可能相似；其次，它是基于 redux, react-router, redux-saga 的轻量级封装；最后，它借鉴 elm 的概念，包括Reducer, Effect 和 Subscription等。
dva仅有5个API，支持HMR，支持 SSR (ServerSideRender)，支持 Mobile/ReactNative，支持 TypeScript，支持路由和 Model 的动态加载，并提供了完善的语法分析库 dva-ast。
图为dva写的相对简单的应用程序，新建应用，并注册相关的model和路由后，就可以给 React 组件订阅一些数据，最后启动就可以把应用渲染到页面了。
关于开源
开源不仅仅是开放源码。
对项目而言：
- 开源是一块试金石。解决一个问题有多种方案，每种方案也会有多种实现，那么哪种方案是最好的呢？我们可以通过把项目开源开放到社区上，让社区筛选出相对优秀的方案。
- 开源是一种软件开发模式。同一个项目如果仅仅在内部使用，很多时候我们只会满足于可用。但开放到社区后，社区就会根据自己的使用场景去评估并实践这个项目，对于其中不合理的地方提出建议。
- 开源项目需要经营。antd就有许多地方需要经营，包括贡献氛围、语言氛围和互助氛围，有利于社区健康发展。
对个人而言：
开源是一种学习方式，开源可以展示个人能力。
崔晓斌：蚂蚁金服前端工程师，目前主要负责 React 组件(如：antd、react-component)及配套工具(如：bisheng)的开发。
