NewBee项目实践

背景：

为了验证NewBee对我们的工作是否有价值，是否能提高工作效率，近期我们拿了一个运营活动来测试。为了测试结果的公平公正和精准，NewBee项目相关人员都没有参与和干涉，非常感谢damonpfliu(刘鹏飞)抽出时间协助我们做了这个验证。

项目实践报告：

应用宝 12 月活动 Demo

image.png

• 纯人工手写项目开发， 整个首页开发耗时约20 小时（2.5 天）

• 后续又使用NewBee对首页进行比开发，效果如下对首页进行比开发，耗时约 1小时

image.png

由于下图所展示原因，无法达到开发要求：

1. 有不同状态变化；

2. 动画效果；

   
   
   

   image.png

详细说明 ：

1. 设计师使用 一个图层处理 tab 效果（没有分图层） ，NewBee 目前只能把这一个图层切成张图，这里的实现是无法用一张来处理；
2. 开关控件有个动画，暂时 New Bee 不支持动画；
3. 点击可展示关卡会展开页面的部分隐藏区域， 会导致 NewBee生成的绝对定生成的绝对定位页面出问题，所以到此之后的页面，暂时无法用 New Bee 来处理

New Bee 可以完成上部的主体框架内容和一大部分细节 。部分细节也存在一些问题，比如按钮定位异常。 在项目开发中，顶部大约花费10小时 。使用 NewBee 后， 代码整理约需要 1小时 ，补齐顶部尚未完成的细节，约需要 补齐顶部尚未完成的细节，约需要 3小时 。下部未能导出的页面，还是原来开发时间 。在此页面合计约能节约6小时开发时间。

总结

不足	优点
1. 按钮定位异常 ，文字有些对齐不准	1. 快速还原页面 ，细节可以很快生成
2. 动态部分处理欠佳	2. 部分复杂结构 ，用图可以很简单解决
3. 大量使用图片，页面体积会增加	3. 此页面节约时间6小时 ，占开发时间 6/20/20 =30%

注：目前只有一个样本供测试，结论可能不一定精确，但至少暴露出之前没有发现的问题，同时也验证了开发效率的提升，给了我们继续折腾下去的信心。

开发计划

针对以上不足，后期规划如下办法来解决：

1. 丰富自定义模版
   目前的提供的默认模版是基于REM的绝对定位解决方案，导致页面有不同状态时，绝对定位限制了高度的变化无法自适应，后期会增加流式布局模版，从而达到自适应高度，以解决不同状态变化的情况。
   或者绝对定位的父级不依赖于body，当有状态变化时，下一个元素的相对父级是它的上一级父容器。
2. 动态效果会接入Annotate动画库
   后期会考虑接入weilong的annotate动画库以达到互补
3. 在上传中自动压缩图片
   通过自动压缩图片体来减少整个网页的体积，如果确实不需要图片的地方，可以先设置占位符后面再手动用代码来替代图片。

已完成的开发功能