Hot Minute #36: Web Components: The Future of Web Development

BF_LinkedIn_HotMinute2

HTML has a problem. If you’ve ever looked at the source code of a website, you’ve likely seen it – a spaghetti-like mess of <div>, <p>, <span>, and whatever other tags the developer chose to use. And don’t even bother looking at a JavaScript file if you’re not a developer. This type of code gets the job done and creates beautiful, fast, responsive websites. But it’s lacking two essential attributes – readability and modularity.

Readability is, well, exactly what it sounds like. That soup of div tags and variables and functions might be like a second language to the developer who made the site, but to another developer brought onto the project, there may be a high learning curve, especially if unorthodox development procedures were followed. And to the average person, it’s unintelligible.

Modularity is the ability to mix and match and reuse certain components. For example, if one developer makes a really great slideshow plugin, another developer might want to borrow that code and use it on another site. As it stands, this is totally possible, but is less than elegant. For a typical plugin such as an image slider, a number of dependencies, such as JavaScript files, CSS files, and often backend files have to be brought over and integrated into the new site, which may be built on a totally different framework, making conflicts very likely. There are dependency management solutions available, but many require command line interfacing, which often scares away even advanced developers.

Web components to the rescue. This growing new technology aims to make the web totally readable and modular. It does this with a few very clever tricks that have the potential to cause a sea change in the development world.

The first is custom HTML elements. Let’s go back to our image slider example. With current development standards, you would likely encapsulate the whole thing in a <div> tag, then assign it a class or ID, like “image-slider”. This works fine, and allows you to target the element with CSS and JavaScript easily. But what if we could make this more intuitive? What if instead of a <div>, there was a tag called <image-slider>? Well, that’s exactly what web components does.

With web components, developers have the option to name their HTML elements whatever they like, whether they are totally custom names or names that come along with a web components library like Google’s new Polymer. So now, instead of messing with divs and CSS classes and tons of dependencies, a developer has the ability to pick out a module they like, install it on their web server, then use it by simply writing its custom HTML.

This gets into the modularity aspect of web components. When a developer installs a new web component and calls it on the frontend of the website, the component always maintains its original integrity, regardless of what other code might be present on the site. The goal of this is to eliminate conflicts between advanced modules. By separately encapsulating each one and protecting it from rogue CSS and JavaScript already on the site, we ensure that the module always looks and works exactly as it was originally intended.

I’m not a developer, I don’t even know what HTML is! How does this affect me?

Faster, more stable websites. Quicker development times. Responsiveness across all platforms and devices. By standardizing and modularizing the web, we are eliminating much of the JavaScript spaghetti code that is so prevalent in slowing down websites and causing code conflicts. These new modular elements will allow the best developers in the world to come together and make their components available to everyone, making the web a happier place for both developers and end users.

This is a technology that is still in its infancy. As it stands, browser support for web components is limited to the latest version of Google Chrome only. However, some of the best developers in the world from companies like Google and Mozilla have been working hard to push this technology forward while also making it more backwards compatible, ensuring that web components have a very bright, very modular future.

css.php