在本期的“Firefox OS：HTML5 应得的平台”（前六个视频已发布在此）中，Mozilla 首席布道师 Chris Heilmann (@codepo8) 采访了 Mozilla 的“高级 HTML5 工程师 Angle Bracket 协调员”Matthew Claypotch (@potch)，探讨了 Web Components 为 Web 应用开发者带来的激动人心的新可能性，以及 Mozilla 的 Brick 库（一个用于构建应用程序的自定义元素集合）如何帮助开发者进行过渡。你可以在 YouTube 上观看访谈。

Web Components 的意义

作为应用平台，Web 存在一个问题：HTML，这种用于标记文档并赋予其意义的语言，没有足够的元素来构建应用。HTML5 规范中有一些新的元素，但它们在各个浏览器中的支持参差不齐，并且仍然缺少其他平台（如 Flex 或 iOS）直接提供给开发者的许多小部件。因此，开发者使用非语义 HTML（主要是 DIV 元素）构建自己的“小部件”，例如菜单栏、滑块控件和日历，并使用 JavaScript 使其交互，并使用 CSS 使其主题化。

这是一种很好的解决方法，但问题在于我们是在浏览器的功能之上添加内容，而不是扩展它们现有的功能。换句话说，浏览器需要显示 HTML，并且至少能够以每秒 60 帧的速度出色地完成这项工作。然后，我们在此基础上添加我们自己的小部件功能，并对其进行动画处理和更改显示，而不会通知浏览器。我们不断地协调浏览器的性能和我们自己代码在它之上的性能。这会导致界面滞后、耗电和闪烁。

为了解决这个问题，一些公司和标准机构成员正在开发 Web Components 规范，该规范允许开发者使用自己的元素来扩展浏览器对标记的理解。与其编写滑块控件并在浏览器已经显示完文档后使其工作，不如定义一个滑块元素并使其成为正常显示流的一部分。这意味着我们的窗口小部件将变得更加响应，不会与浏览器的渲染流程冲突，并且总体上性能更好。特别是在低规格移动设备上，这将是一个巨大的胜利。整个过程已经开始：例如，如果你在文档中添加一个 video 元素，你将看到一个带有计时滑块条、播放按钮和音量控件的视频控制器。所有这些都是 HTML、CSS 和 JavaScript，你甚至可以在调试工具中看到它们。

Firefox OS 的目标是低端设备，因此它可以从作为渲染流程一部分的小部件中获益良多，这就是 Mozilla 创建 Mozilla Brick 的原因，它是一个用于构建应用程序的自定义元素集合。之前，我们使用名为 XTags 的库引入了这个概念，该库为 Brick 提供支持。使用 Brick，创建一个例如 基于卡牌的应用程序布局 很简单，使用以下标记

  
    0I'm the first card!
  
  
    1
    
      These cards can contain any markup!

      
      
      
    
  
  
    2 
  

生成的应用程序由三个卡牌组成，可以将其动画化到另一个卡牌中，而无需执行任何操作，只需调用 deck.shuffleNext(); 函数即可。

Web Components 目前是一个热门话题，每个星期都会出现许多库和框架。我们希望通过使用 Brick，我们可以使开发者能够快速干净地为 Firefox OS 构建非常响应的应用程序，并将让应用程序表现良好的痛苦留给操作系统。