NewBee
2017-10-16 本文已影响0人
monicaqin
概览：
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 插件提高覆盖范围。
-
使用 typescript 和 vuejs (2.5+) 的方式来编写工具代码，提升对静态类型的理解和使用。
-
如今前端组件化技术选型多变杂乱，迭代形成一个稳定的自动化工作流程，释放大家更多的需求压力，腾出思考时间去尝试和应对更多挑战。
-
使用 reactive programming (响应式编程) 的 rxjs，把 nodejs 的一些功能封装成前端的 observerable ，增强前端能力，达到让大家用熟悉的前端技能就能拼装出满足自定义需求的功能。
-
在简单 > 实用 > 易用的设计原则下设计良好的底层，努力提高使用者的工作效率的同时，激发出大家贡献更好的实现思路的良性氛围。
