Deco入门须知

前言

目前，各类通过设计稿直接生成前端代码工具层出不穷，目的就是大大的节省前端开发时间，甚至于取代前端。这是一个美好且可能在不久的将来会实现的梦想。不知道各位前端人士有没有感觉到危机（哈哈哈），目前来看危机不存在，福利倒是不少，因为目前至少好几款设计软件已经生成了大部分的css,这已经为我们节省了不少的开发量。但是前端的主要工作量不是在css上，所以大家尽可能的放心，我们一时半会是不会被机器取代的。
最近学习了一款这样的工具，它可以生成好几端代码，也包括js。希望和大家分享，了解一下这些个代码生成工具干了什么，是什么底气给了它们想要取代前端的野心。

什么是Deco

Deco 是 Design 和 Code 的两个词的合并，代表 Design To Code，即从设计稿生成代码。

Deco 利用人工智能，结合各类自动化、工程化等手段，将 Sketch、PS、图片类的设计稿转换生成还原度高、可维护强的代码，致力于突破业务生产力瓶颈，为前端大规模、高效率生产提供赋能。

Deco 通过标准化的设计物料输入及楼层页面输出，帮助沉淀设计规范和统一开发标准，推进流程的标准化建设，降低人力成本和流程损耗，进一步提高生产质量。

使用Deco前需要知道以下几点

1. 使用此插件适用范围 Mac ，目前仅支持 Sketch 工具，请确保安装 Deco 插件前，已经安装了 Sketch 工具
2. 上传的设计稿需要sketch文件版本7-8（需要和设计要原文件，不能relay下载），提前和设计人员提要求
3. Deco支持开发JS的各种逻辑，但是提效主要在CSS层面
4. 你仍然需要一个完整的项目架构，因为Deco只负责代码部分，没有打包和处理各种兼容的东西，甚至没有scss
5. Deco只生成Div和span、text等元素，没有Form表单的东西
6. Deco可以生成React、Vue、Taro代码
7. Deco依赖制作设计稿的编组功能，如果编组混乱，可能导致无法使用（Dom结构混乱）

什么样的项目适合Deco

1. 使用React/Vue/Taro开发的 toC 的PC和M页面都可以用Deco写
2. 因为后台有很多表单，Deco不能生成input等表单东西，后台用element-ui似乎更方便，当然如果后台页面多数都是展示层东西，也可以使用Deco
3. 因为Deco主要书写Html和Css部分，所以，一个全新的页面，或者一个比较独立的模块，比较适合用Deco

Deco能做到的有哪些

关于DOM结构

自动生成DOM结构

Deco可以直接生成你要的Dom结构，并命名好class

• 优点

1. 上传整个页面后，可以在Deco中标记组件，可以直接生成组件的文件目录。
2. Index页面里面直接生成代码结构，包括生命周期函数。
3. 直接生成对应DOM的css文件，对于部分要求css书写的项目，可以直接使用

• 缺点

1. 如果上传页面比较负责，Deco展示会和设计稿差距较大，需要分楼层上传模块
2. 生成的DOM结构依赖视觉人员的设计（编组），可能导致DOM结构不是要求的父子关系。导致不能用。所以需要提前和视觉要求好，合理编组
3. 可能由于Deco支持Taro等原因。生成的DOM结构基于Native结构，会导致DOM冗余（文字必被span包裹，span必被div包裹）
4. 生成的DOM仅限于：div、span、img、text基本标签。没有i、strong、table、input等标签。
5. 如果再次上传相同的设计稿，会生成不同的class,不利于团队间共同开发

关于CSS

自动生成CSS文件

Deco可以直接生成css，并且为你的上传模块包裹一个具有随机数Class的父盒子，以保证样式隔离

• 优点

1. 直接生成对应DOM的css文件，对于部分要求css书写的项目，可以直接使用
2. 文件单独生成，可以直接拷贝使用
3. 最外层有唯一随机数的class，保证样式隔离

• 缺点

1. 生成的css没有兼容写法，需要自己项目框架打包配置兼容
2. 对于一些行内元素设置的宽、高等属性，书写冗余
3. 某些元素的宽、高都会写死，几乎需要全部重新定义宽高值
4. 语意化不够，所有的class命名几乎都是 text1、text2、text3 …;wrapper1、wrapper2、wrapper3。对于需要常常维护的大型项目，需要全部重新定义class。
5. class样式不能归类，比如几乎相同的样式标签，都会生成不同的class,样式分开写，导致css文件大且冗余
6. 关于渐变样式，icon插图等都会生成自己图片插入（jsf地址开头）；实际开发仍然需要和设计人员要切图，一方面图片清晰度不够，另一方面图片储存空间及时效不确定。
7. 会出现Deco样式和设计稿出入很大，所以所有的css需要自己再过一遍。

关于数据

1. 生成组件

当你点击一个模块，标记组件后，Deco自动生成生命周期结构，并添加基本的生命周期函数

• 优点

1. 标记组件的时候，直接命名组件名称，生成对应组件的css文件及js文件架构。省去各种命名步骤
2. 标记组件简单，可以在Deco上一顿操作，标记好所有想要命名的组件

• 缺点

1. 如果父组件里面的样式class和子组件的class重名，可能会导致两个css文件样式混乱。

2. 支持网络请求

Deco可以发送网络请求，直接在Deco上调用预发接口，返回数据结构，并做state的绑定，然后渲染Deco页面，实现本地预览

• 优点

1. 支持在Deco上直接调用网络接口，可以实现本地预览真实项目效果

• 缺点

1. 网络请求只能分开写，每个接口都需要单独写fetch事件，不能实现公共封装，比较繁琐

3. 数据绑定

从接口拿到的数据，支持以props方式绑定到DOM上，直接渲染接口数据

• 优点

1. 直接在DOM上以变量形式接入接口字段，生成最终带有变量及js逻辑的DOM代码
2. 支持js编辑，预览js是否书写正确

• 缺点

1. 这个功能很好，没啥缺点，就看你用不用。使用熟练的话，可以节省DoM变量替换的很多时间

4. 添加事件

支持添加基本的事件，包括：click、scroll、touchstart、touchend、touchmove、change、foucs、blur、keydown、keyup、keypress

• 优点

1. 直接在DOM上点击添加事件，选择好事件后，Dom结构上会绑定上相应的事件。可以提前给各个dom绑定上事件，具体js可以在项目中编辑。节省时间

• 缺点

1. 因为生成的dom具有局限性，所以绑定的函数也有局限性

5. 代码提示功能

Deco有简单的代码提示功能，如果运用灵活，你可以直接在Deco上开发完成你60%的代码

Deco不能做到的有哪些

1. 公共方法直接的调用，引入utils
2. 埋点接入
3. 复杂的逻辑交互，监听、性能优化等操作。都需要自己结合项目再优化
4. …

Deco实践-提效

1. 目前组内人员有3个人实践（2个已有项目重写，一个实战上线页面）
2. 目前总结在css方面提效30%，在总体项目中提效10%；（天润：原定2天完成css的页面，实际使用多半天；志强：原定1天开发静态，实际使用半天；红梅：原定3天开发对公搜索静态，实际使用1天）