From the course: Web Components and Modularization: Practical Approaches

What are components for the web?

From the course: Web Components and Modularization: Practical Approaches

Start my 1-month free trial

What are components for the web?

“

- [Instructor] Consider a standard HTML document, what do you see? If you ignore all the actual content, an HTML document is a collection of opening and closing HTML tags. These tags describe the content they wrap. Text inside an h1 tag is a heading level one. Text inside a p tag is a paragraph. Text inside an li tag is a list item, and so on. All these tags trigger built in behavior in the browser. When you add a ul element with a series of li elements inside, browsers know this is an unordered list and will display each of the li elements as bullet items. And you don't have to add that bullet yourself, the browser does that for you. These tags represent HTML elements described by the W3C's web standards, and these elements are universally understood and interpreted by web browsers, at least in theory. Elements are the building blocks of the web and the reason the web works. Components for the web are an extension of this tag elements principle. They allow us to create our own custom elements to be used either in HTML, or in JavaScript, and control what happens when the browser encounters them. Using components when we build web applications brings the power of custom templating down to element level, and dramatically simplifies the process of adding complex content and behavior. Consider this prototypical example, you're building a website for a bookstore, and in the design there's this card layout showing individual books, and the card layout keeps repeating over and over in different locations and different views. In code, this row of cards can be an unordered list. And each of the cards is therefore an li. Inside that li you'll have an image, a book title, the authors name, the price, and an Add to cart button. Mocking up the HTML for this card is relatively easy, but in a site like this, where you'll be out putting these cards a lot in different places, we need a template for just that card. This is what components are for. We create a new component, call it BookCard, and pass the dynamic content, so the image URI, the title, author, price, and book URI as properties into that component. This component can have its own advanced functionality, including different states, its own styling, and even use other components to populate itself. Its function and functionality is entirely up to the developer. Exactly how this is done depends on the tools you use and the environment you're in, but the core principles remain the same whether you're using React, or Angular, or Vue, or PHP, or even web components. Components are templates receiving properties and managing their own internal state to output content in a consistent way. So effectively your own custom elements for the web.

Contents