DevBytes: Web Components - Overview Google Developers English Chinese (Simplified)

DevBytes: Web Components - OverviewYouTube↗ IA↗(long shot)
Science & Technology 25K views 248 likes 14 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

Hi. I'm Eiji, and I'm a developer advocate at Google.

我叫英二是一名来自 Google 的开发者布道师 I'm Eiji, and I'm a developer advocate at Google.

Today, I'm going to give you an overview of Web Components.

今天我将和大家笼统的介绍一下Web Components Today, I'm going to give you an overview of Web Components.

Web Components are a set of emerging standards that

Web Components 是一套新兴的规范 Web Components are a set of emerging standards that

changes the way you develop web apps entirely.

它可以完全改变你开发网页应用的方式 changes the way you develop web apps entirely.

They will enable you to build and reuse UI components

这套规范允许你在开发网页应用时 They will enable you to build and reuse UI components

when building web applications.

创建和复用 UI 组件 when building web applications.

Let's take a look at how you might build a UI element today

让我们来看看在今天你要如何去创建一个 UI 元素 Let's take a look at how you might build a UI element today

and how that process can be improved by using Web Components.

同时了解使用 Web Components 如何改善这个过程 and how that process can be improved by using Web Components.

Here is a nice looking chart.

这里有一张很好看的图表 Here is a nice looking chart.

How would you build this using HTML, CSS, and JavaScript?

你会如何使用 HTML CSS 和 JavaScript 来创建它呢 How would you build this using HTML, CSS, and JavaScript?

It must be a bit of work if you create this from scratch.

如果你从零开始那么工作量很大 It must be a bit of work if you create this from scratch.

To help us build our chart, we can use the Google Visualization API.

为了帮助我们做这个图表我们可以使用 Google Visualization API（可视化） To help us build our chart, we can use the Google Visualization API.

First, load the Google JavaScript Library to use the API.

首先载入 Google JavaScript 库以使用这些API First, load the Google JavaScript Library to use the API.

Then, add the div tag onto the body as a placeholder.

然后添加 div 标签到 body 中作为占位符 Then, add the div tag onto the body as a placeholder.

Now, using JavaScript initialize the library

现在使用 JavaScript语句通过加载 Now, using JavaScript initialize the library

by loading Visualization API.

Visualization API 来初始化类库 by loading Visualization API.

Then, set the values and the options at callback.

接着在回调函数中设置值和一些可选项 Then, set the values and the options at callback.

Finally, specify the DOM element to upend the chart graphic.

最后指定用来放置图表的 DOM（文档对象模型）元素 Finally, specify the DOM element to upend the chart graphic.

Now, let's dive into the Web Components

现在让我们进入 Web Components 的方式 Now, let's dive into the Web Components

approach and see how that drastically

看看它如何剧烈的改变了我们创建一个图表的方式 approach and see how that drastically

changes the way you build a chart.

看看它如何剧烈的改变了我们创建一个图表的方式 changes the way you build a chart.

With Web Components, the first thing you should do

使用 Web Components 你需要做的第一件事 With Web Components, the first thing you should do

is to import Google Chart Component.

就是载入 Google Chart Component（图表组件） is to import Google Chart Component.

To enable unsupported browsers to work,

为了使不支持的浏览器也能正常表现 To enable unsupported browsers to work,

you will also need to load an open source polyfill called platform.js.

你还需要加载一个开源的polyfill（提供兼容性的代码） platform.js you will also need to load an open source polyfill called platform.js.

Then add the Google Chart tag and fill in the attributes as you wish.

然后添加一个 Google Chart 标签并且把你想要的属性填进去 Then add the Google Chart tag and fill in the attributes as you wish.

就搞定了 And done.

Did you notice the difference between those two approaches?

注意到两种方式的区别了吗 Did you notice the difference between those two approaches?

The first one was imperative using JavaScript.

第一种是使用 JavaScript 的指令 The first one was imperative using JavaScript.

The second one was declarative using HTML tag.

而第二种则是使用 HTML 标签的声明 The second one was declarative using HTML tag.

The declarative approach might look easier to handle,

声明方式可能看上去更容易处理一些 The declarative approach might look easier to handle,

but the biggest difference here is not easy or difficult.

但最大的不同并不在难易 but the biggest difference here is not easy or difficult.

It is an underlying knowledge required for the developer

而是当使用那些 API 时，开发者需要 It is an underlying knowledge required for the developer

to use those APIs.

很多潜在的知识 to use those APIs.

In the original example, the first thing you have to do

在最初的那个例子中你首先需要 In the original example, the first thing you have to do

is to understand how Google JavaScript Library works.

理解 Google JavaScript 库是如何工作的 is to understand how Google JavaScript Library works.

Then, you can learn how to use the APIs to control it.

然后你才可以学习如何运用 API 来控制它 Then, you can learn how to use the APIs to control it.

On the other hand, the Web Components approach

相反 Web Components 使用 DOM API On the other hand, the Web Components approach

uses DOM APIs, which most of the web developers

这是大多数 Web 开发者 uses DOM APIs, which most of the web developers

are already familiar with.

都非常熟悉的 are already familiar with.

So you can just start by learning how to use attributes and APIs.

这样你就可以直接从学习如何使用属性和 API开始 So you can just start by learning how to use attributes and APIs.

The difference seems subtle, but you'll notice the benefit

这个差异看上去很微妙但是当你使用其他 UI 类库时 The difference seems subtle, but you'll notice the benefit

when you work with other UI libraries.

你就会发现它的好处 when you work with other UI libraries.

For example, jQuery UI, Bootstrap, Closure Libraries,

比如 jQuery UI Bootstrap Closure Libraries 等等 For example, jQuery UI, Bootstrap, Closure Libraries,

et cetera, all use different approaches,

它们全都使用了不同的方式 et cetera, all use different approaches,

so you will have to learn them before you actually start using them.

以至于在实际开始使用之前你先要学习他们 so you will have to learn them before you actually start using them.

There are other benefits of using Web Components, as well.

使用 Web Components 还有诸多其他好处 There are other benefits of using Web Components, as well.

Let's take a look at them one by one.

让我们一个个来看 Let's take a look at them one by one.

有作用域 Scoped.

Since Web Components have scoped styles and markup,

由于 Web Components 的样式和标签是有作用域的 Since Web Components have scoped styles and markup,

imported components won't harm any other part of your web page.

引入的组件并不会损害到你网页的其他部分 imported components won't harm any other part of your web page.

In the existing libraries, there are

现有的库中存在这么一个情况 In the existing libraries, there are

cases where you have same class names or IDs that potentially

你用到的类名或ID可能 cases where you have same class names or IDs that potentially

overlap with the ones in the library.

会和库中已有的重叠 overlap with the ones in the library.

With Web Components, all markups and CSS are scoped to the element.

使用Web Components 所有标签和 CSS 的作用范围仅限于该元素内部 With Web Components, all markups and CSS are scoped to the element.

This mean the CSS bundled with the component

这意味着 CSS 被捆绑在了组件上 This mean the CSS bundled with the component

will not leak out to affect the parent document.

而不会泄漏出去影响到父document will not leak out to affect the parent document.

And it also prevents the parent document

这同样防止了父document And it also prevents the parent document

from accidentally styling the component.

的样式意外影响组件 from accidentally styling the component.

复用性 Reusable.

Because Web Components are scoped and decoupled

因为 Web Components 是有作用域 Because Web Components are scoped and decoupled

with other parts of your web page,

并且与网页其他部分解耦的 with other parts of your web page,

you can use the same component in the other part of your web

你可以在网页的不同部分甚至 you can use the same component in the other part of your web

page or even on the other website.

另一个站点使用相同的组件 page or even on the other website.

Furthermore, you can share the element

不仅如此你还可以与 Furthermore, you can share the element

with the community as open source

社区开源分享你的元素 with the community as open source

so that anyone can take advantage of your work.

使得任何人都可以从你的工作中获益 so that anyone can take advantage of your work.

分离性 Isolation.

Because Web Components are scoped,

因为 Web Components 是有作用域的 Because Web Components are scoped,

you can decouple development of UI components from main functionality.

你可以将 UI 组件的开发从主功能的开发中解耦出来 you can decouple development of UI components from main functionality.

Developers are able to independently work

开发者们因此能够独立地进行 UI 组件的开发工作 Developers are able to independently work

on UI components without needing to worry or be

而无需担心或者注意 on UI components without needing to worry or be

aware of the implementation details of other parts on the page.

网页其他部分的实现细节 aware of the implementation details of other parts on the page.

Note that maintaining those components

可以看到组件的维护 Note that maintaining those components

is much easier because of isolation as well.

因为分离也变得更加容易了 is much easier because of isolation as well.

Web Components sounds like a great solution

Web Components 听上去是 Web Components sounds like a great solution

for serving or using UI components.

服务或使用 UI 组件的绝佳解决方案 for serving or using UI components.

So how can we actually build our own component?

那么我们实际中要如何创建我们自己的组件呢 So how can we actually build our own component?

Web Components consists of four core technologies-- templates,

Web Components 由四个核心技术组成 Web Components consists of four core technologies-- templates,

Shadow DOM, Custom Elements, and HTML Imports.

templates Shadow DOM Custom Elements 与 HTML Imports Shadow DOM, Custom Elements, and HTML Imports.

Let me briefly describe what they are like.

让我简短地介绍一下它们都是什么样的 Let me briefly describe what they are like.

Templates allow you to define inert boilerplates

Templates（模版）允许你定义惰性的样板文件 Templates allow you to define inert boilerplates

for repeatedly used markup inside your HTML.

用于描述你在 HTML 中重复使用的标签 for repeatedly used markup inside your HTML.

Because the content of the template is inert,

因为模版中的内容是惰性的 Because the content of the template is inert,

it will not request images or run scripts

直到它们被送入页面里 it will not request images or run scripts

until it is sent out onto the page.

它们并不会请求图像或者执行脚本 until it is sent out onto the page.

Shadow DOM allows you to associate scoped HTML markup

Shadow DOM (后台DOM)允许你把有作用域范围的 HTML 标签 Shadow DOM allows you to associate scoped HTML markup

and CSS with an existing DOM element.

和 CSS 文件关联到现有的 DOM 元素上 and CSS with an existing DOM element.

Since Shadow DOM is encapsulated,

由于 Shadow DOM 是被封装起来的 Since Shadow DOM is encapsulated,

the style won't affect anything outside of it.

其样式并不会影响到任何外面的元素 the style won't affect anything outside of it.

Custom elements allows you to define and register

Custom elements（自定义元素）允许你定义并且注册 Custom elements allows you to define and register

a custom HTML element as if it were a native element.

一个自定义的 HTML 元素就好像它是原生的一样 a custom HTML element as if it were a native element.

HTML Imports allow you to load multiple resources,

HTML Imports（导入）允许你加载多个资源 HTML Imports allow you to load multiple resources,

such as JavaScript, CSS, and additional HTML files

比如 JavaScript CSS 和附加的 HTML 文件 such as JavaScript, CSS, and additional HTML files

by loading a single HTML.

通过加载一个单独的 HTML 文件来实现 by loading a single HTML.

Combining all those technologies will look something like this.

组合所有以上技术就会像这样 Combining all those technologies will look something like this.

First, prepare a HTML file that is separate from main HTML.

首先准备一个不同于主要 HTML 文件的 HTML 文件 First, prepare a HTML file that is separate from main HTML.

Define and register a custom element.

定义并且注册自定义元素 Define and register a custom element.

Associate Shadow DOM onto it.

关联 Shadow DOM到上面 Associate Shadow DOM onto it.

Use templates to provide contents of the Shadow DOM.

使用模版以提供 Shadow 的内容 Use templates to provide contents of the Shadow DOM.

Finally, import the component HTML file using HTML Import.

最后使用 HTML Imports 导入这个组件 HTML 文件 Finally, import the component HTML file using HTML Import.

Now you have the basic idea of Web Components.

现在你应该对 Web Components 有了个基本的概念 Now you have the basic idea of Web Components.

I'm going to post a series of videos about Web Components

我将继续发布一系列有关 Web Components 特性的视频 I'm going to post a series of videos about Web Components

features so you can learn how to use them.

让你可以继续学习如何使用它们 features so you can learn how to use them.

In the meantime, documents and resources listed here

在此期间列在这里的文档和资源都可以帮助你学习更多 In the meantime, documents and resources listed here

will help you learn more about Web Components,

都可以帮助你学习更多有关 Web Components 的知识 will help you learn more about Web Components,

so please check them out.

所以你可以去看看它们 so please check them out.

好啦 All right.

Thank you for watching.

感谢您的观看 Thank you for watching.

See you in the next episode.

我们下期再见 See you in the next episode.

Similar videos:

DevBytes: Web Components - HTML Imports
Google for Developers
21.2K views 152 likes 9 dislikes 17 Dec 201461% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201436% match

DevBytes: Intro to Google Maps Data Layer
Google for Developers
81.1K views 179 likes 7 dislikes 18 Mar 201435% match

DevBytes: Web Components - Shadow Dom
Google for Developers
30.5K views 302 likes 10 dislikes 16 Oct 201435% match

DevBytes: Android L Developer Preview
Google for Developers
46.3K views 801 likes 13 dislikes 18 Jul 201433% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201433% match

Easy Maps Apps in Java and Python
Google for Developers
30.5K views 238 likes 8 dislikes 07 Jan 201531% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201431% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201431% match

DevBytes - File Storage in the Cloud
Google for Developers
31K views 120 likes 0 dislikes 24 Mar 201431% match

Google Cast: Introduction to the SDK
Google for Developers
47K views 141 likes 7 dislikes 10 Dec 201430% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201430% match

DevBytes: What's new in Android 5.0 Lollipop
Google for Developers
129.1K views 1.5K likes 37 dislikes 17 Oct 201430% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201430% match

DevBytes - Google Compute Engine Core Concepts
Google for Developers
49.3K views 238 likes 8 dislikes 24 Mar 201429% match

DevBytes - The Beauty of Scale with Google Cloud Platform
Google for Developers
38.3K views 221 likes 4 dislikes 28 Feb 201429% match

Google Cast SDK Overview (Deprecated)
Google for Developers
114K views 272 likes 15 dislikes 03 Feb 201429% match

MapsZen - Visualize (100 Days of Google Dev)
Google for Developers
45K views 108 likes 2 dislikes 22 Jun 201529% match

DevBytes: Chrome DevTools Device Mode
Google for Developers
73.4K views 340 likes 26 dislikes 10 Oct 201429% match

DevBytes: Android L Developer Preview - Camera2 API
Google for Developers
70K views 564 likes 40 dislikes 28 Jul 201429% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201428% match

AdWords API DevBytes Episode 1: Why Use the AdWords API?
Google for Developers
61K views 138 likes 10 dislikes 22 Sep 201528% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201428% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201428% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201428% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201427% match

DevBytes: Android Vector Graphics
Google for Developers
60.9K views 640 likes 13 dislikes 17 Dec 201427% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201527% match

Google I/O 2014 - Polymer and Web Components change everything you know about Web development
Google for Developers
142.7K views 1.2K likes 22 dislikes 25 Jun 201426% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201426% match

Settings Privacy About Contact Donate