介绍 Brick：用于加速应用开发的极简标记 Web Components

那些处于 HTML5 最前沿的开发者可能已经听说过令人兴奋的 Web Components 规范。如果你还没有听说过，你可能想了解一下是什么让它如此令人兴奋，但长话短说，Web Components 承诺通过让 Web 开发人员编写自定义的可重用 HTML 标签来开辟一个新的开发领域。可以将它们视为无需额外代码初始化或样板标记/样式的 JavaScript 插件。

不幸的是，我们将要等一段时间才能看到浏览器对该规范的原生支持，但这并不意味着开发者不能现在就开始利用组件的概念，这要感谢 Google 的 Polymer 框架和 Mozilla 的 x-tags polyfill 库（X-Tag 和 Polymer 都共享相同的低级 Web Component polyfills）。

我们很自豪地宣布 Brick 的 beta 版发布，这是一个跨浏览器库，它提供了新的 **自定义 HTML 标签**，将常见的用户界面模式抽象成易于使用、灵活且语义化的 Web Components。Brick 建立在 Mozilla 的 x-tags 库之上，允许你在标记中插入简单的 HTML 标签来实现滑块或日期选择器等小部件，通过避免最初考虑底层的 HTML/CSS/JavaScript 来加速开发。

将 Brick 付诸实践

假设你想要在你的应用程序中实现一个跨浏览器、移动友好的日历小部件。使用当前的 JavaScript 插件，例如 jQuery UI，这将需要在你的 HTML 中插入样板、非语义标记，以及通过 JavaScript 明确地初始化和管理它。但是，使用 Brick，你可以通过添加一个自定义 HTML 标签来实现这样的组件，你可以将其视为一个普通的原生标签。

对于我们的日历示例，这意味着只需要在你的应用程序中包含库的 CSS 和 Javascript 文件，然后将以下标签添加到你的标记中

这将创建一个看起来像这样的 DOM 元素

想要编辑组件的行为，比如添加导航控件或预选日期？就像任何其他原生标签一样，你可以通过更改标签的属性来更改组件的行为！

可用的 Brick

在撰写本文时，Brick 包含 13 个不同的标签，其中大多数是完全独立的，甚至可以单独下载，而不是作为一个单独的包。

一些标签将复杂的小部件抽象成简单的 HTML 标签，例如

<x-calendar>（日历，如示例所示）
<x-deck>（一个可循环的幻灯片画廊）
<x-tooltip>（顾名思义）。

其他的是现有原生元素（尚未得到全球支持）的跨浏览器 polyfill 实现，例如

分别为 <input type="range"> 和 <input type="date"> 提供 polyfill。还有一些是结构组件，简化了某些组件的样式和标记，例如 <x-layout>，它确保内容、标题和页脚可以在没有显式样式标记的情况下填充容器元素。

每个标签都带有灵活的属性/JavaScript API，并且可以完全定制样式以匹配你的应用程序。

开始用 Brick 构建

想要在你的应用程序中开始使用组件？前往 mozilla.github.io/brick 下载发行版包，查看演示，并阅读可用标签的文档。或者，访问 Brick Github 页面查看源代码并为这项工作做出贡献！

该库仍处于 beta 版，因此我们感谢所有用户的反馈！Brick 已经开始在野外出现，所以我们很想听听你是如何使用它的！

我是一名 Mozilla WebDev 实习生，在 2013 年夏季与 Apps/DevEcosystem 团队合作。我目前是卡内基梅隆大学的学生，在那里我学习计算机科学/人机交互。

www.contrib.andrew.cmu.edu/~lwzhang/

Leon Zhang 的更多文章…

Mozilla Hacks 的技术布道者和编辑。关于 HTML5、JavaScript 和开放网络发表演讲和博客文章。Robert 是 HTML5 和开放网络的坚定支持者，自 1999 年以来一直在从事 Web 前端开发工作 - 在瑞典和纽约市。他还经常在 http://robertnyman.com 上发博文，喜欢旅行和结识新朋友。

Robert Nyman [荣誉编辑] 的更多文章…

45 条评论

Lech Rzedzicki

你的意思是像 XUL 或者更普遍地说像 XML？；)
轮子一直在被重新发明 :/

2013 年 8 月 27 日下午 06:50
1. Potch
  
  XUL 组件很强大，但局限于 Gecko 渲染。Brick（和 Web Component 规范）是一个特别棒的重新发明的轮子。想象一下，如果我们还用木制辐条滚动！
  
  2013 年 8 月 27 日下午 13:15
2. T
  
  重新发明轮子是一件好事。如果做得好，技术会进步，但无论如何，它都代表着前进的热情；抵制自满。我实际上在面试中会提出这个问题，以了解这个人是如何思考的，从而了解这个人从文化和技术上是如何思考的。要找到一个平衡点，但我们不能将迭代抛到一边。
  
  2013 年 8 月 28 日下午 16:30
  1. Robot
    
    当你老了，你会明白什么是自满
    
    2013 年 8 月 30 日上午 10:39
  2. Rand McRanderson
    
    说得没错，但迭代和抛弃过去的东西之间是有区别的。
    
    这部分取决于，你使用这种技术的技能是否对下一代技术有用，或者是否可以通过某种方式进行变异以适应下一代技术。否则，这种技术很好玩，但还不能用于生产。
    
    2013 年 9 月 2 日上午 09:44
Phunky

有没有讨论过如何在 Web Components 中处理媒体查询类型的功能？

最好从一开始就将它内置进去！

2013 年 8 月 27 日下午 06:56
1. Potch
  
  我们正在积极地考虑这个问题。有些组件肯定会受益于不同屏幕尺寸的差异样式 - 例如。
  
  2013 年 8 月 27 日下午 13:17
  1. Phunky
    
    想想 RESS 而不是 RWD。
    
    2013 年 8 月 29 日上午 02:43
Phunky

我从未使用过 XUL，所以无法发表评论，但总会有一些情况需要针对不同的设备进行调整，当然原生支持会更好。

2013 年 8 月 27 日下午 07:04
bardu

你们会推荐在 Firefox OS 上使用 Brick 吗？

2013 年 8 月 27 日上午 08:03
1. Angelina Fabbro
  
  是的，当然 - 我们这个周末在巴西的波尔图阿雷格里举办了 Firefox OS 工作坊，我用演示应用程序教大家了解 Brick。完美的用例。
  
  2013 年 8 月 27 日上午 10:23
  1. bardu
    
    @Angelina: 你的演示应用程序可以在哪里获取？它是在实际设备上运行还是在模拟器中运行？
    
    2013 年 8 月 27 日下午 15:28
  2. romulo santos
    
    我就在那里，最后我的团队用上了 Twitter Bootstrap。我们当时很赶时间，我在做 REST 后端，所以我真的不知道他们为什么要做出这样的决定。现在我从头开始重做应用程序，并决定再给 Brick 一次机会。
    
    2013 年 9 月 15 日下午 12:11
2. Potch
  
  当然！我们正在构建这些组件，以便在任何 Web 应用程序环境中使用，包括 Firefox OS。
  
  2013 年 8 月 27 日下午 13:13
Ted Drake

与使用 HTML5 form type=”date” 相比，Web Component x-calendar 有什么优势？它们最终会生成相同的操作系统日历选择器吗？还是会生成一个独立于输入的独立日历？

2013 年 8 月 27 日上午 08:04
1. Leon Zhang
  
  你好，Ted，
  
  对于日期选择器，我们实际上提供了一个标签，它以你描述的方式使用 x-calendar。
  
  本质上，如果浏览器支持它，它将默认使用 native input type=date 元素，否则它将生成一个独立的 polyfill。你也可以选择强制使用 polyfill 渲染，以防你想要一个一致的 UI，而无论原生支持如何。
  
  你可以在此处找到更多详细信息：http://mozilla.github.io/brick/
  
  2013 年 8 月 27 日下午 14:17
  1. Leon Zhang
    
    抱歉，链接错误，我的意思是这个：http://mozilla.github.io/brick/demos/datepicker/index.html
    
    2013年8月27日下午2:18
2. Potch
  
  datepicker 和 slider 是 polyfills，因此当系统提供控件的原生版本时，我们将回退到原生 input[type=date] 和 input[type=range]。日历提供了一个独立于输入的独立日历。
  
  2013年8月27日下午2:47
Gerardo Capiel

就像许多科技创新一样，对于有残疾的人来说，它是一把双刃剑，Brick 可能是最好的或最糟糕的事情之一。我希望 Brick 社区从一开始就构建可访问性。我强烈建议审查和利用 Bryan Garaventa 关于可访问 Web 组件的开源工作。

http://whatsock.com/modules/aria_calendar_module/demo.htm

https://github.com/accdc

2013年8月27日上午8:45
1. Potch
  
  我们正在与 Mozilla 无障碍团队合作，以确保在稳定发布时，Brick 组件将具有很高的无障碍性。如果您在无障碍性方面遇到任何问题，请告诉我们。
  
  2013年8月27日下午2:53
James Meldrum

为什么使用 x- 前缀？
Javax？
Xemacs？

良好的开端。

2013年8月27日上午9:05
1. Fred
  
  x- 源于“x-tag”，Mozilla 的 Web 组件 polyfill + 库 (http://www.x-tags.org/）。
  
  构建所有这些的 Web 组件标准要求自定义元素名称中包含破折号。
  
  2013年8月27日下午1:56
Aras

这非常令人兴奋，而且早就该了！我很高兴看到这种明智的 UI 解决方案正在为 Web 出现。一定会尝试使用砖块。感谢您撰写这篇精彩的文章！

2013年8月27日下午12:04
PixnBitsOrg

听起来很像 Angular 的指令：http://docs.angularjs.org/guide/directive

2013年8月27日下午1:08
1. Potch
  
  它们在通过标记提供新功能的能力方面与 ng-directives 非常相似。但是，这些组件的接口独立于任何框架。实际上，您可以轻松地将 Brick 组件混合到 Angular 应用程序中，并使用 angular.element 与它们交互，就像您使用任何其他 HTML 元素一样。
  
  2013年8月27日下午2:49
Igor Costa

最终，Web 开发人员将拥有组件化的力量，以提高获得更好性能和更好代码质量的机会。

另一方面，Apache Flex 在 9 年前就迈出了这一步，问题只在于 FP 用于渲染。希望砖块很快成为市场标准。

2013年8月27日下午2:07
Nobody

终于赶上了 IE 5 的行为！

2013年8月27日下午2:44
1. Richard
  
  我的想法完全一样！但那是 5.5，而不是 5.0，而且它们在 IE10 中已被删除。
  
  http://msdn.microsoft.com/library/ie/ms531426.aspx
  http://msdn.microsoft.com/en-us/library/ie/hh801216%28v=vs.85%29.aspx
  
  2013年8月28日下午12:33
2. Potch
  
  很高兴最终以一种跨浏览器且开源的方式赶上！
  
  2013年8月29日上午11:27
Alexander Voronin

XAML 浏览器版？不错…

2013年8月27日下午11:53
Mark McDonnell

我对 Web 组件有两个担忧

1.) 如果您加载了两个组件，它们都使用 jQuery 等库，jQuery 会加载两次吗？

2.) 我们是否会看到这些组件被滥用，就像 jQuery 插件时代一样，没有经验的开发者大量发布编写不当的插件，我们遇到了插件过载问题。想象一下，一个初级开发者决定通过加载完整的 jQuery 以及 jQuery UI 来编写他们自己的日历小部件，然后将其发布为 Web 组件。这样做会导致灾难性的性能影响。

第二个观点本身并不是 Web 组件的问题，但绝对值得关注，因为它会在未来导致什么，如果开发人员社区没有得到关于此功能“不要做什么”的适当指导。

关于第 1 点）我很想知道这种情况是如何（或将/应该）处理的？

谢谢。

2013年8月28日上午1:19
1. Potch
  
  1) 核心 Brick 组件都共享一个公共依赖核心，该核心在捆绑包中只包含一次。如果您正在引入其他组件或单个 Brick 元素，它们将在 Bower 上可用，Bower 是一个 js/css 包管理器。Bower 处理依赖关系管理，即使多个组件需要它，也只会下载一次给定的依赖关系。
  
  2) Web 的美妙之处在于您可以自由编写代码，无论好坏。Brick 作为组件库/捆绑包将尝试以身作则，建立最佳实践，并将我们的组件整理到一个行为良好的集合中。
  
  2013年8月29日上午11:31
Semih Akalin

有趣。如何将这种类型的标记与 Ember 或 Angular 等东西集成？

2013年8月28日上午3:47
好的

我想这可以取代 jQuery？我无法跟上所有这些新发展。

2013年8月28日上午7:00
1. Potch
  
  这并不试图取代 jQuery，尽管它可以轻松取代 jQuery UI。Brick 的作用是与现有的 Web 框架并存，并通过 DOM 而不是新的专有 API 公开其所有功能，从而设计为与它们无缝协作。例如，要使用 jQuery 与 x-calendar 交互，您可以说 `$(‘x-calendar’).attr(‘chosen’, ‘2013-08-27’);`，这将按照您的预期工作！
  
  2013年8月29日上午11:34
Zach Moreno

“在撰写本文时，Brick 包含 13 个不同的标签……”

我认为作者的意思是“……13 个不同的元素……”
如这里所定义 - https://mdn.org.cn/en-US/docs/Web/HTML/Element

2013年8月28日上午8:03
1. Potch
  
  “自定义元素”和“Web 组件”的名称经常混淆，但是的，从技术上讲，我们正在使用规范的“自定义元素”部分。
  
  2013年8月29日上午11:35
mintypoohs

http://html6spec.com 或者这个……笑话。

2013年8月28日上午10:14
garbas

非常类似于 PatternsLib 试图做的事情（只是语法不同）http://patternslib.com

2013年8月28日上午11:06
niutech

太棒了，这可以称为 HTML6！无需使用 jQuery UI 等外部库来制作小部件，只需键入纯 HTML 标签，例如：x-tabbar、x-slidebox、x-slide、x-accordion、x-tooltip、x-modal、x-datepicker 并运行 brick.js。

我希望它与 Polymer UI 元素兼容。

2013年8月28日下午3:21
1. Zach Moreno
  
  永远不会有 HTML6，因为 HTML 规范将继续独立于版本号进行演变。因此，新的 doctype 没有定义版本控制。
  
  2013年8月29日下午1:56
  1. niutech
    
    不，HTML 规范是有编号的，最新的是 HTML5.1：http://www.w3.org/TR/html51/，因此最终将出现 HTML6，它可能包含诸如 Web 组件之类的自定义元素。
    
    2013年8月30日下午3:05
    1. Rand McRanderson
      
      关键是，如果没有 doctype，就无法区分 HTML6 文档与 HTML5 文档。
      
      我对 HTML 处理器的建议是假设您不认识的每个标签都是合法的。毕竟，您度假期间 HTML 规范可能会有更新。
      
      2013年9月2日上午9:48
pd

为什么您不能将构建更好的通用小部件的过程快进到 HTML5 中？社区对开放式网络作为“平台”的喋喋不休，而标准化并跨所有浏览器支持的意义重大的标签却少之又少，实在令人难以置信。日期选择器作为简单的小部件在桌面开发者中可用多久了？可能已有三十年了，但它们在 HTML 中仍然没有原生可用。相反，浏览器开发人员将重点放在所有其他领域。

这些 x-tags 可能有用，但实际上，开发人员社区已经在 jQuery UI 等形式中提供了非常相似的这些小部件版本。好吧，您不需要了解 JavaScript 对象的基础知识来初始化 x-tags，可以使用属性来代替。这很方便，但仍然需要一个单独的库文件，就像 jQuery UI 一样。

HTML5 这样的过度炒作标准，因为它在扩展提供给开发人员的简单标签数量和质量方面确实非常缺乏雄心壮志。

2013年9月8日上午10:10
1. niutech
  
  嗯，仅仅 HTML 并不适合 Web 应用程序，而是适合网页。因此缺乏内置的复杂小部件，尽管日期选择器作为 input 标签可用。您可以从像 div 和按钮这样的基本标签构建其他标签。
  其次，HTML 是一种静态语言，因此您必须使用 JS 来添加行为（即使它隐藏在 x-tag 中）。请记住，Web 是向后兼容的，因此您必须依赖 JS。
  我认为 x-tags 和 Web 组件是朝着正确方向迈出的步伐，朝着更模块化的网页和更快的加载时间（组件应该被缓存）。
  
  2013年9月8日下午4:22

本文的评论已关闭。

Hacks

作者：Leon Zhang，Robert Nyman [荣誉编辑]

将 Brick 付诸实践

可用的 Brick

开始用 Brick 构建

关于 Leon Zhang

关于 Robert Nyman [荣誉编辑]

45 条评论

介绍 Brick：用于加速应用开发的极简标记 Web Components

作者：Leon Zhang，Robert Nyman [荣誉编辑]

将 Brick 付诸实践

可用的 Brick

开始用 Brick 构建

关于 Leon Zhang

关于 Robert Nyman [荣誉编辑]

发现 Web 开发的优秀资源

感谢您！请查看您的收件箱以确认您的订阅。