Mozilla Hacks

Web Components 和 Firefox 的更新

头像照片 作者 Soledad Penadés

发布于 2015 年 11 月 20 日 在

Web Components 是四个技术的统称，旨在简化 UI 开发并使其更具模块化。它自 2011 年左右就开始开发：对于互联网标准来说，这是一个很长的时间！

随着越来越多的供应商开始实施这些规范，以及开发者在使用它们的过程中积累了实际经验，所有规范都一直在不断变化。

因此，**我们都对每个浏览器中哪些功能是原生支持的，哪些功能不是原生支持的感到困惑，这是很自然的。**

迄今为止，在 Firefox 中

  • 只有 <template> 是原生支持的。
  • 新的基于共识的 Shadow DOM 的第一个版本预计将在 2016 年上半年发布。您可以阅读 Anne 的 和 Wilson 的 文章以了解更多详细信息。
  • 最初基于原型实现了一个 Custom Elements 版本，Blink 也发布了该版本，但 Apple 的 Ryosuke Niwa 正在完善一些实验，以提出使用 ES6 类语法的新方法。在达成共识之前，Firefox 不会积极开发 Custom Elements。
  • HTML Imports 未发布，因为我们想看看开发者如何使用 ES6 模块。之前有一个未完成的早期实现，该实现将被移除。

我们非常清楚，**对于希望确保其 Web Components 代码在不止一个浏览器中都能正常工作的开发者来说，跟踪这些更改非常耗时。** 我们正在通过在 MDN 中创建 Firefox 中的 Web Components 状态 页面来解决此问题。它将提供有关 Firefox 中已实现功能的最新信息以及您可能遇到的任何注意事项，以便您随时参考以检查哪些功能可用或不可用。

感谢 Wilson Page、Anne van Kesteren、Andrew Overholt 和 Jean-Yves Perrier 对此主题的见解！

关于 Soledad Penadés

Sole 在 Mozilla 的开发者工具团队工作，帮助人们在 Web 上创造惊人的事物，最好是实时创造。在 irc.mozilla.org 上的 #devtools 频道找到她。

更多 Soledad Penadés 的文章…

7 条评论

  1. phil

    “我们想看看开发者如何使用 ES6 模块”

    你一年前也说过同样的话（https://hacks.mozilla.ac.cn/2014/12/mozilla-and-web-components/）。
    现在 ES6 模块已经出现了，那我们还在等什么呢？

    我认为你不应该“等待看看开发者会做什么”。
    开发者会使用 Fb、Google、Mozilla 等公司向他们提出的方案，他们不会仅仅为了开发自己的应用程序而发明自己的框架和模式，他们会使用可用的方案。

    Facebook 开发了 React，Google 有 Polymer……Mozilla 也开发自己的框架（这次不要像 Brick 一样放弃它）会很好，这不仅可以开发网站、Firefox OS 应用程序等，还可以证明 Mozilla 对 Web 标准的选择是一致的（例如，这里将显示 HTML Imports 不是必需的，我们可以使用 ES6 模块获得更简洁的解决方案）。
    但除此之外，在没有可靠的框架/概念验证来证明你的观点的情况下，说“我们喜欢它”或“我们反对它”很容易。

    2015 年 11 月 23 日 15:16

    1. Soledad Penadés

      补充一些背景信息，ES6 只是在 *2015 年 6 月* 成为标准的——不到五个月前。尽管浏览器中已经实现了许多 ES6 功能，但模块尚未实现，开发者只能通过使用 Babel 等工具将 ES6 代码“转译”为“普通 JavaScript”来使用导入。但这意味着你没有测试真正的导入是如何工作的，因此浏览器制造商不能根据 polyfill 的行为做出决策，因为当真正的实现出现时，由于平台限制，它的行为可能与 polyfill 不同。这非常危险，尤其是在加载代码时。

      使用 polyfill 不是“可靠的框架”或“概念验证”，而是一个“基于标准草案的临时解决方案”，它应该帮助开发者告知浏览器制造商哪些对 Web 平台有利或不利。这是一个草案。一次探索。正在进行的工作。开发者和浏览器一起工作！

      与此同时，Firefox OS 的开发人员一直在探索在没有 HTML Imports 的情况下使用 Web Components，并且几乎所有 UI 现在都是使用组件构建的。他们还提出了一些有趣的观点，这些观点已被纳入规范更改的部分，这些更改基于实际使用和现实经验。你可以在这里查看它们：https://wiki.mozilla.org/Gaia/Shared/Components

      2015 年 11 月 30 日 02:00

  2. Uruguayan Salamander

    ES2015 模块和 HTML Imports 具有截然不同的用途，并且工作方式完全不同。当然，你可以使用带有多行字符串中元素的 Shadow DOM HTML 的 .js 文件进行导入，但这显然违背了初衷。当然，使用模块是为了代码，而使用导入是为了 HTML？
    类似地，如果浏览器供应商阻止发布 ES2015 模块，因为在服务器端捆绑依赖项的等效功能替代方案存在，那么这种逻辑将受到质疑。

    2015 年 11 月 25 日 05:50

  3. gian

    对于那些希望今天尝试 Web Components 而不使用大型框架的臃肿代码的人来说，可以使用 http://riotjs.com。在 Riot 中，我们能够仅使用 18kb 的代码渲染和管理 100% 的 Web Components。Riot 是当前原生 Web Components 功能的一个真正有效的跨浏览器高性能替代方案。查看它并在 GitHub 上提供您的反馈。

    2015 年 11 月 26 日 09:00

  4. Lunatic Lambda

    你真的不能责怪人们选择发明越来越多的框架和库来做他们想做的事情。等待某件事成为标准并被主要浏览器实现 4 年，或者选择一个可以在 3 天内满足客户需求的框架，这从来都不是问题。

    2015 年 11 月 29 日 19:09

  5. Ivan Dejanovic

    Soledad Penadés 感谢 Gaia 组件。不幸的是，远程仓库和演示页面的链接已损坏。

    2015 年 12 月 2 日 03:18

    1. Soledad Penadés

      抱歉，Ivan——事实证明，组件正在从以 gaia- 为前缀重命名为 fxos-，以更清楚地表明它们的来源。

      演示页面现在位于 http://fxos-components.github.io/gaia-components/，组织名为 fxos-components：https://github.com/fxos-components/

      更改刚刚发生在昨天，所以时间有点不凑巧！

      2015 年 12 月 2 日 06:37

本文的评论已关闭。