闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

使用imgcook辅助前端开发

2021-03-07 约 1 分钟读完 搬砖秘籍

在之前的文章《开发一个基于uni-app的imgcook DSL》中开发了一个团队使用的uni-app的DSL,基本可以凑合使用了。前几天在团队内做了个imgcook小分享,这里也记录一下使用imgcook辅助前端开发的过程。

什么是imgcook

imgcook 是阿里巴巴集团在前端智能化方向的落地产品,专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。

核心功能:Sketch / PSD / Image -> Code

有哪些特性

高效:能够利用智能化手段,在对设计稿轻约束的前提下实现高度还原,助力前端与设计师高效协作(P5)

高还原度:对设计师而言,减少视觉走查成本。

高兼容性:对测试而言,减少 UI 适配成本。

极速上线:前端而言,可自动生成视图、数据字段绑定、组件和部分业务逻辑代码

适用场景

移动端细粒度模块开发场景 - 特别推荐

移动端活动页 - 特别推荐

移动端全页面开发 - 推荐

PC 端 toC 应用 - 推荐

PC 端富交互应用 - 不推荐

游戏场景 - 不推荐

行业应用状况

2020年imgcook助力天猫淘宝双11会场90.4%新模块的代码智能生成,编码效率提升68%。

2019年天猫淘宝双11会场模块使用imgcook智能生成的代码可用率(上线后被保留的代码行数占总上线代码 行数)为79.34%。

imgcook 工作流程

  1. 设计图调整
  2. imgcook解析
  3. 生成代码
  4. 业务逻辑对接

imgcook 跨端开发

imgcook可以基于2个方面实现跨端开发。

  1. 使用imgcook直接生成多端代码
  2. 使用imgcook生成跨端平台代码(如:Taro、uni-app、Flutter)

imgcook 工程化

imgcook提供了2个用于工程化的工具:

  1. imgcook cli
  2. imgcook vscode plugin

前者适用于所有IDE,不方便的是要手动打开网页获取模块ID。后者针对 VSCode的插件,比cli要方便的多,可以自动下载代码和资源文件。

其他

比较有代表性的还有插件和组件库机制。但使用下载,发现最好的用法还是基于组件生成代码比较好用,其他的一些功能目前还是内部功能,并没有开放。

PS:

  1. 推荐Sketch,图片 & PS的生成没有Sketch生成的给力。
  2. Flutter的DSL很垃圾,尽管是官方的DSL。