PSD2CMS:从设计稿自动发布页面——阿里女工程师单丹访谈

  • 彭超

2013 年 8 月 6 日

话题:JavaScript语言 & 开发前端

在上个月结束的阿里巴巴技术嘉年华 D2 前端技术论坛中,一位女性前端工程师为大家带来了一个新颖的分享:PSD2CMS——由设计稿自动发布页面的系统。InfoQ 对她进行了采访,聊到了 PSD2CMS 的前因后果,以及一位女性程序员的阳光生活。

InfoQ:请先做个自我介绍吧。

单丹:各位好,我是单丹。毕业于天津大学,来自于辽宁沈阳。2010 年 8 月加入阿里巴巴,目前是中文站前端单身女开发一枚。热爱编码,热衷前端技术。应用 node、mongodb 完成多项应用,也曾致力于前端单元测试。目前专注于改善前端工作环境的工具类产品研发。当然,比写前端代码时间更长的是跳舞和户外。目前是公司精舞门爵士课堂的掌门,也曾和队友一起攀登过透明梦柯大雪山、四川半脊峰等等。

InfoQ:这次你的演讲主题是一个从 PSD 稿直接发布页面的系统,能否简单介绍一下你们这个系统?

单丹:系统称为 PSD2CMS。CMS[Content management system] 是可以编辑修改发布页面的系统,各大公司应该都有各自类似的页面管理系统。PSD 是 Photoshop 的一种专用文件格式。PSD2CMS 定义为 Photoshop 设计稿完成后,自动完成页面发布的一个系统。系统由三部分组成:一是运行在 Photoshop 环境中的插件,完成图层解析和页面生成;二是页面发布系统 CMS,完成图片上传,页面发布等功能;三是连接二者的预览服务器,提供数据持久化和页面的预览等服务。

InfoQ:为什么会有这样一个系统呢?

单丹:EDM、论坛帖、活动页是电商类网站运营最常使用的方式,在运营需求中占比很高。这类静态页面的共同点是生命周期短、复用性及语义化要求不高。在本系统出现之前,最常使用的方法有如下两种:一是使用 photoshop 自带的切片工具导出页面,再结合 dreamwaver 添加热区。这种方法存在的问题是文字会被做成图片而不能后期编辑,代码性能不佳,浏览器兼容不理想。二是手动编码。但由于这类需求的技术含量低,手动编码方式既耗时又枯燥。

本系统通过 Photoshop 插件的方式实现了页面的自动生成,并通过预览服务器连接到 CMS(页面发布系统),实现了设计稿完成后页面自动发布的功能。既减少了需求方的麻烦,又缩短了整个页面开发的工作流。

InfoQ:能不能介绍一下 PSD2CMS 的系统研发团队?

单丹:PSD2CMS 是跨团队的一次项目合作。项目成员除了前端团队的同学,还有 CMS 系统的开发同学。插件开发由万先甲、沈剑平和我完成,预览服务器由何城军和我负责开发。余平春、郑钦明负责 CMS 系统中图片上传、页面发布等功能。作为项目经理,我也负责日常的项目计划跟进、资源协调等工作。除了项目组成员,在这里要感谢前端组同学和老大之昊和李浩的支持。当有同学投入到 PSD2CMS 的开发时,其他同学默默无闻的分担了更多的需求。同时要感谢阿里巴巴中文站方凳会的支持。他们给了我们很多好的建议和意见。

InfoQ:在过程中遇到了什么困难,是如何解决的?

单丹:在开发过程中,我们遇到了很多难点。英文资料有限,翻遍整个互联网也许只能找到这两份儿参考文档。作为相对冷门的一个领域,能搜集到的中文资料几乎没有。开放的 API 有限,不能满足需求。而且,API 文档上有些方法的参数也没有清晰的说明,最初只能靠猜想。比如获取混合样式文本图层的样式。就是当一个文本图层中的存在多种样式文字的情况。原生的 API 只能取到一个文本图层首个字符的样式。在一个文本图层中不同的文字使用了不用的样式情况下,取不到文字的样式差别。Photoshop 提供了一个很有用的对象,ActionReference。当 API 不能完成你的需求时,首先想到使用这个对象。理论上,它可以指定为 PS 里任何对象的引用,这样就可以获得这些对象的属性。它有一个 putEnumerated 方法,API 上只描述了这个方法入参类型是枚举型。而哪些值可以作为输入显然是应该有一个集合的。后来,我们发现了一个没有任何说明的 TypeID 的列表。而这些关键字,就是 putEnumerated 方法的入参。经过最初痛苦的摸索,终于实现了这个功能。

其实,除了 API 带给我们的难题,还有思路上的难点。比如如何判断一个图层或者选区内的图片是单色。因为如果是单色,我们可以利用背景色代替背景图,这将很好的提高页面加载的速度。最初,我们是用取样本点对比的方式。但如果选区很大,样本点很多,效率是个问题。采集少的样本点,精确度又差。最终的方案是使用了直方图。利用 Photoshop 里直方图的信息,可以一目了然的看到图片是否单色。

除了技术上的难点,最大的困难是资源。在 PSD2CMS 出现之前,我们的情况是很艰难的。一度只有三五个前端却面对 40 多个后端和几十个设计师。我们怀揣着用 PS 插件实现页面自动化开发的美好的想法,每天却被需求和项目压得喘不过气。我们又不能对老板说:我们想做的插件有多么重要。需求还是优先。于是,大家咬咬牙,想出了最终的办法就是:Just do it。利用一切还可以利用的时间,疯狂的工作,坚持着做下去。直到静态页面的需求可以使用 PSD2CMS 来完成,我们的资源情况得到了缓解,有了更多的时间去做优化和推广。坚持走出第一步,就会将我们周围的环境慢慢改变成一个更加良好的生态圈。

InfoQ:现在这个系统在哪些地方有应用,效果怎么样?

单丹:在完成 PSD2CMS 后,我们进行了公司内部的推广,也收到了很多反馈。PSD2CMS 不只是减轻了前端同学的工作,而是改善了整个工作流。比原来一个典型的需求,设计师做设计可能需要 4 个小时,前端开发 demo 可能需要 4 个小时,需求方接到 demo 后上传图片修改代码等等的需要 2 个小时。但使用 PSD2CMS 之后,设计师完成设计后点击提交,需求方预览页面,点个按钮直接就可以发布。所以,使用 PSD2CMS 前后工作流有三个明显的变化:一是需求方的时间缩短了,苦恼减少了, 对他们来讲接触代码是个痛苦的事情;二是前端工程师从工作流中消失了,静态页面不再需要前端了;三是,整个工作流变短了,至少缩短了 50%。

使用 PSD2CMS 生成页面的优势是,文本图层可以生成文字方便后期编辑,浏览器兼容性好,代码简洁,生成速度快等等。因此,我们想将它应用到更广的领域比如网站的频道页面,而不单单只是静态活动页面。但,它目前的局限限制了它的应用范围。最明显的一点是生成的页面布局死板。这样后期页面修改时很难维护。同时,各网站都有各自的页面布局要求,我们也希望不仅仅是解放了我们自己的工作时间,也能接入到更多的系统,帮助到更多的人。为此,我们对系统做了进一步的规划。规划主要包括三点:第一,将页面生成模块搬到 node 端来实现,这将为系统的扩展提供更大方便;第二,定义通用的图层数据对象模型;第三,定义通用的页面管理系统接口。后两点的目的是降低个性化系统的接入门槛。

InfoQ:PSD2CMS 有对外开源的计划吗?

单丹:前端本身就是拥抱开源的。目前 Photoshop 通用 API 部分已经在 github 上开源,还在整理中。下一期完成系统模块化后,也会将通用的部分开源,比如 PS 图层解析模块。这也是规划里我们定义了通用的图层数据对象模型的原因。

InfoQ:题外话,做为一位爱户外、爱旅行、爱摄影的女性程序员,你对广大程序员 GG 有什么话想说吗?

单丹:这个问题够犀利,我只当自己是个程序员,还没有从女性程序员这个视角考虑过问题。 首先,作为女程序员,并没感觉到什么特别。虽然历史上最早的一批程序员,开创了软件业的程序员,是一批女性。这其中的 Augusta Ada King 被认为是世界上第一个程序员。她的父亲是英国诗人拜伦,母亲是数学家安妮·伊莎贝拉。Ada 继承了父母双方的优点,兼具了科学家和艺术家气质。她们还是很特别的。 关于爱好,我喜欢户外运动,特别是爬山。也许,是经过一番艰苦之后登顶的那一瞬间的感动,召唤着我一次又一次的冲向那些 no fire no signal 的地方。也许,是渴望回归到一个简单的、质朴的、纯粹的、原始的世界,唤回心灵的宁静,体会生命的大美。也许,身体里本来就涌动着与生俱来的对自由的渴望,回归大自然的渴望。也许,不疾不徐的穿林,狂奔的下降,肆意的上升,意犹未尽的腐败,神采飞扬的争论,这旅途本身也太过吸引。也许,确实不是为了什么,却会为自己为小伙伴们的点点滴滴热泪盈眶。爬山除了有其感性的一面,也需要理性的思考。其本身就是个系统工程。通常的一次远征,需要提前一两个月做准备,包括体能训练、技术训练、队友磨合、物质准备、路线及备用方案准备等等。MBA 教材中关于团队的 5 个 P 的要素在这里都有体现。我始终认为,喜欢户外运动的同学一定是懂得享受生活热爱生活的,并有一种永不放弃拼搏向上的精神。

编后记:

通过 PSD2CMS 上线的页面可以参看下面几个:

单丹在 ADC 上的演讲 ppt 下载链接可以点击此处

JavaScript语言 & 开发前端