Web Components and the Future of Web Development

Web Components Logo


To improve is to change; to be perfect is to change often.

– Winston Churchill

Nothing exemplifies the above quote better than the web. The web is always changing – monthly, weekly and even daily. Websites update their content every day and their look almost as frequently, web standards are being revised and created on a weekly basis, and browser vendors update their browsers as often as one is willing to download the latest version. A great example of that is Web Components, which is a new technology that is becoming more and more realized daily as the standards for it are being finalized and browsers are updated to support this new technology.

Web Components is the cutting edge of web technologies – it is something that few have yet to hear about, and even fewer that use it. In fact, due to lack of browser support web components is not something you’d necessarily want to rely on right now, especially when it comes to large web sites that require support for a wide range of browsers. With that being said, as a web developer it’s my job to be on the bleeding edge, to push the envelope and by extension move the web forward. So when that envelope is fully opened, when that edge becomes the norm, I am ready to take full advantage of it.

This article is a big picture look at web components. I will try to avoid the technical nitty-gritty (I love that stuff though, so expect it to rear its techy head on occasion) and instead talk about how web components will change web development going forward and how that affects non-developers, a.k.a. the common folk.

Web Components 101

Web Components is not one thing, instead it is a collection of technologies and APIs that enable web developers to create custom HTML elements. An HTML element is a component of a web page. For example, this paragraph you’re reading (if you’re reading it on the web) is most likely contained in the “P” HTML element, i.e. the paragraph. The title above this paragraph is probably inside an “H2” or “H3” element, as in “level 2 (or 3) header”. Traditionally, web developers have been limited to using a predefined set of web elements, ones that were determined by the web standards organization (W3C) and are supported by the browsers. While those widely supported elements have served us well so far we’re always looking to improve the way we develop, and one great way to improve web development is to provide us the ability and the tools to create and share custom web elements. That is the core idea of Web Components.

Developers Just Want to Have Fun

Now, I know I promised to avoid techy stuff, but to understand the main reason for, and the idea behind, web components, a bit of techy stuff is necessary I’m afraid, so please indulge me.

As I was saying, as developers we’d like to be able to create, share and reuse custom HTML elements. In programming languages like C++ (C plus plus) or C# (C sharp) the ability to develop custom elements and then share them with other developers, who will be able to use them in their projects is “built in”. For example, one developer may need a way to perform various date or time related calculations – e.g. how many days between two dates, how many weeks since certain date, etc. When said developer creates whatever functions they need to perform these calculations, they may choose to combine those functions together in what is often called a “class” (or object). That class can be put in a file that another developer can take, include it in their project, and thus gain access to all that date calculating functionality. This ability to share code like that facilitates better development, since developers don’t have to always “reinvent the wheel”, instead they can often use previously created objects (or classes) to implement common functionality and concentrate on implementing whatever unique functionality their application requires.

Web developers unfortunately don’t have the same luxury – we are forever forced to reinvent the wheel. If one developer implements a menu for example, there is no way for them to write the code for that menu in such a way that it can be easily included in other project and used by other web developers. Other developers of course can certainly see the source code for the developer’s web site and copy the code from there but that doesn’t give them the whole picture. There may be other code that is necessary for the menu but is in another file and so then they have to go searching for that, and then they have to make sure to include both pieces of code in such a way that they don’t conflict with their existing code, and if they do then those conflicts have to be resolved before the new code can be used. All of that is very messy, error prone and time consuming – “kludgy” as one of my friends might say.

Let Them Eat Cake

Web components aim to change all that. With web components web developers will be able to create custom elements, for example the menu element, which other developers can easily include in their code. They won’t have to worry about missing any code because all the necessary code will be included in the custom element. They won’t have to worry about conflicts with existing code because the nature of custom elements is such that all the code inside is hidden from the code outside. Best of all, to use the custom element all a developer has to do is include a file in their project and they’re good to go.

Elementary My Dear

So why does this matter to non-developers? Simple, because a happy developer is a productive developer and web components make developers happy. At the end of the day, all that techy gobbledygook above doesn’t mean much if it doesn’t make web development more efficient and more powerful, but web components do exactly that. Once fully supported by web browsers, web components will mean that web sites and web applications are developed faster, debugged easier and, especially in the case of web applications, are much more flexible, modular, powerful and robust. In the sections above, I am kind of using development of a web site as the framework for my examples, but in reality web components are much more important for web applications – things like Gmail, Google Documents and Facebook. All those are not just web sites with a few pages and some articles and photo galleries; they are rich, powerful and very complex web applications. And like with any complex application the ability to reuse components is a key to good development.

Web components make web development a first class citizen in the world of programming and as amazing and fast as the development of the web has been so far, with technologies like web components being implemented every day all I can say is, you ain’t seen nothing yet.

Be the first to comment on this post

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>