推出 Bento 组件库

Alan Orozco · Bento 工程 · Google

2021 年 12 月 8 日 · 5 分钟阅读

Unboxing the Bento components library

大家好！今天我们很高兴推出我们的 Bento 组件。您可能会问，什么是 Bento 组件？它们是内置了出色用户体验的高性能组件！我们希望您能试用它们并向我们提供反馈！

Bento 组件是 AMP 团队的一个项目的结果，该项目始于 2 年前，旨在解决发布商的反馈。它们提供与 AMP 组件类似的性能优势，但提供了更大的灵活性，因为它们可以与任何其他库或框架结合使用。您可以在官方 AMP 博客上阅读有关 Bento 和 AMP 未来发展的更多信息。

bento-accordion

bento-base-carousel

bento-embedly-card

bento-facebook

bento-fit-text

bento-inline-gallery

bento-instagram

bento-jwplayer

bento-lightbox

bento-lightbox-gallery

bento-mathml

bento-selector

bento-sidebar

bento-social-share

bento-soundcloud

bento-stream-gallery

bento-timeago

bento-twitter

bento-wordpress-embed

为什么选择 Bento 组件？

构建可访问、高性能的网页是一项艰巨的任务。而且这不仅仅是构建您自己的功能。通常，在不损害页面性能的情况下集成第三方嵌入也是一项挑战。

好消息是，有一个丰富的 Web 组件生态系统可以解决这些问题，因为许多网页需要类似的功能。但这又导致了一个新问题：现在您必须决定众多可用组件中哪一个最好。您需要检查该组件是否适用于所有浏览器，或者在同一页面上混合使用不同的组件是否会产生不良副作用。它们也不应对您的核心网络指标得分产生负面影响。

Bento 组件应运而生。它们的设计考虑了三个目标

出色的页面体验
框架独立性（但具有出色的框架支持）
组件隔离

让我们仔细了解一下这意味着什么。

页面体验

第一个很简单：页面体验。2021 年 8 月，Google Search 推出了一组新信号，用于衡量用户如何感知与网页交互的体验，而不仅仅是其纯信息价值。页面体验排名信号的重要组成部分是核心网络指标。Bento 组件可以帮助您获得良好的核心网络指标分数。

Bento 组件具有较小的捆绑大小，您只需加载所需的组件即可。您不需要一个完整的框架就可以向您的网站添加轮播 - 您只需使用 bento-carousel-component！

Bento 组件还可以帮助改善核心网络指标。例如，Bento 组件始终尊重其容器的大小，并且仅在用户交互触发时才更改它。这可以防止内容布局偏移，否则可能会发生这种情况，例如，当嵌入式代码动态插入时。

Bento 组件的另一个好处是默认情况下会延迟加载资源。对外部 URL 的请求仅在嵌入式代码接近用户在页面上的位置时才会发生。这对于第三方嵌入式代码（例如 Facebook 或 Twitter）特别有用。

框架独立性

下一个是：具有出色框架支持的框架独立性。Bento 组件可以与任何框架或 CMS 一起使用。

Bento 组件打包为Web 组件和React/Preact 组件。这样，Bento 组件可以与 React 和 Preact 无缝集成，但也可以通过使用 Web 组件版本在其他任何地方使用。

这是一个 Web 组件示例

<!DOCTYPE html>
<html>
  <head>
    <script async src="https://cdn.ampproject.org/bento.js"></script>
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
    />
  </head>
  <body>
    <bento-fit-text style="max-width: 200px; height: 60px">
      Hello world!
    </bento-fit-text>
  </body>
</html>

请注意，在前面的示例中，我们没有编写或捆绑任何 JavaScript。我们可以将此代码粘贴到 .html 文件中，然后结束这一天！这使得 Bento 组件非常适合 CMS，例如 WordPress、Drupal 或 Eleventy，它们严重依赖服务器端渲染。

Bento 组件的响应方式与您对任何 HTML 元素的预期相同。如果您修改元素的属性或其子树，则更改将反映在其呈现的状态中。

<script>
  // <bento-fit-text> responds to mutations.
  // Changing its content re-calculates its optimal font size.
  const element = document.querySelector('bento-fit-text');
  element.textContent = 'Longer text, smaller font size';
</script>

这使得 Bento 非常适合可以与原生 DOM 元素交互的任何框架。

以下是另一个示例，在 React 应用程序中使用的 Bento 组件

import React, {useRef, forwardRef} from 'react';
import {BentoLightbox} from '@bentoproject/lightbox/react';
import '@bentoproject/lightbox/styles.css';

const MyLightbox = forwardRef((_, ref) => {
  return (
    <BentoLightbox
      ref={ref}
      closeButtonAs={(props) => (
        <button {...props} aria-label="Close my fancy lightbox">
          Close!
        </button>
      )}
    >
      <h1>Hello World</h1>
    </BentoLightbox>
  );
});

function App() {
  const lightboxRef = useRef();
  return (
    <>
            <MyLightbox ref={lightboxRef} />      <button
        onClick={() => lightboxRef.current.open()}
      >
                Open      {' '}
      </button>   {' '}
    </>
  );
}

在 React 中使用 Bento 组件的一大好处是，React 版本不仅仅是 web 组件的一个简单包装器。Bento 组件实际上是使用 React 实现的。它们的行为与任何其他 React 组件类似，因此非常容易集成到您的 React 应用程序中。

组件隔离

最后，组件隔离，一个经常被忽视的话题。Bento 将所有内容封装在组件级别，而不是在文档级别。

使用 web 组件时，组件的内容会渲染在 Shadow Root 中。这封装了样式，以便您自己定义的样式不会被组件的实现覆盖，反之亦然。

第三方嵌入，例如嵌入推文或 Instagram 帖子，通常需要包含来自供应商 URL 的脚本。这些脚本可能会出现意外行为。它们可能会在页面周围推元素，过早加载其他资源，或以其他方式对主文档的性能产生负面影响。在需要它们的情况下，来自第三方 URL 的不受信任的脚本绝不会在包含嵌入的文档上运行。它们在“代理框架”中运行，这可以防止它们与您页面上的布局和数据交互。脚本会延迟加载，因为它们会尊重组件的 loading 属性。

盒子里有什么？

Bento 组件的目标是为常见的网站功能提供开箱即用的解决方案。我们可以将 Bento 组件分为三类

用户体验

实现轮播并不难，但实现避免内容偏移的轮播，可访问，并支持多种不同类型的内容，例如图像、视频、iframe，可能很难做到。以下是 Bento UI 组件的更多示例

bento-lightbox-gallery：将 lightbox 属性添加到您页面上的任何图像，以将其添加到一个美观的灯箱画廊中。
Bento-sidebar：一个灵活的汉堡菜单。
bento-inline-gallery: 带有可选分页点和缩略图的图片轮播。

第三方嵌入

第三方嵌入通常非常繁重，并且会对您页面的性能产生负面影响。Bento 组件为常见的第三方嵌入提供了包装器，这些包装器经过适当的沙盒处理，并实现了延迟加载等最佳性能实践。查看 bento-twitter 或 bento-instagram 以获得一个概念。

实用工具

通常是那些简单的事情会花费时间。Bento 组件提供许多小帮手，它们可能难以实现，但非常有用。一些示例是

bento-fit-text：自动调整文本大小以适应可用空间。
bento-timeago：使用模糊时间戳计算到或离开指定日期和时间，例如 30 年后或 3 小时前。
bento-selector：类固醇上的单选按钮。

但这只是几个示例，您可以在 Bento 开发者文档中找到组件的完整列表。

现在尝试 Bento！

阅读入门指南以试用 Bento 组件或查看所有可用组件！该团队鼓励并欢迎开发者通过 GitHub 提供反馈。