使用imgcook辅助前端开发
在之前的文章《开发一个基于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 工作流程
- 设计图调整
- imgcook解析
- 生成代码
- 业务逻辑对接
imgcook 跨端开发
imgcook可以基于2个方面实现跨端开发。
- 使用imgcook直接生成多端代码
- 使用imgcook生成跨端平台代码（如：Taro、uni-app、Flutter）
imgcook 工程化
imgcook提供了2个用于工程化的工具：
- imgcook cli
- imgcook vscode plugin
前者适用于所有IDE，不方便的是要手动打开网页获取模块ID。后者针对 VSCode的插件，比cli要方便的多，可以自动下载代码和资源文件。
其他
比较有代表性的还有插件和组件库机制。但使用下载，发现最好的用法还是基于组件生成代码比较好用，其他的一些功能目前还是内部功能，并没有开放。
PS：
- 推荐Sketch，图片 & PS的生成没有Sketch生成的给力。
- Flutter的DSL很垃圾，尽管是官方的DSL。