NewBee

作者: monicaqin | 来源:发表于2017-10-16 20:01 被阅读0次

概览:

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

相关文章

网友评论

      本文标题:NewBee

      本文链接:https://www.haomeiwen.com/subject/vxgkuxtx.html