在2012年6月召开的百度开发者大会西安站上,来自ThoughtWorks的前端工程师王秋(@Sheldon-秋 ),进行了题为《移动Web开发中的渐进增强》的演讲。在稍后的OpenSpace环节,他还担任话题小组长与参会者进行了讨论,笔者就渐进增强的问题对其进行了采访,以下是详细内容。
InfoQ:请简单介绍一下自己以及目前所从事的工作?
王秋:大家好,我是王秋,是ThoughtWorks的一名前端工程师,JavaScript语言爱好者,平时喜欢钻研技术寻找突破,善于分享经验。最近在专注前端开发的测试技术。目前开发工作中涉及到一些WebApp工作,客户所使用的平台大部分是iOS Safari浏览器,为了更好的解决兼容性问题,我们开始使用渐进增强(Progressive Enhancement)的开发思想,渐渐对它有了更深的理解。
InfoQ:PE的核心内容是什么,请谈下您对渐进增强的理解?
王秋:PE是以内容为核心,在内容之上我们添加上样式和脚本使之有了外观和行为的开发思想。我认为,对于用户、BA、UX来说,内容可以是网站给访问的用户带来的内容和功能,具体可以是网站中的文字,也包括网站带给用户的交互功能,比如说发送邮件,填写表单,甚至还可能为给用户带来的视觉效果、颜色搭配、排版、阅读体验等等。但是,对于我们开发者来说,PE核心内容就是我们的HTML代码,简洁易懂的标记们。HTML是Web传递内容的基础,是开发者们制作页面功能的基础,也是几乎所有浏览器呈现页面功能的基础,开发人员通过添加CSS样式和JavaScript代码使内容在更好的浏览器上工作得更好,提升用户体验。 电视机的发展是个很好的例子。家里的电视机是由90年代初的黑白电视机换到00年左右的CRT彩色电视机,随着科技发展,到现在有了LED高清电视机,甚至出现了3D电视机。对于用户来说,电视机给他们带来的是电视节目,看CCTV都看了这么多年了,先进的电视机给用户带来了新的观赏体验,不仅带来了色彩,还带来了高清的画质,丰富的观影体验。反过来看,同样内容的电视节目同样可以在旧的电视机上播出,内容一样能被用户获取到,这一切都是向后兼容的,PE给我们带来的好处就在于此。浏览器的发展,从Netscape到现在的Chrome也是类似的一个发展过程,从浏览器不支持图片显示,只支持简单的文字和链接,发展到支持图片和网格布局,到现在的WebGL 图形技术,逐渐提供更好的体验给用户。 我们的网站应该给用户带来的是尽可能一样的体验,而并非是完全一样的。你也不能奢望一个Kindle的silk浏览器能像Chrome表现得那么出色。 我们需要从新审视解决浏览器兼容性这个问题,我们的开发需要从一直一来的以兼容性为目标的开发转化为以可用性为目标的开发,可用性指的是网站带给用户的功能从一开始就是跨浏览器的,这个和优雅退化关注的点不同。
InfoQ:从目前的角度来讲,PE取得了哪些进展,遇到的主要问题有哪些?
王秋:Web技术日新月异,由于浏览器和平台的差异性,PE的开发变得更加复杂,由刚开始的三层结构变为了现在的多层结构,我们在开发增强时,可以直接使用CSS进行增强,或者JavaScript进行增强,还可以混合在一起进行增强,除此之外还会产生增强之间的依赖。比如支持JavaScript的情况有一个增强,支持WebGL的时候会附加上另一个增强,后者依赖于前者。虽然PE的模型变得复杂,但是我们应该通过设计控制增强的层次和每层中的增强个数,从而控制程序的复杂度。
InfoQ:请谈下在移动开发中的关注点主要有哪些?
王秋:我认为移动Web开发和桌面Web开发的流程是一样的,所以不用特意的把他们分开。使用PE方式开发Web程序需要注意的地方主要是下面几个部分:
InfoQ:如何做PE测试?
王秋:PE的测试可以归结于一句话,就是保证最基础的功能健全的基础上,测试各个增强。这样我们可以保证,无论是用户在网络比较慢,或者使用不支持增强的浏览器访问网站,甚至用户出于安全性考虑禁用掉脚本时,我们都能提供给他们一个完整可用的版本。为了达到这个目的,我们可以从这么几个点出发:
InfoQ:随着渐进增强的开发,体验甚至会形成一个从下到上的链式结构,那么如果最底层的内容改变的时候应该怎么处理建立在其上的所有增强呢?
王秋:这种情况是比较糟糕的一种,只要是开发中遇到程序底层改变的,往往都会引来大范围的修改,而且是不可避免的。我们关注的应该是我们需要修改的地方和修改后质量的保证。我们通过面向对象的开发每个增强,所有增强的点都是被管理的,当底层代码修改的时候,很容易分析哪些增强需要被修改,另外,自动化的PE测试能保证我们的修改没有影响到增强前后的功能。在PE的开发中,应该控制这个链式结构的层数和每层的增强个数,因为每扩展一个增强,测试的复杂度将会指数上升。目前来看,PE的开发还没有复杂到这种程度。
InfoQ:在增强过程中,如何选择适合的增强方式?
王秋:Web开发有一个原则,优先使用CSS解决问题,然后再考虑JavaScript解决。在PE开发中,为了让样式和脚本都是动态加载上去的,模块化的开发变得尤为重要,同时也可以使用Modernizr这样的Library帮助开发。如果增强比较复杂,涉及到大量的View操作,那么还可以使用一些前端模板技术。
InfoQ:由于功能是渐进增强上去的,那么测试需要cover的点就会变多,被增强的部分可能增强后功能是好的但不见得增强之前的功能也是好的,即使增强前的版本没有人用到。这些多余的effort是值得做的么?
王秋:我觉得值得这么做, PE在跨平台上给我们带来的好处是显而易见的,因为我们没有那么刻意的去追求它,兼容性问题在开始开发时刻就解决了。另外,PE以内容为核心,可以让我们的焦点永远都集中在应该给用户提供的内容上,因为内容才是业务的重中之重,产生价值的地方。用支付功能作为例子,如果网站没有提供最基础的HTML版本让用户完成支付,哪怕就损失5%的用户,一年下来的损失也是巨大的。还有,PE开发从可用性出发,我们甚至需要考虑的网站的内容在阅读器是否工作,打印模式下是否显示的够好等等。我想这也是追求卓越软件的一方面吧。 对于开发来说,PE还能给我们的程序带来健壮性和扩张性,让我们的前端代码更容易管理,兼容性测试更加全面。
InfoQ:在百度开发者大会上,您与开发者讨论的过程中,开发者比较关注哪方面的话题?
王秋:非常开心能和现场的开发者们进行交流,主要提到的话题有关于渐进增强中动态加载CSS和JavaScript方面的,有关如何选择WebApp和NativeApp的,还有聊到Web开发趋势,比如游戏,3D开发方面的。有些开发者还对我们公司的前端招聘感兴趣。整个过程很有趣,我和他们交流中也学到很多东西。
InfoQ:是否有学习的资源推荐(文章、项目或书籍等)?
王秋:在这里可以推荐大家一本关于渐进增强的书《Designing with Progressive Enhancement》,另外,在http://www.alistapart.com/ 上也能找到很多关于渐进增强的文章。开发方面,可以去Modernizr和jQuery Mobile的官方网站查阅怎样使用。同时,我的blog中也会有和渐进增强相关的文章,欢迎大家订阅。