The Web as a platform is all the rage these days. It’s not hard to see why. With the ability to create web apps in a matter of hours with very little experience in coding, it will soon be the de facto way to build applications.

It even looks like the war between web based apps and native apps on mobile has been won by the web platform in the guise of progressive web apps (pwas).

The driving force behind all these apps is javascript and the many, many frameworks that are out there.

The reason for this, is of course because after fending off Flash and Java applets, JS is the only way to code applications on the web.

Components are becoming popular as it allows companies to create block of UI that they can reuse across apps and sites. For example EA Games share a set of components through their many individual game sites.

React is the most popular framework out there at the moment and at it’s core, it is a component system. React components are created with jsx, a JavaScript templating engine.

React components can be shared between applications and sites. There are many sites out there that even offer UI libraries of React components.

Polymer is a project that is backed by Google. It aims to help you create components with a small library to ease the process. The Polymer project also includes a CLI (command line interface) to help you build and test your components.

Webcomponents.org is the home for a W3C project that aims to make web components a standard. It outlines 4 specifications that make up web components; Custom Elements, Shadow DOM, ES Modules and HTML Templates.

Custom elements allow developers to create custom HTML tags. So for example, you could create an element called <my-side-navigation> that would render a side navigation on your site. You could then share it with your other sites.

The Shadow DOM allows you to encapsulate HTML and CSS so that they don’t effect the rest of the site.

ES Modules are essentially JavaScript Modules. This specification allows you to create js modules and then import them.

HTML Templates are where the components html is created. This is the HTML that is rendered when the tag is added to a page.

There are other libraries out there for creating web components, but these are the main ones.

Web components are sign of the maturing of the web as a platform. In traditional application development, components have been around for a long time. Together with concepts like Atomic Design, there are now really powerful tools for developing reusable components to put together really compulsive experiences for your visitors.