概览:
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 ,增强前端能力,达到让大家用熟悉的前端技能就能拼装出满足自定义需求的功能。
-
在简单 > 实用 > 易用的设计原则下设计良好的底层,努力提高使用者的工作效率的同时,激发出大家贡献更好的实现思路的良性氛围。
网友评论