React 技术栈在蚂蚁金服实践.docxVIP

React 技术栈在蚂蚁金服的实践 本文章来自于阿里云云栖社区 摘要：?在2017在线技术峰会“阿里开源项目最佳实践”上，蚂蚁金服前端工程师崔晓斌为大家带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始说起，着重说明React组件库antd相关技术及其应用，接着分析了dva，最后阐述了开源的意义。 在2017在线技术峰会“阿里开源项目最佳实践”上，蚂蚁金服前端工程师崔晓斌为大家带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始说起，着重说明React组件库antd相关技术及其应用，接着分析了dva，最后阐述了开源的意义。 3月1号下午，云栖社区将迎来2017在线技术峰会——“阿里开源项目最佳实践”。来自淘宝、天猫、阿里云、蚂蚁金服的8位项目核心成员将现场剖析阿里开源项目背后的技术实践，分享开源经验。其中，蚂蚁金服前端工程师崔晓斌为大家带来了“React 技术栈在蚂蚁金服的实践”的演讲。主要从研发的模式变迁开始说起，着重说明React组件库antd相关技术及其应用，接着分析了dva，最后阐述了开源的意义。 ? 以下是精彩内容整理： 蚂蚁金服于 2015 年发布并开源了基于 Ant Design 设计规范的 React 组件库 antd，从那时起，antd 就持续地得到社区的关注和帮助。经过近两年的发展，antd 在 GitHub 上面已经拥有超过一万的 Star，在内部也落地了超过 400 个项目。但其实， antd 只是我们推动 React 技术栈落地的一个切入点而已，为了进一步的提高开发效率同时也需要保证代码质量和项目的可维护性等，我们还需要提供 antd 的相关配套工具以及统一的应用架构。 ? 研发模式变迁 传统研发模式中，一个项目中会有相应的后端、前端、设计师、产品经理和测试，每一部分都有专业的人来做。其中，只有后端、产品经理和测试是与业务强绑定的，前端和设计师更多地是作为流动性的资源进行投放。 我们当时面临着前端和设计资源缺乏的问题，而我们内部有着大量的中后台系统，在资源缺乏的前提下不可能保证每一个系统都有足够的前端和设计资源。这些缺乏前端和设计资源的项目的用户体验自然不会特别好，开发效率也不会高。而且，前端??散在各个业务线，对其职业发展也是非常不利的。 因此，我们的痛点是前端与设计人员紧缺而导致的老系统难以维护、新系统研发效率不高，大量产品特别是企业平台类产品的用户体验还停留在初级阶段，用户体验亟待提升等。 那么，如何在资源紧缺的情况下支持大量中后台产品同时还要兼顾研发效率和用户体验？ 为了解决这个问题，我们进行了一次研发模式的变迁，从传统研发模式转变成全栈研发模式。每一个项目里面只会会分配相应的全栈开发和产品经理，前端和设计不再作为资源投入，仅提供前端或者设计的基础设施，也就意味着我们需要从一个资源型团队向服务型团队转变。 在这个过程中，我们推出了Ant Design中台设计语言。但 Ant Design只是一个切入点，为了进一步提高研发效率，而且还要保证代码质量和可维护性，还需要提供一些相关配套。 ? antd?相关配套 如果只是个人或者小团队使用antd组件，antd 自身已经能满足其使用场景。但像蚂蚁金服这样大规模使用时，仅仅提供组件库远远是不够的，还要提供相关的配套。目前提供的配套包括Riddle、Themer和脚手架市场。 Riddle 图为antd在蚂蚁金服内部落地的数据，antd在内部大概有四百多个系统在使用，这些系统还分散在各个业务线，不同的业务线都有使用antd的UI组件库。所以如果全栈开发在使用antd的过程中碰到一些bug，或是对某些场景有疑问时，我们就只能进行线上交流。为了提高沟通效率，我们需要一个工具来辅助交流。 关注了 ant-design 这个仓库的同学会知道，如果外部用户给我们提了一个 bug， 我们会要求他使用 CodePen 提供可重现的在线demo以排查问题，其实 Riddle也起到类似的作用。但之所以会开发Riddle而不是直接使用CodePen，是因为：首先，国内访问CodePen会面临网络问题；其次，CodePen的用户体验并不怎么好；第三，蚂蚁金服作为一个商业机构，并不是所有的代码都能开放出去，所以我们需要有一个自己私有的服务。 Riddle 的功能与 CodePen 相似，在左边编辑代码，右边即可实时预览。 Riddle在用户体验上的提升在于：使用Riddle时可以不需要任何配置就能直接使用ES2015和 JSX 的语法，还支持css-modules，同时，Riddle也做了优化，如果检测到代码使用了import语句，就会自动加载相应依赖，并且可以指定依赖的版本。 Riddle首页左侧有一些标签，右边是相应标签下的