react自己从服务器《qì》加载

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

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

基于《繁：於》 React 的前端架构在蚂蚁金服的实践

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

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

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

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

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

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

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

我后面所讲的前端架构面向的观众其实都是全栈(拼音：zhàn)的开发，不是[练：shì]前端开发，所以我们的架构会有一些改变

澳门威尼斯人首先我们选择的底层类库是React，我们为什么要选择React技术站，而没有像以前那样我们基于jquery或者 kissy继续做，其(pinyin：qí)实有一些原因

首先React技术栈是比较先进的，它是目前流行的函{pinyin：hán}数式，基于不可变[繁体：變]数据并且它是非常务实，在 facebook全网都有应用《读：yòng》，经过大量实战考验

第二个《繁：個》是生态圈非常繁荣，React是从2013年发《繁体：發》布到现在 star 一直在《练：zài》涨，现在已经四万多了，并且 redux， react-router等等这些类库层出不穷，并且质量非常高

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

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

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

我们要打造适合全栈的前端基础设施，这个《繁体：個》是我们目前的一个架构图

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

首先是包管理器，生态圈很重要，npm 是整个世界上所有的语言中生态《繁：態》最繁华的，里面基本上是应有尽有，所以说我们选择了 npm，并且也是React生态圈推荐的一个管理工《拼音：gōng》具

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

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

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

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

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

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

源码 src 部分是ES6，目前是向 typescript迁移，并且部分{读：fēn}组件的话会适配 react-native如果基于这套脚手架来实现的话，会支持很多开源的一些基础设施，比如 travis 持续集成平台，coverall 测试覆盖(繁体：蓋)率平台

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

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

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

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

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

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

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

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

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

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

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

antm web 端基础设施和 antd 是《练：shì》一样的，ios 和 android 是单独的基础设（繁体：設）施，可以通【pinyin：tōng】过 npm 命令来直接运行展示

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

后面(繁体：麪)我们侧重于社区，会从社区里（繁：裏）面找一些优秀的类库形成企业端的应用框架

单页应用需要一个库来响应URL变化获取数（繁：數）据获取数据之后传[chuán]给React渲染，渲染之后响应交互，响应交互之后我们再处理数据，把这个数据再传给服务器，或者对这个数据进行一个二次加工，然后再传给对应的组件来进行服务，比较[繁体：較]固定的流程

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

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

另娱乐城外一个就是 falcor， 通[拼音：tōng]过 falcor可以**减少了页面请求，特别是首屏的展现，提高响应速度

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

未来是希望能够把静态类型引入到类库中去[练：qù]，这样的话减少传统的后端开发人员开发前端代[dài]码时的错误

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

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

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