react自己从服（读：fú）务器加载

为什么BAT中普遍使用React，甚至淘宝也从KISSY转向了React？React已经在蚂蚁金服使用了一年多的时间，基于React/React-Native我们开发了移动端和pc端的基础组件react-componentantdantm

为什么BAT中普遍使用React，甚至淘宝也从KISSY转向了React？

基于 React 澳门威尼斯人的前端架构在（拼音：zài）蚂蚁金服的实践

今天我的主题是是基于React的终端架构，其实还是主要侧重于前端，终端是我们未来前端的一个方向我在阿里的工作分为两个阶（读：jiē）段第一(读：yī)个阶段是2010年进淘宝之后，一直做的就是 kissy 类库开发还有周边的工具2014年的时候去了蚂蚁金服，蚂蚁金服的开发策略是全栈开发，所以需要一个技术转《繁：轉》型，所以我们这边就选择了React

首先介绍一下蚂蚁金服前端的业务特点蚂蚁金服是由支付宝进化(读：huà)而来的，现在是四大业务，支付宝个人消费（繁：費），然后是蚂蚁聚宝，主要侧重于理财的，网{繁：網}上银行侧重于企业银行业务的开发，还有一个是侧重于个人消费的O2O的口碑，这个是我们的四大业务

前端面临的业务非常多，而且目前移动端都是结合 web 混合(繁体：閤)式的，大家可能也{yě}听说过阿里已经开发了一个 weex的框架，或者结合react-native来做动态化等等其实它的语言甚至都是javascript，就是对于前端来说这些都是一样的

除了移动端的东西之外，每一个APP的业务下面都会有对应的很多的后台业务支撑，比如{pinyin：rú}做运营的话，就需要运营平台，阿里的特色就是特tè 别注重运营，其实我们内部有很多这种运营平台，都是给小二用的

然后对于蚂蚁的话，蚂蚁有很多的商家，商家也需要商户(拼音：hù)平台来管理自己的运营只靠专业前端是那么对于前端来说，这么多业务在国（繁体：國）内前端都普遍欠缺的情况根本做不过来的所以蚂蚁的一个战略就是说前端不要只做前端的事情了，就是把这些业务的前端工作{读：zuò}教会全栈来做

前端就要像DBA一样要提供一些业务支持，提供一些资源服务的一些支持转型就是说我们要走全站研发这样一个[繁体：個]模式业务需求最好都是有对应的全【读：quán】栈来做，然后结合产品经理做快速响应需求而前端要做的事情就是要打造一个适合全栈开发的基础设施

前端团队也是在进行转型，不再直接的投入业务，不再像一个资源一样，哪里有业务需求就去哪《拼音：nǎ》里而是要进行一个转型，我们【练：men】只提供服务，而我们服务的输出就是我们的技术产品，就是我们基于 React做的一些类库，或者是做了一些设计的封装，那么培训全栈直接用就可以了[拼音：le]

我后面所讲的前端架{jià}构面向的观众《繁体：衆》其实都是全栈的开发，不是前端开发，所以我们的架构会有【pinyin：yǒu】一些改变

首澳门金沙先我们选择的底层类库是React，我们为什么要选择React技术站，而没有像以前那样我们[繁体：們]基于jquery或者 kissy继续做，其实有一些原因

首先React技术栈是比较先进的，它[繁体：牠]是目前流行的函数《繁：數》式，基于不可变数据并且它是shì 非常务实，在 facebook全网都有应用，经过大量实战考验

第二个是生态圈非常繁荣，React是从(繁体：從)2013年发布到现在 star 一直在涨，现【xiàn】在已经四万多了，并且 redux， react-router等等这些类库层出不穷，并且质量非常高

第三个是适用性广，适用性广的话也是根据我们的特点，我们要打造全栈工程师，就希望他们能够用尽量少的技术来应对各种应用场景，无论[繁体：論]是 native 端还有web端都希望用一种技术来开【pinyin：kāi】发，而React的话，就是提供了我们这样的技术，比如说React和React-Native

第四个是我没写出来，是【pinyin：shì】针对我们公司的{读：de}，因为蚂蚁金服的后端开发人员是以JAVA开发为主，而React技术栈的整个架构和后端的JAVA架构其实是比较类似的，比较容易被后端开发所接受经过这一年的验证，也确实证明这一点，非常容易上手

我们选型的核心技术是React，ES2015然《rán》后还有 typescript是目前正在推进的一个改进，也是特别贴近我们公司的业务，因为我们后台的应用非常复杂，业务逻辑非常多，后端开发是用JAVA，有很多的类型保护这个系统不会轻易的崩溃等等当他们转到前端以后，发现前端太灵活了，根【读：gēn】本搞不清楚这个对象里面有哪个方法，属性是什么类型，经常会传错或者运行时抛错，而导致一些对我们前端来说是不可思议的错误我(wǒ)们现在在引进 typescript来对我们的技术[繁：術]产品做一个静态类型的增强，避免一些无谓的错误

我们要打造适合全栈的前端基础设施，这个[拼音：gè]是我们目前的一个架构图

底层是基于 npm 的，在公司内部对应于 tnpm，大家如果熟悉JAVA的话，就是《shì》相当于 maven的这种包管理工具，然后我们会 ant-tool 这样一个编译工具，对应JAVA的话，相当于JAVAC等等的一些工具然后在这之上的话会有一些基础组{繁体：組}件，然后基于这些组件我们会封装出适合全栈开发用的一些技术产品通常是融合我们的设计的，比如 antd，然后再结合我们提供的应用架构，全栈就可以基于整个体系来进行业务开发了

首先是包管理器（读：qì），生态圈很重要，npm 是整个世界上所有的语言中生态最繁华的，里面基本上是应有尽有，所以说我wǒ 们选择了 npm，并且也是React生态圈推荐的一个管理工具

在我们（繁体：們）内部的话，其实阿里在很早以前就已经开始了 nodejs 应用，在我们《繁：們》内部的话，npm 也是有对应的镜像 tnpm，这样的话，前端可以把我们内部的一些应用模块也发到 tnpm 去，各个业务之间想共享[练：xiǎng]模块的话，就直接从 tnpm 拉取就可以了，另外为后期的优化打造了一个坚实的基础

工具方面我们也是基于业界的一些优秀方案进行封装，webpack的功能是非常强大的，配{pèi}置也是非常复杂的，配置文件可能经常就有几百行的样子所以说对于全栈开发来说，除了业务开发，还要熟悉 webpack 的配置等等我们希望全栈能够专《繁：專》注于业务我们根据自己的经验总结把它封装起来，这样的话就是一个简单的命令行工具，可以实现代理，构建，离线打包等，还有代码规guī 范的约束

最终输出是一个脚【繁：腳】手架《练：jià》，因为直接用工具的话，还是比较复杂的因为还知道它的很多命令啊，怎么用啊，直接输出脚手架，我们会把这些开发工具通过npm script来暴露出来，这样就可以直接进行xíng 开发还有构建等等，不需要了解更多工具细节了

我们目前组件分成三大部分，首先是底层的react-component，这个在 github上开源了，这些底层组件的话通常是不涉及设计的，就是它没有(读：yǒu)设计要素在（读：zài）里面，只是实现结构和功能，那么在基于这个组件，会有基于我们的设计的封装，还有移动【dòng】端的封装

因为React是跨终端的，所以这些组件，在编写的时候（练：hòu）也是考虑了多终端下面的运行，如果是通用组件(拼音：jiàn)的话，就是没有前缀，然后这些组件的话经常是用PC还有PAD 等大屏设备上的如果有m 前缀的话，这些都是我们单独为移动端 UI的交互所实现的同时会适配web和native，组件的API是一样的，如果运(拼音：yùn)行环境支持 react-native 的话，那么业务就可以跨终端运行了

组件规范包括assets，样式的话我们目前选择【pinyin：zé】是BEM，然后通过 prefixCls 来适配不（pinyin：bù）同的设计，这样的话底层组件不仅能够适配蚂蚁金服的 ant design 设计上，还可以适配到阿里巴巴的其它一些设计

源码 src 部分是ES6，目前是向 typescript迁移，并且部分组件的话会适配 react-native如【pinyin：rú】果基于这套脚手架来实现的话，会支持很多开源的一些基础设施，比如 travis 持续集成平台，coverall 测试覆盖率平（拼音：píng）台

组件开发时通过 npm澳门银河 run dev启动开发服务器，可以访问示例地址进行开发测试通过 npm test在终端测试，还可以进行 npm run chrome-test，在 chrome 中进行可视化测试（读：shì），还可以进行debug

通过 pre-commit 进行提交检测，代码检测通过后才会真正的提交到代码库《繁：庫》

目前采用【练：yòng】的是ES2015，所以[拼音：yǐ]是不能是直接发到 npm上面用的，我们用 npm run pub 命令，执行编译和发布，把 es6/typescript编译为 ES5代码，进行提交发布，构建项目展示页这样就完成了组件的一个完整的开发流程

组件开发完成还不是真正的完成，还需要样式来适配，我们对外暴露的是【pinyin：shì】一个设计语言，包括封装好的组件，组件包含功能设计和交互，这些是全公司统一的，有一定的设计原则，然后还有一些设计模式[练：shì]的沉淀，有对应的(练：de)工具，参考案例，然后会培训全栈来开发，培训产品经理设计

Ant design是跨终端的，它可以后台，也可以针对移动端遵循的原则其实首先是非常实用的，这个设计语言我们是希望能够统一蚂蚁金服的设计第二它是小而美的，它的组件是非常多的，可以根据业务特点按需使用

后面两个就是它是有统一的交互《hù》和动画，形成一个统一的品牌输出

实现包含两个部分，第一个就是PC端的实现，PC端的实现（繁体：現）就是antd，这个库的话目（mù）前已经开源，在ATM里面包含了很多组件，它是对底层组件的一个封装，然后融合设计，形成了一个统一UI，用户只需要组件，进行一些布局和拼装

我们也在进行国际化，蚂蚁金服现在也在进行一些国际化的业务，那么对于多语言的支持也是有非常强烈的需求同时我们在国外的话(拼音：huà)也有一些影响，一些国外的开发者希望我们能够更国际化一些，现在会增加一些国际化的文件，对文档进行翻译，我们是和国外的开发者一起进行的，我们翻译(拼音：yì)之后会请那些国外开发者来 review

使用的时候不需要关心样式，和那个JAVA里面的import是一样的直接通过标签化的使用，进行一些业务处理会有一个 babel 插件进行按需加载，如果直接用 import antd的话，打包后会很大所以有了这个插件jiàn 之后，可以进(繁体：進)行按需加载

Ant.design是一个SPA的单页面应用，依赖[繁：賴]一个工澳门金沙具叫 bisheng.目前 antd在国内外取得了比较好的影响目前 star有4200多了

ant design mobile一方面要考虑web端，要考虑小【练：xiǎo】屏场[繁体：場]景，另外一个就是我们要考虑react-native，能够同时用在web和react-native，并且通过React组件的封装达到一致的API比较 react-native，如果 react-native 有的组件，web端也要实（繁：實）现，如果 react-native 没有的话，web 端和 native 都要实现

antm web 澳门伦敦人端基础设施和 antd 是一样的，ios 和 android 是单独的基础设施，可以通过 npm 命令来直接运行展《拼音：zhǎn》示

三套组件jiàn 定位不一样配置也不一样底层组件配置多， antd主要满足蚂蚁金服的统一品牌，配置少，交互设计固定，面向用户是全栈用户和初级的前端用户扩展性也不一样只有组件不行，还需要应用框架，组件拼装，处理了展示层的问题，业务要和服务器进行交互，处理数据和联动，这样的话就需要应用框架，应用框架的话我们目前是有两套【练：tào】方案，我们之前开发了非常简单的一个数据绑定库，因为我们在做业务的时候发现经常碰到数据联动的需求我们采用经典的订阅和发布模式 另外对于一些特别复杂的业务，比如说像金融云，使用起来挺麻烦的

后面我们侧重于社区，会[繁：會]从社区(qū)里面找一些优秀的类库形成企业端的应用框架

单页应用需要一个库来响应URL变化获取数据获取数据之后传给React渲染，渲染之后响应交互，响应交互之后我们再处理数据，把这个数据再传给服务器，或者对这个数据进行一个二次加工，然后再传给对应的组件来进行服务(拼音：wù)，比（bǐ）较固定的流程

我们就[练：jiù]选择了一些优秀类库来实现这种场景比【读：bǐ】如说URL到数据这样的一个《繁：個》控制，我们可以通过 react-router 来实现，那么当这个UR发生变化之后，那么React就会重新渲染我们的组件，这个组件就可以获取数据，然后获取数据的话我们可以通过新的标准，以及 fetch 来方便我们和服务器来进行内部交互

有(pinyin：yǒu)了数据之后，通过redux把数据映[练：yìng]射到react，通过CSS module，避免了CSS冲突通过脚手架的形式来输出来，组件放在哪里，还有那个路由放在哪里，都是通过目录的形式来约定，这样的话就是避免了代码的腐化前面是说服务器交互的话，服务器交互hù 我们用的是 fetch/falcor两种方案基于 async/await 把异步回调转化为同步调用

另【练：lìng】外一个就是《shì》 falcor， 通过 falcor可以**减少了页面请求，特别是首屏的展现，提高响应速度

最后总结下开发流程，通过 npm 下载 antd 和其他需要的类库，然后拼装组件后结合应用架构完成业务需求业务落地主要是antd，从发布【pinyin：bù】一年多以来，覆盖全[练：quán]部系统40%，新的业务占有率是100%

未来是希望能够把静态类型引入到类库中去，这样的话减少传【chuán】统（繁：統）的后端开发人员(繁体：員)开发前端代码时的错误

移动端的目标是 web 和 native 齐头并进，达到组件API的兼容，能够在各个gè 终端快速迁移服务器端探索 falcor 或 graphql，通过这种统一数据模型来规范前后端交（读：jiāo）互 完善国际化的资源和文档，支撑蚂蚁金服的{pinyin：de}国际化发展

最后是业务模式库，和业务方面结合，规范《繁：範》我们的业务，通过提供通用的业务组件来更好的支持多业务线之间的共享（xiǎng）

本文链接：http://21taiyang.com/Business-Operations/22145257.html
react自己从服（读：fú）务器加载转载请注明出处来源