研发提效：通过设计稿自动生成前端代码

今天抱着听不懂来见识的心态参加了全球架构师峰会，没想到还是大部分内容还是听得懂的。高手们都是可以用简单的话语讲透复杂的事情。

一天下来听了8位大佬分享，收获很多，今天就给大家分享其中一个（其他的写篇文章还挺有难度，😅）

先分享京东前端同学分享的通过UI设计稿自动生成前端代码的演讲。因为是纯理解分享，所以如果有理解错误的地方，请大家指正哈。

做过前端的同学可能知道，写页面并没有太大的技术含量，就是比较费时间。而做这个项目的目的就是为提高前端同学的研发效率，少写代码甚至不写代码。

所以京东就开始探索，如何利用设计稿直接自动生成代码的解决方案（匹配多端）。这里主要分为两个阶段。

第一阶段，UI设计稿直接生成静态页面。

第二阶段，UI设计稿直接生成带有逻辑的页面。

目前第一阶段的技术已经很成熟了，第二阶段还并不是非常熟，在生成代码之后，有时候还需要工程师去核查（小概率事件），不过对于一些常用组件，是可以做到自动化生成了。先说效果，这个项目已经运用在了京东app上了，并且把前端任务的工作量提升了将近一半，原来4天工作量的任务，现在只要2天多点就能完成。

我原来以为这个项目花了很长时间，但主讲者李伟涛老师说，参与开发项目的人只有7个人。花了多长时间我没记住，好像是一年？

在探索的过程中主要有三个难点：设计效果的还原度、代码逻辑的合理性、代码的可读性。

具体怎么做的呢？

首先，先要将设计稿数据处理成程序可使用的格式。

这里面有很多细节问题需要克服，具体我没做过所以不好具体说，不过我估计会对设计人员的设计稿制定一系列的标准，以便更好的生成代码。

其次，使用布局算法将设计稿数据还原为结构良好的代码。

这里简单说就是，你需要通过布局还原算法，智能的识别设计稿里的对象，如何正确的成行成列以及样式的合理计算。最终形成跟设计稿相同的程序代码。

再次，让代码具有语义化。

制定基础语义规则：样式、上下文