Learn about the four web standards that make up web components and how components are used.
- The Polymer library makes it really easy to both create and consume web components in your web applications. So, before we start working with Polymer directly, let's take a few moments to understand what web components are and why they are so important. So, as a web developer, you've probably noticed the sheer number of web frameworks that exist today. And it probably feels to you like a new one comes along every six to twelve months or so. I mean think about how many are out there: Ember, Backbone, Angular, Knockout, React, the list just goes on and on.
In fact, you've probably worked with one of more of these. Now each of these frameworks has a variety of features but one of the common threads that runs through all of them is the notion of components. Components promote two very important concepts. The first is encapsulation and the second is reuse. Encapsulation means that properties of a component, its style, logical behavior, and other content, are scoped to the component itself and don't affect other parts of the app or the page.
Reuse is very important in building modern web apps. It means that you should be able to use the component in other apps regardless of how you built it. Now in some frameworks that's pretty hard so for example you can't just reuse a React component in say an Angular project without bringing in all the rest of React into that project. Web components are fundamentally different. They are built using HTML standards that have either been adopted by the major browsers or have polyfills available for browsers where support isn't yet implemented.
Now there are four web standards that comprise web components. The first is HTML imports which provides a way to separate the code for your components into individual files to promote reuse. You simply import the components you want to use with the link tag that you're already familiar with. HTML templates give you the ability to define templates in your HTML code using the browser native template tag. Yep, that's right. You no longer have to use a separate library just to create templates.
Now, it's beyond the scope of this title to go deeply into how each of these individual technologies work and for the rest of this course you won't need to have a detailed understanding of these technologies. I'll go over each of them as we come to them in the course. However, I highly suggest that you spend some time learning about them if you haven't already. If you want to learn more about these underlying technologies of web components, take a look at my course "Learning Web Components." So that's a brief summary of what web components are and in the next video we'll see how Polymer fits into the web component ecosystem.
- What is Polymer?
- The Polymer command line
- Using components in an app
- The web components catalog
- Building a web component
- Defining component structure and appearance
- Scaffolding a Polymer project
- Creating an element
- Polymer data binding