NewBee

概览：

NewBee是一款将sketch文件转化为html/css插件。它能可视化快速生成页面，从而降低开发成本，高度还原设计稿，让前端从重复工作中解放出来专注更有挑战的事情。

解决问题：

• 实现读取设计稿基本元素功能，再使用读取的数据生成为页面；
• 针对运营类需求，提供基础模板，后期接入动效库实现复杂动画交互；

• 针对长期维护项目，提供更方便的模板开发能力，比如将组件库导入到NewBee，实现复杂布局生成功能；

  
  
  image.png

预期效果：

区别	传统重构方式	NewBee开发方式
自动生成代码占比	10%	80%
减少设计走查	自测（0%）	35%
代码风格统一性	30%	90%
提高工作效率	0	50%

NewBee生成页面方式能覆盖小组工作量占比约70%，相较传统工作方式有较大优势。

原理：

flow.png

项目进度：

image.png

已完成工作：

• 设计稿读取与解析；
• 初步生成页面；

后期计划：
现阶段除了 20% 的活动页面需求（PS设计稿），剩下 80% 以上（sketch设计稿）的需求都是 newbee 提高工作效率的目标项目，后面会考虑跨平台制作 ps 插件提高覆盖范围。

1. 使用 typescript 和 vuejs (2.5+) 的方式来编写工具代码，提升对静态类型的理解和使用。

2. 如今前端组件化技术选型多变杂乱，迭代形成一个稳定的自动化工作流程，释放大家更多的需求压力，腾出思考时间去尝试和应对更多挑战。

3. 使用 reactive programming (响应式编程) 的 rxjs，把 nodejs 的一些功能封装成前端的 observerable ，增强前端能力，达到让大家用熟悉的前端技能就能拼装出满足自定义需求的功能。

4. 在简单 > 实用 > 易用的设计原则下设计良好的底层，努力提高使用者的工作效率的同时，激发出大家贡献更好的实现思路的良性氛围。