跨终端 Web by 徐凯.pdf

CMYCMMYCYCMYK跨终端Webfy.pdf 1 2014/5/30 14:05:18错误！文档中没有指定样式的文字。错误！文档中没有指定样式的文字。III 内 容 简 介 移动互联网不可阻挡地进入了我们的生活。作者将自己在百度和天猫期间的跨终端 Web 的开发实践转化为书中的技术方案和实现，呈现给各位读者。第 1 章提出了跨终端 Web 的概念以及实现跨终端 Web的多重途径，第 2 章主要介绍 Mobile Web 的技术基础，第 37 章是全书的核心，按照开发流程组织逐步讲解了实现跨终端 Web 所需要的各类技术基础设施，第 8 章主要介绍了 Hybrid App 的发展历程、实现细节以及成熟的框架，第 9 章介绍的跨终端存储方案（Storage）是作者曾经的冠军作品，第 10 章完整介绍了如何通过脚本录制和回放来实现跨终端动作同步。本书讲解深入浅出，通畅易懂，适合有一定 PC Web 基础，希望迅速了解 Mobile Web，致力于 PC 和Mobile Web 技术融合的读者。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 跨终端 Web/徐凯著.北京：电子工业出版社，2014.6 ISBN 978-7-121-23345-6 .跨.徐.网页制作工具.TP393.092 中国版本图书馆 CIP 数据核字（2014）第 110704 号 策划编辑：张春雨 责任编辑：付 睿 印 刷：北京丰源印刷厂 装 订：三河市鹏成印业有限公司 出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编：100036 开 本：787980 1/16 印张：15.25 字数：270 千字 版 次：2014 年 6 月第 1 版 印 次：2014 年 6 月第 1 次印刷 印 数：4000 册 定价：55.00 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。质量投诉请发邮件至 ，盗版侵权举报请发邮件到 。服务热线：（010）88258888。III 跨终端 Web 献给我的父母。献给李玉北，我的第一位导师。献给三七，我的第二位导师。献给舒文，我在天猫的师兄。献给所有百度和天猫时期的战友们。IV 跨终端 Web V 跨终端 Web 推荐序 2012 年年底，我从云 OS 运营团队转岗到天猫前端团队，之前和手机硬件厂商、Mobile OS 及 App 市场的合作经历让我重新思考前端的未来和电子商务的技术方向。除了在天猫内部实践基于移动优先（Mobile First）的设计研发外，还和 InfoQ合作把 Qcon 北京 2013 的前端议题定为“跨终端 Web”，于是就有了采访稿从可编程到跨终端QCon 北京 2013“跨终端的 Web”专题出品人鄢学鵾专访1，阐述当时的认知和想法。现在“跨终端 Web”已经诞生一年半了，鬼道同学把这些想法和实践都编写成书实在让人惊喜和敬佩，我有幸成为这个成就的见证人，并再次有机会和大家谈谈跨终端 Web 的初心和思考。1991 年诞生了 World Wide Web、HTTP 和 HTML，1995 年诞生了 JavaScript、Java和 PHP，1996 年诞生了 CSS，1998 年 CSS 2.1 正式发布，1999 年 CDN 诞生且 HTTP 1.1 和 HTML 4.01 正式发布，2000 年 ECMA-262 3rd正式发布，2001 年 IE 6 发布。作为 Web 开发者和前端工程师的我们应该对这些大事件相当不陌生，但如果你仔细看看这些年份就会发现我们所使用的绝大部分技术和方案都比 IE 6 老。在那个时期没有真正意义的前端，常见情况是美工切图，后端嵌套模板，也没有所谓的前端架构，前后端的发布机制几乎一样，那就是门户盛行的时代，Yahoo、新浪、搜狐和网易当道。IE 6 是第一轮浏览器大战的胜者，垄断式的胜利直接导致 Web 基础设施至少 10 年的缓慢发展，标准的意义也就不那么明显了。其实 1994 年就有了 W3C，但民间为了解决 W3C 面对浏览器厂商不给力的混乱状况于 1998 成立了 WaSP（The Web 1 http:/ VI 跨终端 Web Standards Project），其中一个创始人于 2003 年发表了影响力巨大的著作 Design with The Standards（网站重构），当然在中国产生了估计作者都没有想到的额外影响，那就是出现了重构工程师。2004 年 Firefox 1.0、Gmail 和 Google Sugguest 发布，2005年 AJAX 横空出世和 Google Maps 发布，2006 年 jQuery 和 YUI 发布。这些事件的到来显示出了低成本的 Web 在跨浏览器上的巨大威力和人机交互的显著改善，导致当时互联网 99%以上内容都是使用 Web 来呈现的，所以对于当时绝大部分人而言，WWW 就是互联网。巨大的需求导致 Web 开发的规模化和专业分工，这就是前端工程师开始出现并大量集结于以 Web 业务为主的互联网公司的原因。我们可以称这个时代为前端工程师 1.0，比如在 Google、Facebook、Yahoo、阿里巴巴、百度、腾讯等公司中，前端团队小有规模且以 Web 开发为主，此时的前端工程师们大量使用 HTML、CSS、JavaScript 开发基于桌面浏览器的网页和应用。这个时代的前端工程师主要具备 3 个方面的能力，一是跨浏览器的兼容能力，需要理解渐进增强和优雅退化的思想，深入 Web 标准并结合环境数据制定 GBS（Graded Browser Support 浏览器分级标准）；二是富交互 Web 的开发能力，能够基于，甚至开发JavaScript 库去实现人和机器的复杂互动；三是性能优化能力，实践表明前端占 Web性能 80%，类似 CDN 和按需加载等各种性能优化方案深度地影响了前端架构和发布机制。虽然今日市面上大部分前端工程师招聘条件还是基于前端工程师 1.0 的，但我们的环境自 2007 年 iPhone 发布起就在悄然却快速地变革，我们可能是家里唯一使用电脑的那个人，而手机在吃饭、走路、约会、上厕所等时都已经成为不可或缺的陪伴。当我还在云 OS 做运营时，便有一个令人震惊的发现：人类发展五千年到现在的最大共同点可能是每人都有移动智能设备。人们已经处于各种各样碎片化的智能移动设备上，这些设备有触摸屏、相机、麦克风、陀螺仪、加速计等特性，使得人同机器交互的方式发生了巨大的革命，更重要的是它们都和网络连接，没有了离线状态。于是，当一个人在大街上看到奇闻异事随手用手机拍下来并发到微博上，TA 的朋友可能在手机、平板电脑或普通电脑的微博上看到并转发，也可能被 TA 的朋友转到微信或 IM 等，TA 朋友的朋友同样可能在手机、平板电脑或普通电脑的另一种软件上看到这个信息，甚至信息被电视媒体或平面媒体发现并造成更大范围的传播，更多 TA 不认识的电视或平面媒体通过扫描报道时的二维码又找到 TA 的微博，这一切推荐序 VII 跨终端 Web 可能在瞬间完成。这个小场景告诉我们人和信息是在智能终端（Phone、Pad、Desktop、TV 等设备）、软件终端（浏览器、SNS、IM 等应用）和传统终端（电视、广播、平面等媒体）间交叉流动的，这是一个去中心的网状结构，也是互联网的本质特性，所以跨终端不仅仅是跨越设备（device），更是跨越人机交互的场景入口（end）。面对这种终端碎片化的潮流，前端工程师怎么办？解决方案就是基于最重要的前端开发思想渐进增强和优雅退化得出的移动优先：一是毫无疑问绝大部分用户已经或正在成为智能设备用户，我们要为 80%的目标用户服务；二是专注于核心业务需求，人的本性、业务本质和商业模式本质基本上不会随着终端改变而改变，所以相同业务在手机、平板、桌面和电视上呈现的本质和商业模式不会有不同，小屏幕终端是我们重新思考业务本质和核心人机交互流程的机会，其挖掘出的本质会改变其他终端；三是针对未来人机交互，现在移动设备引领人机交互的变革潮流，通过必备特性虚拟或增强现实，并逐步引入到桌面和电视等设备中。所以，选择哪个具体技术方案，是响应式 Web，还是服务端响应式 Web（URL 不变，通过服务端在不同设备展现不同模板），还是多个 URL Web（不同的终端，不同的 URL），还是 Hybrid 应用（Native 和 Web 混合使用，比如 iOS App Store 一直就是引用壳里面套个网站），还是 Native 应用，是依据业务本质、人性需求和人机环境趋势来综合判断的。由于Web 的本质特性就是低成本跨平台但对设备先进特性支持不够，而 Native 应用能够充分利用硬件先进特性但受限于系统平台，导致开发者没有发布能力，所以大多数情况下，可以把跨终端 Web 作为默认选择。在跨终端的时代，渐进增强和优雅退化依旧是最重要的前端开发思想，但前端工程师们不能像以前一样仅仅固守在 Web 上，Web 和客户端应用的融合已经成为必然，Web 从页面（page）到应用（application）反映了人机交互革命带来新的体验趋势，客户端和动画开发成为了前端工程师的基本功。移动优先的跨终端解决方案核心是一套数据有多个高品质低成本展现方式，这促使前后端分离成为必需，前端工程师不仅仅要关心客户端环境也要关心服务端环境，所以 GBS 需要升级到 GTE（Graded Target Environments，分级目标环境），工程师更关注端到端的数据接口约定（比如正文中的 IF 就是这种思想下的一种实践方案），这会彻底改变前端的开发方式、架构和发布机制，也会导致前端团队快速膨胀直到前后端比率趋于一致。这是一个巨VIII 跨终端 Web 大的挑战，也是一个前所未有的机会，更是时势的要求。我把这个时代叫作前端工程师 2.0。这篇推荐序被我拖延了很久很久，结尾之时恰逢鬼道同学入职天猫一周年，就拿老乔的话来 zhuangbility 一下：“你如果出色地完成了某件事，那你应该再做一些其他的精彩事儿。不要在前一件事上徘徊太久，想想接下来该做什么。”这应该是最好的礼物之一。三七 2014.4.8 IX 跨终端 Web 前言 移动互联网不可阻挡地进入了我们的生活。笔者将自己在百度和天猫期间的跨终端Web 的开发实践转化为书中的技术方案和实现，呈现给各位读者。本书大纲来自于笔者 2013 年 7 月在 D2 上的主题分享“移动优先的跨终端 Web”2，2013 年 11 月 W3CTECH 2013 上做了第二次分享3。面向对象 本书适合有一定 PC Web 基础，希望迅速了解 Mobile Web，致力于 PC 和 Mobile Web技术融合的读者。本书的第 1 章、第 3 章、第 5 章面向所有的读者，即使您对 Web 技术毫无了解，仍可以顺利阅读下来。本书其他章节假定您对 PC Web 前端技术已经有所了解，知道HTML、CSS、JavaScript 这些名词的含义，并且动手写过一个页面。章节简介 第 1 章阐述了移动互联网的现状和遇到的问题，提出了跨终端 Web 的概念以及实现跨终端 Web 的多重途径，破除了“唯 Media Query 论”，并引入移动移先的概念，丰富跨终端 Web 的内核。第 2 章从对比 PC Web 的角度介绍了 Mobile Web 的技术基础，并对远程调试、兼容 2 http:/luics.github.io/demo/d2/3 http:/luics.github.io/demo/cew-w3ctech-1311/在线视频：http:/ X 跨终端 Web 性等开发问题做了详尽的阐述。第 37 章是全书的核心，按照开发流程组织，逐步讲解了实现跨终端 Web 所需要的各类技术基础设施，包括：基准，给出了调试和测试过程中的基准，确定