BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 彭超 关注 0 他的粉丝 发布于 2013年8月7日. 估计阅读时间: 11 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在上个月结束的阿里巴巴技术嘉年华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下载链接可以点击此处

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT