我用这一招让团队的开发效率提升了90%!

大家好&＃xff0c;我是坤哥

前不久在朋友圈发了一个动态&＃xff08;大家看到的封面图&＃xff09;&＃xff0c;获得了不少人点赞&＃xff0c;所以写了这篇文章&＃xff0c;希望对大家有些帮助。

创业之后&＃xff0c;由于前端迟迟招不到了&＃xff0c;所以我们团队三个后端暂时兼任了前端小程序开发的工作&＃xff0c;做过前端的都知道&＃xff0c;90% 的工作量其实是在 UI 的搭建上&＃xff0c;另外你自己写 UI 还有一个问题是 UI 还原度不太可能 100% 还原 UI 稿&＃xff0c;完工后 UI 要花不少时间在视觉走查上&＃xff0c;发现不对前端还要花不少时间调整。所以我一直在思考能否提升 UI 的开发效率。

上周五我准备根据需求开发新的页面时&＃xff0c;突然意识到我们的 UI 稿是根据 sketch 导出的 html 文件&＃xff0c;点击页面上每个元素&＃xff0c;右侧可以弹出一个属性栏&＃xff0c;如下图示&＃xff1a;

我们就是根据右边的属性栏来搭建 UI 的&＃xff0c;突然我灵光一闪&＃xff0c;既然我们属性栏里能查到每个元素的属性&＃xff0c;那我能不能根据这些属性来将其还原成代码呢。

当然我想到了别人可能也想到了&＃xff0c;为了避免重复造轮子&＃xff0c;于是就去网上搜了一下&＃xff0c;一搜发现还真的有&＃xff0c;阿里的 sketch 插件 imgcook 已经实现了将 sketch 还原成多端前端代码的功能&＃xff01;

于是赶紧用这个插件体验了一下&＃xff0c;将两个页面导成代码后运行了一下&＃xff0c;发现导成的 UI 还原度 100%&＃xff0c;只要把导成代码中的静态数据改成用接口返回的动态数据即可&＃xff0c;通过这种方式&＃xff0c;新页面 UI 的编写只要几分钟就完成了&＃xff0c;而如果自己苦哈哈地编写代码可能半天就搭进去了&＃xff0c;这对团队的生产力是多么巨大的提升&＃xff01;创业公司资源有限&＃xff0c;通过这种方式节省了巨量的人工和金钱的成本&＃xff01;

当然 imgcook 导出的规范与我们工程规范有些出入&＃xff0c;于是又写了一个脚本将其转成我们工程规范的项目文件

搞完这些后立马在团队里推广这个插件&＃xff0c;得到了大家的认可&＃xff0c;从此妈妈再也不用担心我的前端开发工作了

之前也一直收不到不少读者的来信&＃xff0c;一直在 CRUD 怎么才能提高自己&＃xff0c;相信这篇文章能给大家一些思考。

之前我在我是如何晋升专家岗的这篇文章也提过&＃xff0c;如果碰到这些重复&＃xff0c;低效的工作&＃xff0c;我们要多思考是否可以用脚本化&＃xff0c;产品化的工作来解决&＃xff0c;这样一来可以能提升团队的工作效率与解决问题的能力&＃xff0c;二来可以在团队建立足够高的影响力。一定要去发现解决痛点&＃xff0c;并争取成为解决方案的提出者

希望本文对大家有些帮助&＃xff0c;最后欢迎大家加我的微信好友&＃xff0c;我会在朋友圈不定期发一些技术和商业上的思考&＃xff0c;不少读者反馈受益良多 ^_^