Hubble A/B test平台前端项目开发浅谈

前言

现在Hubble abtest平台已经正式上线了，至于技术实现方案我在其中一篇文章做了一些分享（查看react技术栈实践），本文主要分享下一些开发过程中的遇到问题思考总结，以及简单介绍下我们平台的技术实现，希望对大家有些帮助。

项目落实过程

1. 技术选型

技术选型上同事思考了很久，摆在我们有两个方案：第一个继续沿用开发Hubble系统的那套，即基于regular框架实现；还有一个就是react那套了，出现这个选项也是有历史原因的。当然最终我们还是选择了react技术，有以下几点考虑：
1. regular那套官方已不再维护了，生态链不完善，很多的UI库都需要我们自己开发；
2. Hubble系统某些模块我们已经使用react开发了，继续使用的学习成本低；
3. react生态系统完善，可用的UI库多，UI库我们选择了antd；
4. abtest平台时间充裕，年前就定好的规划，前期允许我们多尝试；
5. 我们前端同学之间都有共同的目标，这个很重要；

2. 尝试采坑阶段总结

react技术栈上使用react+redux+antd实现，但由于我们之前都没有这方面的经验，所以尝试的过程稍微有点曲折。
1. 首先我们打算做成单页面形式，于是引入了react-route，实践这块最大难点我觉得还是在于不断踩坑，之前只需nginx跳转就好，现在得在前端去控制，而且nginx配置还得修改，路由变动按需加载如何实现等等。面对这一个个问题，千万不能自乱正脚，万事开头难就是这个道理。至于这些问题的解决思路可以查看上面说的那篇文章。
2. 接下来就是接入antd这个UI框架了，选择它的原因在于适合平台开发。尝试的过程也是痛苦的过程，比如组件样式修改、组件API使用姿势学习、组件线上打包竟然一闪一闪问题、按需引入问题等等。但总的来说，它确实节省了大量开发时间。
3. 还有就是webpack打包方案制定了，这个制定好了开发也基本都能走通了，这个过程很痛苦。我们发觉网上说react很简单，其实是骗人的，react根本就不简单，学习曲线很陡峭，各种引入插件就让我们眼花连乱，无从下手。至于我们的项目webpack脚手架搭建思路，也可以参考下我上面那篇文章。

在采坑阶段，这些问题解决，离不开团队同事的帮忙。比如nginx配置问题，我们前端本地nginx其实很简单，但是到服务端由于生产环境的问题，本地配置方案根本不能用，这时候后端同学帮忙一起解决了。比如我对redux理解上其实是有误的，就因为同事的指点才走出误区。至于前端合作开发上，我们制定了一系列的规则，然后开发过程中不断去遵循、完善这些规则，这些提升代码一致性、开发效率上的规则，离不开团队成员的合作努力。

所以新的技术方案的落实，团队支持非常重要，这个也是对我们Hubble团队很感动的地方。

3. 实践阶段

在实践前，我们开发、产品、交互之间做了非常多的准备工作，最重要的就是明确这个平台的作用和方向。具体落实到开发时，我们分解了各个模块，模块化思想非常重要，这也是采坑阶段已考虑进去的。
abtest平台web前端开发工作量主要分为三大类：UI开发、数据处理开发、js-sdk开发。
UI开发我们已使用antd这个UI库，只需样式和使用姿势上稍作处理即可，主要有几点工作：
1. 按需引入，调用API正确配置；
2. 公共样式处理；
3. 使用 styled-components 插件解决antd组件样式修改；
4. 开发自定义组件库；
5. 跟数据集成，UI组件之间集成；
6. 状态变动组件样式变动；

数据处理以及状态管理，我们引入了redux库，主要有这几点工作：
1. UI变动触发action绑定实现；
2. 远程获取数据状态处理；
3. 数据处理以及业务实现；

js-sdk开发，主要几点工作：
1. 新增abtest模块，支持编程实验、多链接实验；
2. 新增abtest调试模块，支持编程实验调试、多链接实验调试；
3. 新增abtest事件，实现触发机制；
4. 跟现有sdk模块集成；
5. 跟abtest平台的交互实现；

这些实践过程中，并非一帆风顺，主要体现在以下几点：
1. antd组件一些样式修改和使用，比如时间组件样式自定义、下拉框多层联动实现、表格自定义数据展示以及自适应、列表搜索功能问题、多个可拉动进度条样式自定义卡使用姿势问题；
2. 图表库自定义使用问题，比如置信区间的表示；
3. 公共样式如何写的探讨；
4. 公共业务组件如何开发，主要焦点是走action管理还是单独管理，最终多个实践还是单独管理比较适合我们项目；
5. 登录状态管理问题，已经引发了一些BUG，后来还是通过接口再次检测更新来解决；
6. Hubble系统和abtest系统之间互相跳转的状态共享问题；
7. 实验调试功能，内嵌页和sdk之间的数据通信问题；
8. js-sdk设计实践过程中，遇到的种种坑；
9. 跟后端联调过程中，遇到各种异常情况处理、构造测试数据、数据分析结果合理性等问题解决；
10.如何帮助测试同事构造测试数据、提供sdk测试工具；

最后还有demo产品的abtest数据构造，这里不再讲述，有兴趣的同学可以访问我们官网的demo产品查看体验。

结尾

结尾阶段，本文分享了一个新平台，从技术选型到中间技术尝试，以及到落实的过程，以及落实过程中需要处理什么工作，以及遇到了哪些问题。

这里推荐下我们Hubble数据分析和A/B test平台：点击查看Hubble平台。

@作者：白云飘飘（534591395@qq.com）

@github: https://github.com/534591395

欢迎关注我的微信公众号：
或者微信公众号搜索 新梦想兔，关注我哦。