ThoughtWorks 王秋：渐进增强在移动开发中应用

在刚刚结束的百度开发者大会西安站上，来自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 程序需要注意的地方主要是下面几个部分：

• UX 设计出来的页面会含有很多复杂的样式和交互，但是开发时需要从最基本的有语义的标签着手，因为简单有语义的标签可以让开发人员更容易去制作交互，所有好的设计都是从简单出发的。而且，我们开发的时候考虑的应该是我们需要什么样的原生控件去收集用户的有效信息，而不应该只关注于样子。尤其在 WebApp 开发中，UX 往往会设计出和 Native App 类似的外观，旨在最求给用户带来和 Native App 一样的体验。在这种情况下，开发人员越应该从基础的 HTML 开始。
• WebApp 的流行和先进的移动浏览器被广泛使用是紧密相连的，这些浏览器往往都能很好的支持 HTML5 和 CSS3 技术。这两项技术能给我们带来更多的语义的标签、本地存储的能力、更多更强的样式支持、强大的 DOM API 等等。我们虽可以在这些平台上大展手脚，但是如果由于先进的技术忘记了 PE 的本质，那么你的网站也就只能限制在这些平台上被访问到。如果你的客户使用不支持以上技术的浏览器、或者禁用到 JavaScript 或者 CSS、又或者在网络比较慢时访问你的网站，你什么都不能提供给他们，没有用户访问便没有了价值。也就是说，我们应该选择先进的技术能给用户带来更好更多的获取核心内容的使用体验。比如说一个图片查看，在普通浏览器上，可以使用一个单独的页面打开图片，利用浏览器特性进行缩放，而如果是支持 touch 的手机浏览器上，我便可以支持在有图片显示的地方直接通过手势操作来缩放。
• 我们在使用 PE 的过程中，并不是针对某个平台进行增强，而是判断当前运行的平台是否支持某种能力，比如是否支持多点触摸、是否支持 Canvas 等等。如果坚持判断浏览器是否是 IE，那么当 IE 更新后，用户依然也使用不了高级功能。而且有些浏览器是可以模拟 UA 的，如果用户使用低级浏览器模拟高级浏览器来访问，那么你的网站会变得一团糟。
• PE 的开发已经变得不只是 HTML+CSS+JS 三层了。在复杂的环境下，PE 的模型已经变为多层结构。在基础功能完整的情况下，利用 CSS 进行增强，再利用 JavaScript 进行增强，甚至在多层的基础上，还会产生增强依赖，比如在某一个增强存在的基础上，去检测另一个浏览器能力，支持某一特定的功能。在复杂的情况下，我们会利用到像 Modernizr 这样的库来帮助开发，甚至你可以使用它来进行 Responsive Design（响应式设计）开发。

InfoQ：如何做 PE 测试？

王秋：PE 的测试可以归结于一句话，就是保证最基础的功能健全的基础上，测试各个增强。这样我们可以保证，无论是用户在网络比较慢，或者使用不支持增强的浏览器访问网站，甚至用户出于安全性考虑禁用掉脚本时，我们都能提供给他们一个完整可用的版本。为了达到这个目的，我们可以从这么几个点出发：

• 面向对象的开发各个增强，每个增强都可以进行开关。这样做的好处是，可以方便的管理增强，保证每个独立增强不影响之前的功能；通过开关增强，不仅可以测试增强前后的版本是否都可以正常工作，而且还可以通过同一级别的增强可以相互组合进行测试，查看是否相互影响；如果对象化的管理增强，可以很方便的开发“回到基础版本”这样的功能，让用户在低带宽情况下主动切换版本，像 Gmail 移动 web 版本一样。有人质疑过这样做会不会带来更多开发成本，我的答案是不，良好的结构可以带给程序健壮性和扩张性，就像面向对象开发一样。另外，模块化的前端开发并不会给代码造成混乱而会更容易的管理前端代码。
• 选择适当的驱动，方便做自动化测试。要做到解决兼容性，不可能把所有平台都测试一遍，一些和特定浏览器能力无关的测试可以在同一浏览器上进行测试，和特定能力相关的测试便需要选择适当的自动化浏览器驱动。比如，如果是需要测试 mobile safari 上测试特有功能，那么可以选择直接驱动 mobile safari 浏览器，但是一般的链接跳转，form 提交之类的功能可以在 Chrome 上进行测试。
• 如果是测试 Mobile 上的手势功能，也可以通过在 Chrome 或者 Firefox 上进行测试，因为在 Mobile 中的 Touch 增强，实质上是绑定了 touchstart、touchmove、touchend 事件，那么这些事件在不支持 touch 的浏览器上是被视为自定义事件，通过出发自定义事件便可以进行测试。

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 中也会有和渐进增强相关的文章，欢迎大家订阅。

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。