为 Windows 8 构建 Bing 应用

  • Article

概述

对于 Windows 8，Bing 团队构建了新闻、天气、财经、体育、旅游和地图应用。本技术概述提供了关于这些应用的体系结构、它们使用的关键 Windows 8 功能和合约、它们采用的常见控件等方面的深入介绍，并且更广泛地说明了全球通用性。

Bing 团队中的一些成员在大约一年前组建了一个应用团队，来为 Windows 8 提供一组由 Bing 支持的应用。这些应用侧重于通过快速而流畅的体验以及来自多个来源的内容让用户实时了解最新情况。所有应用均针对触控和平板设备进行了优化，同时使用键盘和鼠标的效果也非常不错。我们在前几个月一直在致力于实现这些应用的全球通用性。

在开发应用时，我们制定了两个目标：构建一组出色的应用来让 Windows 8 变得更具吸引力，并使其成为应用开发人员的模型。在本篇博文中，我们为您提供了应用的技术概述，还提供了您可以加以利用的深入见解/资源以便您开发出自己的应用。通过该过程，我们了解了很多东西 – 甚至是一些我们下次会采取不同的做法的内容。请继续阅读全文。

查找您所关注地区的天气状况。

天气应用：查找您所关注地区的天气状况。

体系结构概述

平台服务

除地图应用使用 XAML/C# 构建以外，我们的应用全部使用 HTML/Java Script 编写。所有应用共享一个共用的客户端平台，该平台提供了多种基本服务，例如检测、缓存、查询服务、设置、漫游、配置文件管理、市场定制和语音基本功能等。我们谨慎地选择了使用客户端缓存，以便投资于预取并使客户端能够出于一些原因而设置各种数据的生存时间。

我们的应用面向全部 PC 设备而设计，其中许多我们认为是平板设备。Windows 8 平板电脑可用来使用内容，也可由消费者或公司用来创建内容。在许多情况下，我们知道用户要经历各种状态的连接（基于快速网络的完全连接、通过 WiFi 或蜂窝网的弱连接、片状网络甚至是无连接）。我们的目标是构建一个不同于网页的富客户端应用。我们使用了将全部网络数据缓存到文件系统并在等待新数据到达时重用缓存数据的 IE 概念。我们还设计了在缓存数据不可用和网络请求失败时的体验。对于这些方案，我们提供了正常的错误消息、重试机制和操作系统中的监听网络连接更改来自动触发重试。

查询服务

我们的应用使用了多种基于 Bing 堆栈构建和/或位于 Windows Azure 中的服务。Bing 服务和数据由基于 Bing 平台构建的专用应用程序服务器提供服务。例如，财经应用大量使用了 Azure 的数据和服务，而地图应用的数据和服务则通过由 Bing 地图团队构建的地图控件提供。我们的应用中还包含其他的文章、图像和视频内容，这些内容在内容管理系统中进行托管。如果您要创建应用需要利用 Bing Web 索引或行业领先的发布者的数据，请查看 Windows Azure 商城，您可以在其中访问 Bing 搜索 API 以及来自 STATS 体育等行业领先的发布者或联合国等机构的信息。

缓存

要支持与包含大量的数据和内容的海量应用进行交互的数亿用户，需要大量的服务器计算。为了在硬件需求和用户数量之间实现平衡，我们在不同层级的缓存方面进行了大量投资。我们的内容管理系统通过向服务器、Azure 中的服务以及本地客户端平台呈现缓存数据来减少服务器负载。如果您预期有数千个用户，请考虑使用本地缓存的方法来限制服务器计算，并改进用户体验 – 您可以在开发中心了解关于应用缓存 (AppCache) 的更多信息。

我们的应用在客户端使用缓存的一些方法包括：

  1. 管理低分辨率和高分辨率版本的相同图像 – 根据缓存中的内容选择要显示的内容或不显示。
  2. 替代服务器集内容年龄的客户端缓存。我们所使用的服务通常不属于我们，因此我们无法控制生存期，在此情况下，需要由我们的客户端来决定缓存。
  3. 谨慎地显示最少量的过时缓存数据，而不是下载可能无效的新数据。

自定义控件

设计是我们的应用与众不同的根本原因所在，它在构建井井有条和直观的应用方面发挥着重要作用。为了使我们的全部应用获得一致的外观和可视化的沉浸式体验，我们基于 Windows 提供的引人注目的 UI 控件构建了自定义控件。如果您要跨应用获得一致的外观或彰显个性的用户界面，我们鼓励您利用 Windows 的灵活性来基于 Windows 8 构建您自有的 UX 框架或自定义控件。MSDN 中有丰富的资源可帮助您创建您自有的 UX 框架和自定义控件。

失效保护

如果您的应用依赖于第三方应用，请时常对您的数据提供商的全部中断或部分中断的情况做出应对计划。我们正努力使我们的应用避免出现单点故障，同时内建了多种失效保护机制。为了用户的利益，我们在服务器和客户端的各种失效保护实践方面不断投资。在我们的所有应用中，我们使用到了来自 Microsoft 的许多部门以及行业合作伙伴的数据和服务。所有这些外部来源均具有不同程度的正常运行时间 SLA 和 TTM（缓解时间）级别的中断情况。任何应用中的任何特定的全景都可能要依赖于来自多个来源的数据和服务。为了提供出色的最终用户体验，我们在服务器和客户端采用了失效保护技术，包括缓存、备份提供商、功能的正常降级或在一些情况下求助于可接受的过时数据（例如，目标信息）。请在设计和开发您的应用时（而非出现数据故障期间或之后）考虑这些失效保护方法，并采取措施来创建自适应的 UI 和错误消息。

客户端框架 – 语言选择

开发人员经常问到的一个问题就是为何我们要使用客户端 HTML，而不是基于服务器的 HTML5 进行实施。简短的回答就是 Windows 8 上的应用不是网站。创建出色的 Windows 应用商店应用需要与平台深度集成，而这是我们无法通过标准的 Web 代码做到的。如果我们仅通过通常在浏览器中所看到的相同 HTML5 提供功能，页面将无法访问用来实现出色的用户体验的 Windows 8 功能。

构建应用为我们带来了诸多优势，包括：

  1. 使用内建的 Windows JavaScript 库 (WinJS) 的控件，这些控件允许我们利用 Windows 8 的功能并基于 Windows 团队打造的体验进行构建。我们认为我们已经实现了由 WinJS 提供的出色用户体验 (UX)。

  2. 无法通过浏览器中的 HTML5 访问本机应用平台功能：

    • 设备功能，例如访问麦克风、网络摄像头或网络
    • 共享文件位置，例如“我的文档”、“音乐”、“图片”或“视频”
    • 加入合约，包括“搜索”、“共享”、“设置”、“联系人”等
    • 另外，相对于 HTML5，某些库在 WinRT 中的使用效果更佳。例如，WinRT 中的地理位置 API 相比 HTML5 更为丰富。

  3. 使用性能更强的静态类型 C# 代码补充 JavaScript 代码。我们使用了 JavaScript 中不存在的语言结构 – 例如，LINQ 和 .Net4.5 异步框架。后者非常重要，因为其将有助于确保异步操作的正确性，而这些操作可能会非常复杂。

    请注意如果您编写 WinMD 来托管业务逻辑（无论使用 C# 或 C++），则需要付出在不同语言之间封送大量数据的代价。更好的方法是使用封送大量数据的一次调用，而不是封送少量数据的多次调用。另外， C# 和 JavaScript 具有单独、独立的垃圾回收器。由于它们并不同步，因此您的内存使用可能会大于完全使用 JavaScript 或 C# 编写应用的情况。

    在开发我们的应用时，我们认定考虑到 JavaScript 和 C# 混合语言应用的众多优势，我们付出额外的代价来着手解决这些复杂性将物有所值。我们确信我们的应用会依然具有出色的性能。如果您要考虑将 JavaScript 和 C# 合并到您的应用中，请谨记这种额外的代价和复杂性。这样，您可以选择最符合您的应用要求的体系结构。

  4. 基于 XAML 构建我们的地图应用以访问本机 DirectX 地图控件。这种方法可以使我们更好地控制呈现并获得更出色的呈现效果（对于地图来说至关重要！）。

面向 Windows 的开发提供了一系列的标准体验（其中包括屏幕尺寸、触控目标、视图状态和方向维度）。我们希望通过定制代码来实现特定于用户设备的最佳用户体验。通用的 HTML5 体验无法使我们提供一致的优化用户体验。

关键的 Windows 8 功能和合约

正如我此前所提到的，我们的目标之一是成为第三方应用开发人员的榜样。我们希望引出我们已实施的 Windows 8 功能和合约，以使我们的应用在消费者面前更具吸引力，并重点介绍您可以在 Windows 8 中使用的功能：

应用栏

所有应用都在顶部应用栏中提供了导航并在底部应用栏中提供了上下文相关的命令按钮。这些功能可通过手势进行访问（从屏幕顶部轻扫至底部，或者从底部轻扫至顶部）。

地图应用 - 应用栏

地图应用 - 应用栏

贴靠模式

每个应用都拥有一个精心设计的贴靠模式。我们并不仅仅是将应用的所有功能复制到一个更狭窄的视图中。而是考虑应用在贴靠时可能的使用方式。例如，在新闻应用中，我们提供了新闻列表的快速访问，但并未提供微型阅读模式。我们期望用户在想阅读的时候返回到全屏。在财经应用中，贴靠视图专注于主要指数和股市聚焦。在天气应用中，贴靠视图提供未来几天的天气概述。

天气应用和财经应用 – 贴靠模式

天气应用和财经应用 – 贴靠模式

共享

我们的所有应用都支持“共享来源”合约。该合约允许您将数据发送到邮件应用或 People 应用等共享目标。

新闻应用 – 共享

新闻应用 – 共享

打印

地图应用支持“打印”合约以打印地图、详细信息、方向和搜索结果。

锁屏

天气应用使用锁屏来通知用户当前的天气状况，而无需解锁并运行应用，甚至是转到“开始”菜单。

动态磁贴

除地图应用以外，我们的所有应用都拥有动态磁贴，并可以为消费者提供有用的通知（例如，最新的新闻头条、天气状况、体育比赛赛果或其他有趣信息）。即便是在“开始”屏幕中，这些应用也随时都将充满活力，并鼓励用户启动应用来了解更多信息。

搜索

每个应用都支持“搜索”合约（通过“搜索”超级按钮）。“搜索”超级按钮将不断成为消费者查找本地文件、应用以及 Windows 8 中的其他信息的位置。

旅游应用 - 搜索

旅游应用 - 搜索

设置

每个应用都支持“设置”超级按钮。“设置”超级按钮为用户提供了跨所有应用访问设置的一致方法。

语义缩放

我们的全景和列表视图支持语义缩放，即一种在单个视图中呈现和导航大量内容的触控优化技术。由于我们的应用中具有包含大量内容的许多信息组，语义缩放允许用户了解所有这些内容的概况，并直接跳转至他们感兴趣的信息组。

全球化

每个应用都使用全新的 Windows 8 语言管理器和归属地设置进行优化来实现最佳的用户体验。随着用户开始了解这些设置，并看到应用对他们予以重视，所有应用最终也会变得日趋完善。

辅助功能

我们开发应用的目标之一就是为所有用户提供可通过 Windows 8 中的 UI 实现的出色的辅助功能并提高工作效率。以下是我们针对应用的辅助功能所做的工作中的一些亮点。

  • 键盘 - 我们的目标是在 Windows 8“开始”屏幕和在所有 Windows 应用中保持快速而流畅的键盘行为。用户可以使用箭头键跨磁贴和标题网格进行导航，并通过输入键或空格键进行调用。我们所面临的最大挑战就是我们的一些磁贴布局的动态性质（例如，新闻应用）。根据 Windows 指南，我们采用了一些不同于浏览器模型中的典型网页的约定。在我们的应用中，您可以使用 BACKSPACE 键来“返回”，而不是使用 ALT+LEFT，或者键盘上的“浏览器后退”按钮（如果有）。
  • 屏幕读取器 – 我们利用了 HTML4（h1-h6、ol、li 等）、HTML5 不断增加的语义标签支持（header、hgroup、section 等）以及令人惊叹的 ARIA 角色、状态和属性的环境来协助屏幕读取器 AT（辅助技术）作为改进所有用户的用户体验的方法。除使用“讲述人”的主动测试和调试之外，我们还发现了 Inspect 这一有用工具，该工具可为我们提供“讲述人”所使用的编程访问树的实时视图。 
  • “讲述人”触控 – 我们为键盘辅助功能和屏幕读取器辅助功能（DOM 层次结构、语义 HTML、ARIA 角色/状态/属性等）打下了良好的基础，而这为我们的应用支持所有出色的“讲述人”触控功能（例如，双击调用、二指轻扫和项目间轻拂）铺平了道路。启用“讲述人”触控功能之后，有视力障碍的客户可以在触摸屏上使用 Windows 8。

自定义控件

尽管我们的应用提供唯一的信息和功能，而它们却可以共享通用的 UI 设计，从而在视觉效果上使它们相互关联。例如，无论是外观或工作方式，顶部应用栏中的导航按钮在我们的所有应用均相同。体育应用中的新闻文章与财经应用中的新闻文章共享着相同的视觉元素。

我们的关键目标就是使我们应用的外观保持一致。在坚持基本的 Windows 指南和原则的同时，我们希望我们的所有应用使用通用工作流来完成基本任务，例如在财经应用中添加股票代码或在天气应用中添加位置。共同的界面可让用户能够更加直观地与多个应用进行交互。从工程的观点来看，这样可以使我们在不同的应用之间共享更大的代码库，从而使我们的工程师能够有更多的精力专注于构建出类拔萃的应用特定功能。为了实现这一目标，我们构建了特定于我们的应用的多个自定义 UX 控件（详见下文），我们已在财经、天气、体育、旅游和新闻应用使用了这些控件。

HTML 中包含许多开发人员可以利用的固有的基本控件，例如按钮和文本框。除此之外，WinJS 还提供了具有更复杂的 UI 和业务逻辑的更为丰富的控件，例如列表视图和应用栏。在识别哪些控件可用于我们的应用中的视觉元素时，我们确定要尽可能多的重用固有控件或 WinJS 控件。在我们需要更复杂的 UI 或业务逻辑时，我们构建了遵循 WinJS 指南的自定义控件。我们的一些自定义控件是由基本 WinJS 和 HTML 控件组成的复合控件，而一些则是由 WinJS 控件派生而来，其他的则是重新编写的控件。

与 WinJS 集成

通过使用与 WinJS 控件相同的原则构建自定义控件，我们简化了我们的工程师使用 WinJS 和自定义控件无缝开发和调试应用的过程。更重要的是，通过构建 WinJS 模板，我们的控件的表示层 (HTML/CSS) 可与业务逻辑 (Javascript) 隔离。以下是我们遵循的一些关键原则：

  • 每个控件都具有接受两种参数的 WinJS 友好的构造函数：顶级 DOM 元素和该实例的控件选项。
  • 为了使用 WinJS 模板绑定，我们在每个控件中定义了的公共的 getter 和 setter，它们可以反映出控件背后的可观测数据模型。
  • 我们避免了创建需要直接处理控件实例的行为。每个交互均通过公共的属性和方法进行了简化。
  • 我们利用了 WinJS.Namespace 和 WinJS.Class API 以使用开发人员所熟悉的直观的句法定义了我们的控件。
  • 为了向控件添加自定义事件，我们将我们的控件类与 WinJS.Utilities.eventMixin 或 WinJS.UI.DOMEventMixin 进行了混合。这样，我们可以使用分派事件以及添加或移除事件侦听器的方法来增强我们的控件。这些方法的接口为 addEventListener、removeEventListener 和 dispatchEvent，而这对于 HTML 和 Javascript 开发人员来说是再熟悉不过的。有关创建自定义 WinJS 控件的更多信息，请单击此处。

使用 CSS3 进行布局

在构建我们的控件布局的过程中，我们利用了硬件加速性能以及 CSS3 的许多出色的新功能。

  • 我们使用了网格、Flexbox、区域、Exclusions、缩放、动画和变换来产生丰富的布局，而使用 CSS2 和更低版本进行构建（如果可能的话）则缺乏直观性。我们使用了 CSS 介质查询来处理不同屏幕分辨率和方向的布局。这是处理旋转和贴靠的最佳方法，因为这样可以将难度较大的任务分配给 GPU 并释放 CPU 循环。

总体而言，我们确定要尽可能地将我们的布局逻辑推送至 CSS 以保持高帧速率和 UI 流畅性。

值得注意的自定义控件

我们的应用使用十几种自定义控件来增强用户体验。以下是使用上述基础结构的两种控件：

  • 广告 - 显示广告能够在我们的应用中以全景的形式出现，也可以在文章（“文章阅读器”）中以文章的形式显示。我们的团队使用 Microsoft 广告 SDK 中的广告控件呈现广告。文章具有指定是否文章符合广告要求的属性。文章阅读器当前使用一些简单的计数逻辑在文章的第二页显示一整页广告，或在文章最后显示单列直立式广告，或者两者兼俱。
  • 文章阅读器 - 每个应用都可以访问文章阅读器控件。我们的应用可以连同布局信息一起传递多个 HTML 片断、图像和视频，而文章阅读器将以纵栏式窗体自动布设内容。该控件通过使用 HTML5 中的新的 HTML 区域机制来实施。它可以分析来自我们的 CMS 系统中的适当的数据，而不需要应用手动分析数据。
    显示文章阅读器控件的新闻应用

新闻应用 – 文章阅读器控件

全球通用性

鉴于 Windows 应用商店在全球范围内的影响力，我们预期您可能希望将您的应用扩展到不同的市场和语言。如前所述，我们的全部应用可通过所有受支持的 Windows 市场获得。我们决定面向所有受支持的 Windows 市场构建应用，以作为向尽可能多的 Windows 客户推广我们的应用的手段。本部分重点介绍了我们为使我们的应用全部实现全球通用性所做的工作中的重要组成部分。

  • 本地化 - 您必须完成的首要的、可能是最显而易见的任务就是翻译。我们将该组应用本地化为 106 种语言。为此，我们建立了使用各种中间层来实现应用程序的镶边翻译和服务器端翻译的流程。另外，还有一种包含本地化支持的 Visual Studio 的工具包 – 您可以单击此处了解关于该工具包的更多信息。根据您希望进入各个市场的程度，您可能需要翻译镶边和应用内部的内容。
  • 市场定制 - 作为您的配置系统的一部分，应用可以基于应用运行的市场而启用或禁用功能。总体而言，我们在 Windows 中将市场定义为用户的语言首选项（在“控制面板”->“时钟、语言和区域”->“语言”下）和用户的归属地设置（在“区域”->“位置”下）的结合。我们用来提供市场定向的 API 包括：

我们的应用中的一些市场特定功能：

    • 旅游应用 - 特定市场的航班搜索（例如，EN-US、FR-FR）
    • 天气应用 - 按市场使用不同的天气数据源
    • 体育应用 - 向用户默认提供地区特定的体育联盟的相关信息

  • 物理位置特定的机制 - 使用用户的实际物理位置的机制有两种：

    • 启动应用阻止 - 如果该应用位于不允许我们提供服务内容的区域（禁运地区），其将向用户显示一条消息，表明该应用无法在该地区运行并且将关闭。
    • 物理位置市场化 – 在用户所在的国家/地区中，如果应该或不应该启用某些功能，或者必须使用某些服务器（在您面向一些市场开发应用时可能会遇到此类情况），则应用可以配置这一要求。这将使我们必须对上述市场定制功能进行修改。

  • 应用特定的全球通用功能 – 我们在我们的应用中创建了多个具有国际吸引力的功能。例如，我们选择在我们的旅游应用中构建并强调航班时刻表和飞行状态，而不是仅专注于航班预订，因为我们当前在许多国际市场无法提供航班预订。如果您正面向国际市场开发应用，我们鼓励您预先考虑一下您可能无法部署特定功能的市场，并把您的时间放在开发和增强这些功能上，因为这样做可以也必将使这些功能能够得到更广泛的使用。

性能和响应速度

在 Windows 8 的 RTM 和 GA 之间，团队经历了性能改进的里程碑。一些目标工作领域包括：

  • 微调启动路径以优化 CPU 使用和输入/输出调用。其中的一些任务包括：
    • 并行运行独立的任务以使其能够运行于不同的内核。
    • 确保占用大量 CPU 的任务不被受输入/输出限制的任务所阻止
  • 确保可以智能地进行预取，从而在用户查看数据之前使数据可用。例如，我们可以预取全景的第一篇文章，因为用户通常趋向于单击该内容。
  • 向我们的图像中添加业务逻辑，从而使其能够以最佳方式显示低分辨率和高分辨率图像 – 即根据缓存中已有的内容，从缓存或网络中读取内容。
  • 最小化跨 JS/C#/C++ 进行封送的功能调用的数量。
  • 确保 UI 线程中的长时间处理任务拆分为较小的离散任务。这将使 UI 冻结减至最少。
  • 传送磁盘上的图像文件引用，而不是对这些文件进行 Blob 化处理，并将 Blob 到处传送。Blob 对于某些类型的操作来说非常理想，但当我们需要传送大量的图像时，性能将会受到影响。

我们希望听到您的反馈！

除鼓励您试用我们的应用并向我们发送反馈之外，我们还非常愿意倾听您的建议！请留下评论，并告诉我们您构建 Windows 8 应用的更多体验。如有疑问，请与我们联系，我们将乐于提供更多详细信息。我们还将感谢您告知我们能够为您开发 Windows 8 应用提供哪些帮助。

--应用体验团队合作伙伴开发经理 Jigar Thakkar