Want to write future safe code for the future web? Let me help you with Web Components
Tags: html, javascript, webdev, react
Published: 2019-09-23 15:04:34

Whether you smell this or not, things are changing for good.
*Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilise them in your web apps*
These are a specification of the W3 Consortium, and are a standard across all browsers (or are at least promised as such). This technology means that there might soon no longer be *any* need to rely on third party frameworks (you only need to rely on relevant tools *for now*), install bloat, or learn for months on end, to make a seemingly basic modern web application. If you want to write code for the future web right now, i.e where the buzz-following herd of web developers will be in, say, 2 or 3 years, this is the right technology for you. [This](https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m) article will help you get started.

You may ask why you should ditch the cool React, and the swag-ful Angular, and Vue 😎 and the rest of this post aims to explains this.

The stepping stones into developing applications for the web, or even static sites to some extent, have for very long been frameworks. You maybe spend two days trying to learn HTML when you get thrown at yourself words like "React", "Angular" or "Vue." This means that learning HTML(&CSS) and JavaScript is not enough to *effectively* write even beginner level applications.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7gqq3p11s3hifc1j0x6o.png)

You *need* to install some package manager like npm, go through some command line hell, (and assuming you are learning react, lets say) install create-react-app, run create-react-app, which will take a half hour or more even if your machine is above average (hard disks, ugh).
This is the easiest path and right now, you have not done anything. This here is just scaffolding for your code. Now you need more boilerplate react code, and alas, you need also Redux, and also 20 react libraries for that one animation (which is taken for granted in modern day web), and more... You need to make the choice between hooks and class based React (which does not mean anything to you, who just learnt about setTimeout last weak). Well it does not stop here, the hell that is, but you get the idea.

This is not the way writing code should work. If all frameworks out there **ultimately** aim to achieve the same **fundamental** functionality, and your client is using pretty much the same browser and the very same Internet, why is there not a standard way, which is common, and which we teach developers to build their applications, unless their project *demands* an exclusive, high level, opinionated framework, suited for their specific needs. If JavaScript Web frameworks right now pretty much do the same thing for me and you: normal, sane developers, looking to build web applications of the same sort of which millions already exist, why not? Why not future safe, non-isolated, plug and play?

*(Please do not write bullets about how these buzz frameworks are different, they are not for me. They are not for my friend who wants to get into webdev, they are not for that comp sci graduate, they are different for you, a 25 year old JS developer, because Angular uses a two-directional data flow process where it updates the Real DOM directly while React updates only the Virtual DOM and abracadabra alakazam hocus pocus)*

My point is that if you are a developer of the web, who is adequately skilled with JavaScript and some of the tools, you should switch your energy to the new standard: Web Components. Maybe not at this low level directly, but maybe try lit-html and Lit Element which are both very elegant solutions to reach framework-**like** functionality with minimal desire to bump your head on a wall. The article I linked above should be adequate.