Web components là gì

JavaScript frameworks và libraries, we can all agree there are a lot of them. Angular, React, Vue, Svelte—the các mục seems khổng lồ grow every year. But, what vì chưng they all have in common? The answer is that they are used to lớn build applications on the web, and they provide the ability to lớn create reusable components.Bạn vẫn xem: web components là gì

What if you could create components based on existing website standards, components that do not depend on the framework or library used lớn glue everything together into an application? That is where web Components come in.

Bạn đang xem: Web components là gì

Who is Using website Components?

Here are a few companies you may have heard of that implement web Components:

Google: many properties including the AMP website component framework (source)

Salesforce: Lightning web Components (source)

Twitter: Embedded Tweets (source)

GitHub: The “Updated ago” (source)

YouTube: The site is built using web Components (source)

Case Study

Let’s dive deeper into how Electronic Arts (EA) uses web Components. (source)

EA is one of the largest trò chơi companies with over 22 studios and 10,000 people in 30 locations all over the world. Needless lớn say, they release a lot of games (NBA Live, Star Wars, The Sims, Battlefield, etc).

In the beginning, the web team took the approach of designing và developing each game’s website independently, one site at a time. As you can imagine, this leads khổng lồ a lack of a coherent experience for users browsing all the games EA offers. It was also difficult for the designers và developers working on the sites. They were spending 80% of their time on “Commodity Web”, (i.e. Navigation, footers, and truyền thông media galleries) instead of building custom experiences for each game title.

To invert that ratio, The Network kiến thiết System (NDS) was created. With the NDS, they were able to lớn take the Commodity web components and add:

And you know who else has most likely used web Components?

You. Have you ever wondered how is it possible that you can just set the ‘src’ attribute on a or & have a fully functional player with buttons, volume control, progress bar, timer, & other options? web Components.

Sorry, your browser doesn"t support embedded videos, but don"t worry, you can download it & watch it with your favorite đoạn clip player!source

Your browser does not tư vấn the audio element. Source

An Example

Let’s look at an example that’s just as easy khổng lồ use, but has a lot more happening behind the scenes—the model-viewer website Component developed by Google.

Here is the code needed khổng lồ display a 3 chiều model:

Here is the model-viewer web Component implemented within & without a framework / library:

Vanilla JavaScript

Angular

React

What Makes Up a website Component

Hopefully seeing who is using and what can be created with website Components now has you wanting khổng lồ know how khổng lồ create your own.

As stated before, website Components are built on website Standards. These low-level APIs consist of:

Shadow DOM API: Facilitates a method to attach a separate DOM khổng lồ an element

HTML Templates API: Creates a flexible template that will be inserted into the custom elements shadow DOM.

Basic Example

Here’s an example web Component I wrote with comments khổng lồ help explain what is going on.

Browser Support

If you"re wondering about browser support, website Components are supported in modern browsers.

Xem thêm: Những Nơi Đáng Sợ Nhất Thế Giới, Đừng Nên Du Lịch Nếu Bạn Yếu Tim

For older browsers, you can use polyfills: https://www.webcomponents.org/polyfills

Here are some resources for more information on website Components:

What’s Next?

The website Component example I made was a simple one. As the complexity of a component grows, using a tool may make development easier. In the next blog post, we’ll be comparing different frameworks and tools that create web Components.