react自己从服务器[读：qì]加载

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

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

基于 React 的前端架[拼音：jià]构在蚂蚁金服的实践

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

首先介绍一下蚂蚁金服前端的业务特点蚂蚁金服是由[pinyin：yóu]支付宝进化而来的，现在是四大业务，支付宝个人消费，然后是蚂蚁聚宝，主要侧重于理财的，网上银行侧重于企业银行业务的【pinyin：de】开发，还有一个是[读：shì]侧重于个人消费的O2O的口碑，这个是我们的四大业务

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

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

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

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

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

我后面所讲的前端架构{pinyin：gòu}面向的观众其实[shí]都是全栈的开发，不是前端开发，所以我们的架构会有一些改变[繁：變]

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

首先React技术栈是比较先[xiān]进的，它是目前流行的函数式，基于不可变数据并且它是非常务实，在 facebook全网都有应用，经过大量{liàng}实战考验

第二个是生态圈[pinyin：quān]非常繁荣，React是从2013年发（繁体：發）布到现在 star 一直在涨，现在【pinyin：zài】已经四万多了，并且 redux， react-router等等这些类库层出不穷，并且质量非常高

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

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

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

我们要打造适合全栈的前{读：qián}端基础设施，这个是我们目前的一个架构图

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

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

在我们内部的话，其实阿里在(读：zài)很早以前就已经开始了 nodejs 应用，在我(读：wǒ)们内部的话，npm 也是有对应的镜像 tnpm，这样的话，前端可以把我们内部的一{拼音：yī}些应用模块也发到 tnpm 去，各个业务之间想共享模块的话，就直接从 tnpm 拉取就可以了，另外为后期的优化打造了一个坚实的基础

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

最终输出是一个脚手架，因为直接用工{读：gōng}具的话，还是比较复杂的因为还知zhī 道它的很多命令啊，怎么用啊，直接输出脚手架，我们会把这[繁：這]些开发工具通过npm script来暴露出来，这样就可以直接进行开发还有构建等等，不需要了解更多工具细节了

我们目前组件分成三大部分，首先是底层的react-component，这个在 github上开源了，这些底层组件的话通常是不涉及设计的，就是它没méi 有设《繁：設》计要素在里面《繁体：麪》，只是实现结构和功能，那么在基于这个组件，会有基于我们的设计的封装，还有移动端的封装

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

组件规[繁体：規]范包括assets，样式的话我们目前选择是BEM，然后通过 prefixCls 来适配不同的设计，这样的话底层《繁体：層》组件不仅能够适配{拼音：pèi}蚂蚁金服的 ant design 设计上，还可以适配到阿里巴巴的其它一些设计

源码 src 部分是ES6，目前是向 typescript迁移，并且部分组件的话会适配 react-nat极速赛车/北京赛车ive如果基于这（繁体：這）套脚手架来实现的话，会支持很多开源的一些基础设施，比如 travis 持续集成平台，coverall 测试覆盖率平台

组【繁体：組】件开发时通过 npm run dev启动开发服务器，可以访问示例地址进行开发测试通过 npm test在终端测试，还可以进行 npm run chrome-test，在 chrome 中进行可视化测试，还[hái]可以进行debug

通过 pre-commit 进行提交检测，代码检测通过后才会真正的(读：de)提交到代码库

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

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

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

后面【miàn】两个就是它是有统一的交互和动画，形成一个统一的品牌输出

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

我们也在进行国际化，蚂蚁金服现在也在进行【xíng】一些国际化的业务，那么对于多语言的支持也是有非常强烈的需求同时我们在国外的话也有一些影响，一些国[繁体：國]外的开发者希望我们能够更国际化一些，现在会增加一些国际化的文件，对文档进行翻译，我们是和国外的开发者一起进行的，我们翻译之后会请那些国外开发者来 review

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

Ant.design是一个SPA的单页面应用，依赖一个工具叫 bisheng.目《练：mù》前 antd在国内外取得了比较好的影yǐng 响目前 star有4200多了

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

antm web 端基础设施{pinyin：shī}和 antd 是一[yī]样的，ios 和 android 是单独的基础设《繁体：設》施，可以通过 npm 命令来直接运行展示

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

后面我们侧重于社区，会从社区里面找一些[pinyin：xiē]优秀的类库形(xíng)成企业端的应用框架

单页应用需要一个库来响应URL变化获取数据获取数据之后传给React渲染，渲染之后响应交互，响应交互之后我们再处理数据，把这个数据再传给服务器，或者对这【zhè】个数据进行xíng 一个二次加工，然后再传给对应的组件来进行服务，比较固定的流程

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

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

另外一个就是{读：shì} falcor， 通过 falcor可以**减少（shǎo）了页面请求，特（tè）别是首屏的展现，提高响应速度

最后总结下开发流程，通过 npm 下载 antd 和其他需要的类库，然后拼装组件后结合应用架构完成【chéng】业务需求业务落地主要是antd，从发布一年多以来，覆盖全部系（繁体：係）统40%，新的业务占有率是100%

未来是希望能够把静态类型引入到类库中去，这样的话澳门新葡京减[繁体：減]少传统的后端开发人员开发前端代码时的错误

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

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

本文链接：http://21taiyang.com/Gyms/22145257.html
react自己从服务器[读：qì]加载转载请注明出处来源