Hi.
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 are a set of emerging standards that
changes the way you develop web apps entirely.
They will enable you to build and reuse UI components
when building web applications.
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.
Here is a nice looking chart.
How would you build this using HTML, CSS, and JavaScript?
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.
First, load the Google JavaScript Library
to use the API.
Then, add the div tag onto the body as a placeholder.
Now, using JavaScript initialize the library
by loading Visualization API.
Then, set the values and the options at callback.
Finally, specify the DOM element to upend the chart graphic.
OK.
Now, let's dive into the Web Components
approach and see how that drastically
changes the way you build a chart.
With Web Components, the first thing you should do
is to import Google Chart Component.
To enable unsupported browsers to work,
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.
And done.
Did you notice the difference between those two approaches?
Yes.
The first one was imperative using JavaScript.
The second one was declarative using HTML tag.
The declarative approach might look easier to handle,
but the biggest difference here is not easy or difficult.
It is an underlying knowledge required for the developer
to use those APIs.
In the original example, the first thing you have to do
is to understand how Google JavaScript Library works.
Then, you can learn how to use the APIs to control it.
On the other hand, the Web Components approach
uses DOM APIs, which most of the web developers
are already familiar with.
So you can just start by learning
how to use attributes and APIs.
The difference seems subtle, but you'll notice the benefit
when you work with other UI libraries.
For example, jQuery UI, Bootstrap, Closure Libraries,
et cetera, all use different approaches,
so you will have to learn them before you actually
start using them.
There are other benefits of using Web Components, as well.
Let's take a look at them one by one.
Scoped.
Since Web Components have scoped styles and markup,
imported components won't harm any other part
of your web page.
In the existing libraries, there are
cases where you have same class names or IDs that potentially
overlap with the ones in the library.
With Web Components, all markups and CSS
are scoped to the element.
This mean the CSS bundled with the component
will not leak out to affect the parent document.
And it also prevents the parent document
from accidentally styling the component.
Reusable.
Because Web Components are scoped and decoupled
with other parts of your web page,
you can use the same component in the other part of your web
page or even on the other website.
Furthermore, you can share the element
with the community as open source
so that anyone can take advantage of your work.
Isolation.
Because Web Components are scoped,
you can decouple development of UI components
from main functionality.
Developers are able to independently work
on UI components without needing to worry or be
aware of the implementation details of other parts
on the page.
Note that maintaining those components
is much easier because of isolation as well.
OK.
Web Components sounds like a great solution
for serving or using UI components.
So how can we actually build our own component?
Web Components consists of four core technologies-- templates,
Shadow DOM, Custom Elements, and HTML Imports.
Let me briefly describe what they are like.
Templates allow you to define inert boilerplates
for repeatedly used markup inside your HTML.
Because the content of the template is inert,
it will not request images or run scripts
until it is sent out onto the page.
Shadow DOM allows you to associate scoped HTML markup
and CSS with an existing DOM element.
Since Shadow DOM is encapsulated,
the style won't affect anything outside of it.
Custom elements allows you to define and register
a custom HTML element as if it were a native element.
HTML Imports allow you to load multiple resources,
such as JavaScript, CSS, and additional HTML files
by loading a single HTML.
Combining all those technologies will look something like this.
First, prepare a HTML file that is separate from main HTML.
Define and register a custom element.
Associate Shadow DOM onto it.
Use templates to provide contents of the Shadow DOM.
Finally, import the component HTML file using HTML Import.
Now you have the basic idea of Web Components.
I'm going to post a series of videos about Web Components
features so you can learn how to use them.
In the meantime, documents and resources listed here
will help you learn more about Web Components,
so please check them out.
All right.
Thank you for watching.
See you in the next episode.