React 技术栈在蚂蚁金服的实践

  • 时间:
  • 浏览:0
  • 来源:5分PK10_5分PK10官网

Redux作为有另一一俩个类库,并没办法 对代码作越多的约束,这是灵活性,但对于蚂蚁金服你你什儿 规模的使用而言,就会变得不可控;



项目中遇到的每个大问题全部都是非常多的库以供选折 ,给项目带来了技术选型的成本;

应用架构 dva

传统研发模式中,有另一一俩个项目中会有相应的后端、前端、设计师、产品经理和测试,每一主次全部都是专业的人来做。其中,不都可已经 端、产品经理和测试是与业务强绑定的,前端和设计师更多地是作为流动性的资源进行投放。

脚手架市场

什么都有亲戚亲戚.我歌词 提供了antd自己专用的脚手架市场,以便亲戚亲戚.我歌词 的用户通过它分享如何让查找脚手架。与 Yeoman的 generator相比,脚手架市场的脚手架开发难度相对较低。

对项目而言:

没办法 ,如何在资源紧缺的具体情况下支持一定量中后台产品同時 前要兼顾研发速率 和用户体验?



崔晓斌:蚂蚁金服前端工程师,目前主要负责 React 组件(如:antd、react-component)及配套工具(如:bisheng)的开发。



在你你什儿 过程中,亲戚亲戚.我歌词 推出了Ant Design中台设计语言。但 Ant Design而是 有另一一俩个切入点,为了进一步提高研发速率 ,如何让前要保证代码质量和可维护性,还前要提供你你什儿 相关配套。

进入主题配置页面,就都可不可不还能不能在左边配置相关变量,右边实时预览效果。最后都可不可不还能不能将变量表导出。现在如何让提供了不少可配置的变量,包括颜色、边框、按钮、字体、表单控件和圆角等等。

dva是有另一一俩个框架而非类库,它会对代码的写法和组织方式 有比较多的约束以保证不同团队写出的代码尽如何让类似;其次,它是基于 redux, react-router, redux-saga 的轻量级封装;最后,它借鉴 elm 的概念,包括Reducer, Effect 和 Subscription等。

如何让而是 自己如何让小团队使用antd组件,antd 自身如何让能满足其使用场景。但像蚂蚁金服而是 大规模使用时,仅仅提供组件库远远是匮乏的,前要提供相关的配套。目前提供的配套包括Riddle、Themer和脚手架市场。

在谈 dva 前一天,前要先了解一下蚂蚁金服 React 应用架构的历史。随便说说与antd同期,亲戚亲戚.我歌词 就开始英文英语 探索自己的应用架构Roof,如何让Roof@0.4就开始英文英语 在内控 大规模推广,但如何让Roof五种概念比较多,难于理解,什么都有在Roof@0.5中复杂了你你什儿 概念,并引进了Redux里面的概念,如何让在迭代的过程中,Roof 变得没办法 像 Redux,最后甚至直接用Redux作为核心。

图为dva写的相对简单的任务管理器,新建应用,并注册相关的model和路由后,就都可不可不还能不能给 React 组件订阅你你什儿 数据,最后启动就都可不可不还能不能把应用渲染到页面了。

Riddle 的功能与 CodePen 类似,在左边编辑代码,右边即可实时预览。

关注了 ant-design 你你什儿 仓库的同学好知道,如何让内控 用户给亲戚亲戚.我歌词 提了有另一一俩个 bug, 亲戚亲戚.我歌词 会要求他使用 CodePen 提供可重现的在线demo以排查大问题,随便说说 Riddle也起到类似的作用。但随便说说会开发Riddle而全部都是直接使用CodePen,是如何让:首先,国内访问CodePen会面临网络大问题;其次,CodePen的用户体验并不为什好;第三,蚂蚁金服作为有另一一俩个商业机构,并全部都是所有的代码都能开放出去,什么都有亲戚亲戚.我歌词 前要有有另一一俩个自己私有的服务。

Riddle在用户体验上的提升在于:使用Riddle时都可不可不还能不能不前要任何配置就能直接使用ES2015和 JSX 的语法,还支持css-modules,同時 ,Riddle也做了优化,如何让检测到代码使用了import一段话,就会自动加载相应依赖,如何让都可不可不还能不能指定依赖的版本。

以下是精彩内容埋点:



目前脚手架市场如何让开中放内控 ,都可不可不还能不能通过GitHub账号登录,如何让都可不可不还能不能在登录后以PR的形式将埋点出的脚手架提交到脚手架市场。





Riddle首页左侧有你你什儿 标签,右边是相应标签下的示例。通过打标签的方式 将Riddle的示例埋点起来,都可不可不还能不能起到Cookbook的作用,给全栈开发提供不同场景下的参考实现。

如何让,亲戚亲戚.我歌词 的痛点是前端与设计人员紧缺而原因分析分析的老系统难以维护、新系统研发速率 不高,一定量产品有点是企业平台类产品的用户体验还等待时间在初级阶段,用户体验亟待提升等。

蚂蚁金服于 2015 年发布并开源了基于 Ant Design 设计规范的 React 组件库 antd,从那时起,antd 就持续地得到社区的关注和帮助。经过近两年的发展,antd 在 GitHub 里面如何让拥有超过一万的 Star,在内控 也落地了超过 50 个项目。但随便说说, antd 而是 亲戚亲戚.我歌词 推动 React 技术栈落地的有另一一俩个切入点而已,为了进一步的提高开发速率 同時 也前要保证代码质量和项目的可维护性等,亲戚亲戚.我歌词 还前要提供 antd 的相关配套工具以及统一的应用架构。

研发模式变迁



同時 脚手架市场也支持在线上预览脚手架运行起来前一天的效果。

同時 ,Themer还是有另一一俩个主题共享平台,当亲戚亲戚.我歌词 配置好主题后,都可不可不还能不能保存到Themer上,自己都可不可不还能不能通过Themer找到他前要的主题直接使用,或基于该主题再进行配置。

开源是五种学习方式 ,开源都可不可不还能不能展示自己能力。



关于开源





antd 相关配套

没办法 。dva到底是哪此呢?

图为antd在蚂蚁金服内控 落地的数据,antd在内控 相当于 有四百多个系统在使用,哪此系统还分散在各个业务线,不同的业务线全部都是使用antd的UI组件库。什么都有如何让全栈开发在使用antd的过程中碰到你你什儿 bug,或是对你你什儿 场景有大问题时,亲戚亲戚.我歌词 就不都可不可不还能不能进行线上交流。为了提高沟通速率 ,亲戚亲戚.我歌词 前要有另一一俩个工具来辅助交流。

用户发起异步请求时页面或主次 UI 前要进入 loading 具体情况,这前要通过一遍遍重复地写 showLoading 和 hideLoading来实现;

Dva

对自己而言:

亲戚亲戚.我歌词 当时面临着前端和设计资源匮乏的大问题,而亲戚亲戚.我歌词 内控 有着一定量的中后台系统,在资源匮乏的前提下不如何让保证每有另一一俩个系统全部都是足够的前端和设计资源。哪此匮乏前端和设计资源的项目的用户体验自然越多再有点好,开发速率 而是 会高。如何让,前端分散在各个业务线,对其职业发展也是非常不利的。

Themer

新建有另一一俩个项目时,首不能自己新建相关的目录底部形态,如何让要配置项目依赖和工具,这是有另一一俩个繁琐并重复的劳动;其次,现在前端构建流程没办法 复杂,亲戚亲戚.我歌词 不如何让一开始英文英语 就把环境配置好。为了防止前面有另一一俩个大问题,亲戚亲戚.我歌词 都可不可不还能不能提供脚手架工具。

为了防止你你什儿 大问题,亲戚亲戚.我歌词 进行了一次研发模式的变迁,从传统研发模式转变成全栈研发模式。每有另一一俩个项目里面只会会分配相应的全栈开发和产品经理,前端和设计不再作为资源投入,仅提供前端如何让设计的基础设施,也就原因分析分析亲戚亲戚.我歌词 前要从有另一一俩个资源型团队向服务型团队转变。



在2017在线技术峰会“阿里开源项目最佳实践”上,蚂蚁金服前端工程师崔晓斌为亲戚亲戚.我歌词 带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始英文英语 说起,着重说明React组件库antd相关技术及其应用,接着分析了dva,最后阐述了开源的意义。

项目越多了,前要动态加载方案。

同時 ,示例也会按业务线进行划分,比如在同根小业务线,会有你你什儿 通用的代码,亲戚亲戚.我歌词 就都可不可不还能不能将哪此代码沉淀在Riddle里面作为有另一一俩个示例,如何让全栈开发就可根据前要参考哪此示例的实现,或直接拷贝使用。随便说说是把公共代码写成 Riddle 的示例而非业务组件,是如何让并全部都是所有业务代码都具备抽象成业务组件的价值,什么都有不都可不可不还能不能作为Riddle示例占据 。

但 Redux 的使用也带来了新的大问题:

出错防止太繁琐,每个异步 saga 全部都是 try .. catch;

Redux



什么都有亲戚亲戚.我歌词 推出了自己的应用架构dva,而是 为了防止里面的大问题。dva开放以来,如何让得到了广泛的认可,现在在github上如何让有2500个star,如何让得到了大V的支持和推广。现在dva如何让是亲戚亲戚.我歌词 内控 主推的应用架构,有接近20%系统在使用dva。

如何让前端的业务逻辑和数据层全部都是变得没办法 复杂,亲戚亲戚.我歌词 在使用React时不如何让仅仅使用React原生提供的数据通信方案,或直接用React组件管理业务逻辑,什么都有前要框架帮助防止哪此大问题。同時 ,亲戚亲戚.我歌词 内控 有近50个系统在使用React技术栈,不如何让让每有另一一俩个项目自己去折腾一套自己数据通信等方案。什么都有亲戚亲戚.我歌词 要提供有另一一俩个统一的应用架构,也而是 dva。



在 Roof 变得和 Redux相差无几后,不少项目就开始英文英语 直接使用Redux了,直接使用 Refux都可不可不还能不能享受到什么都有好处:

Riddle

通过dva-cli,亲戚亲戚.我歌词 都可不可不还能不能生成通用的脚手架。但往往还前要对脚手架进行进一步的配置,能够符合自己所开发项目的需求。什么都有,全栈开发人员为了方便,如何让会选折 直接拷贝同根小业务线里的其它项目作为脚手架使用。但拷贝过来的项目会有一定量不前要的代码,配置而是 一定是前要的,甚至依赖全部都是旧版本。什么都有亲戚亲戚.我歌词 要针对不同的使用场景,有针对性地提供符合其特点的脚手架。

开源不仅仅是开放源码。

dva仅有俩个API,支持HMR,支持 SSR (ServerSideRender),支持 Mobile/ReactNative,支持 TypeScript,支持路由和 Model 的动态加载,并提供了完善的语法分析库 dva-ast。

使用过 antd的同学应该会知道,随便说说 antd的主题是都可不可不还能不能配置的,通过配置变量表里的变量都可不可不还能不能修改 antd的主题。但你你什儿 配置方式 并不有点友好,如何让它前要使用到构建工具,什么都有亲戚亲戚.我歌词 提供了Themer你你什儿 主题配置平台。

3月1号下午,云栖社区将迎来2017在线技术峰会——“阿里开源项目最佳实践”。来自淘宝、天猫、阿里云、蚂蚁金服的8位项目核心成员将现场剖析阿里开源项目肩上的技术实践,分享开源经验。其中,蚂蚁金服前端工程师崔晓斌为亲戚亲戚.我歌词 带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始英文英语 说起,着重说明React组件库antd相关技术及其应用,接着分析了dva,最后阐述了开源的意义。

开发功能时,有另一一俩个功能的代码分散在 reducers actions sagas 等目录下面,前要来回切换,影响专注力;