Web Components... Welcome to the Future

What are they?

Performance, Customization, Universal Acceptance

These may be characteristics for many parts of your life but when it comes to websites and elements on a site, these three key aspects (along with a few others) make or break new implementations.

First off, we should answer the question, "What are Web Components?"
To easily put it, web components are essentially custom elements of a website. Meaning any web element (which is why they're called web components) you can possibly think of can be made into a custom web component.

Web components can be small or rather large depending on the task they are intended to accomplish. One can be made to create a simple way to write text in a fancy font while another can be the entire backbone to a website.

Who needs them and why?

Simply put... EVERYONE!

To list a few benefits:

1. Web components are stable on all current modern browsers including the most popular ones: Chrome, Firefox, Safari, Opera, and Edge.
2. Web components can be implemented into all of the most common frameworks and platforms such as: HTML5, Vue, React Native, WordPress and Drupal (just to name a few).
3. They can be easily installed into an application or project using npm and most public ones are available on npm's website for installing into your own JavaScript.
4. All major browsers adopted the four part structure web components are based on making anything that follows that structure compatible on any site.

Who already uses them?

• Microsoft
• IBM
• BYU
• YouTube
• EA Games
• Xfinity/Comcast

These companies have created their own web components and use them daily. You may have interacted with them without even knowing it.

For example, if you've ever used YouTube, you've interacted with web components. YouTube is made up almost entirely of web components. Web components render each clickable thumbnail, each navigational button on their toolbars, each bit of text (even on ads).

Why do companies use them and why should you?

Let's go back to the start... performance, customization, universal acceptance.

Performance

Web components load incredibly fast and are able to only load the information present on the visible screen as the user is looking at a page. This cuts loading times dramatically since the only initial parts that have to load are what is currently visible. This is one factor as to why YouTube can load extraordinary amounts of content so quickly.

Not only do they cut load times but components are also reusable. For example, if a web component is made to render a video player, that same video player can be used in several different parts of the page all with different videos, metadata, sizing, styling, etc. This eliminates the need to write code that creates a new element every time a video needs to be displayed.

Customization

Since web components are able to be made to do anything imaginable on any platform, the only limit to customization is how broad or uniquely the programmer can think.

Universal Acceptance

Web components can and are currently running on all major browsers and frameworks. They can be used repeatedly and be passed from programmer to programmer, project to project.

Real-World Example

In this video we talk about what web components are and look at some major companies use them.
Examples Used: YouTube, EA Games

For more information outside of this small demo, visit their site or even get started with implementing or playing around with their web components at their GitHub.