react自己从(繁：從)服务器加载

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

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

基于 React 的前端架构澳门金沙在蚂(繁体：螞)蚁金服的实践

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

首先介绍一下蚂mǎ 蚁金服前端的业务特点蚂蚁金服是由支付宝进化而来的，现在是四大业务，支付宝个人消费开云体育，然后是蚂蚁聚宝，主要侧重于理财的，网上银行侧重于企业银行业务的开发，还有一个是侧重于个人消费的O2O的口碑，这个是我们的四大业务

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

除了移动端的东西之外，每一个APP的业务下面都会有对应的很多的后台业务支撑，比如做运营的话，就需要运营平台，阿里的特色就【pinyin：jiù】是特别注重运营，其实我们内部有很多这种运营平（练：píng）台，都是给小二用的《读：de》

然后【练：hòu】对于蚂蚁的话，蚂蚁有很多的商家，商家也需要商[拼音：shāng]户平台来管理自己的运营只靠专业前端是那么对于前端来说，这么多业务在国内前端都普遍欠缺的情况根本做不过来的所以蚂蚁的一个战略就是说前端不要只做前端的事情了，就是把这些业务的前端工作教会全栈来做

前端就要像DBA一样要提供一些业（读：yè）务支持，提供一些资源服务(拼音：wù)的一些支持转型就是说我们要走全站研发这样一个模式业务需求最好都是有对应的全栈来做，然后结合产品经理做快速响应需求而前（拼音：qián）端要做的事情就是要打造一个适合全栈开发的基础设施

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

我后面所讲的前端架构面向的观众其实都是全栈{pinyin：zhàn}的开发，不是前端开发，所以我们的架构会有一些{拼音：xiē}改变

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

首先React技术栈是比较先进的，它是目前流行的函数式，基于(繁：於)不可变数据并且它是非亚博体育常务实，在 facebook全网都有应用，经过大量实战考验

第二个是生态圈非常繁荣，React是从2013年发布到现在 star 一直在涨，现在已经四万多了，并且《读：qiě》 redux， react-router等等这些类库层出不穷（繁：窮），并且质量非常高《gāo》

第三个是适用性广，适用性广的话也是根据我们的特点，我们要打造全栈工程师，就希望他们能够用尽量少的技术来应对各种应用场景，无论是 native 端还有web端都希望(读：wàng)用一种技术来开发，而React的话，就是提供了我们这样的技术，比bǐ 如说React和React-Native

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

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

我们要打造适合全栈的前端基础设施，这个是我们目{mù}前的一个架构图

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

首先是包管理《练：lǐ》器，生态圈很重要，npm 是整个世界上所有的语言中生态最繁华（繁：華）的，里面基[读：jī]本上是应有尽有，所以说我们选择了 npm，并且也是React生态圈推荐的一个管理工具

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

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

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

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

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

组件规范包括assets，样式的话我们目前选[繁：選]择是BEM，然后通过（繁：過） prefixCls 来适配不同的设计，这样的话底层组件不仅能够适配蚂蚁金服的 ant design 设计上，还可以适配到阿里巴巴的其它(繁：牠)一些设计

源码 src 部分是ES6，目前是向 typescript迁移，并（读：bìng）且部分组件的话会适配 react-native如果基于这套脚手架来实现的话，会支(练：zhī)持很多开源的一些基础设施shī ，比如 travis 持续集成平台，coverall 测试覆盖率平台

组件开发时通过 npm run dev启动开发服务器，可以访问示例地址进行开发测试通过 npm test在终端测试，还可以进行 npm run chrome-test，在 chrome 中进行可视化《练：huà》测试，还可以进《繁：進》行debug

通过 pre-commit 进行提交检测，代码检测通过后才会真正[读：zhèng]的提交到代码库

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

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

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

后面两个就是它是有统{繁：統}一的交互和动画，形成一个统一的品牌输出

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

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

使《shǐ》用的时候不需要关心样式，和那个JAVA里面的import是一样的直接通过标签化的使《拼音：shǐ》用，进行一些业务处理会有一个 babel 插件进行按需加载，如果直接用 import antd的话，打《拼音：dǎ》包后会很大所以有了这个插件之后，可以进行按需加载

Ant.design是一个SPA的单页面应用，依赖一个{练：gè}工具叫 bisheng.目【pinyin：mù】前 antd在国内外取得了比较好hǎo 的影响目前 star有4200多了

ant design mobile一方面要考虑web端，要考虑小屏场景，另外《wài》一个就是我们要考虑react-native，能够同时用在web和react-native，并且通过React组件的封装达[繁：達]到一致的API比较 react-native，如果 react-native 有的组件，web端也要实现，如果 react-native 没有的话，web 端和 native 都要实现

antm web 端基础设施和 antd 是一样的，ios 和 android 是单独的{练：de}基础设shè 施，可以通过 npm 命令来直接[练：jiē]运行展示

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

后[繁：後]面我们（繁：們）侧重于社区，会从社区里面找一些优秀的类库形成企业端的应用框架

单页应用需要一个库来响应URL变化获取数据获取数据jù 之后传给React渲染，渲染之后响应交互，响应交互之后我们再处理数据，把这个数据再传给服务器，或者对这个数据进行一个二次加工，然《拼音：rán》后再传给对应的组件来进行服【pinyin：fú】务，比较固定的流程

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

有了数据之后，通过redux把数据映射到react，通过CSS module，避免了CSS冲突通过脚手架的形式来输出来，组件放在哪里，还有那个路由放在哪里，都是通【练：tōng】过目录的形式来约定，这样的话就是避免了代码的腐化前面是说服务器交互的话，服务器交互我们用的是 fetch/falcor两（繁体：兩）种方案基于 async/await 把异步回调转[拼音：zhuǎn]化为同步调用

另外一个（读：gè）就是 falcor， 通过 falcor可以**减少了页面请求，特别是（拼音：shì）首屏的展现，提高(练：gāo)响应速度

最后总结下开《繁体：開》发流程，通过 npm 下载 antd 和其{拼音：qí}他需要的类库，然后{pinyin：hòu}拼装组件后结合应用架构完成业务需求业务落地主要是antd，从发布一年多以来，覆盖全部系统40%，新的业务占有率是100%

未来是希望能够把静态类型{xíng}引入到类库中去，这样的话减（繁：減）少传统的后端开发人员开发前端代码时（繁体：時）的错误

移动端的目标是 web 和 native 齐头并进，达到组件API的兼容，能够在(练：zài)各个终端快速迁移服务器端探索 falcor 或 graphq澳门博彩l，通过这种统一数据模型来规范前后端交互 完善国际化的资源和文档，支撑蚂蚁金服的国际化发展

最后是业务模式库，和业务方面结合，规范【繁：範】我们的业务，通过提供通用的业务组件来[繁体：來]更好的支持多业务线之间的共享

本文链接：http://21taiyang.com/Family/22145257.html
react自己从(繁：從)服务器加载转载请注明出处来源