loading...

Web Components and its advantages

thenerdydev profile image The Nerdy Dev Updated on ・3 min read

You must be wondering what are the advantages web components offer to us Well, there are plenty lets go through some of them…

Alt Text

  1. Custom Elements and Web components are the terms that can be interchangeably be used. This allows you to encapsulate logic and UI into one custom HTML element tag which we then can reuse across the page or reuse across multiple projects. Simply take that Javascript file and drop it into any other project.
  2. Easy to understand
  3. Every element takes care about one task (the old single responsibility principle everyone is familiar of guess if you are a developer, right ? ;p)
  4. The most important one REUSABILITY.

Reusablity means we have to write a logic once and reuse it multiple times. 
We dont have to worry about overlapping logic and we also dont have to write the logic for the User Interface more than once. The same advantage holds when we share our components across multiple projects. We can even have projects written in different frameworks.But wait….ahhh!!! You must be wondering that this reusability thing is also what is offered by components that are made in Angular, React and Vue. Then what is special about Web Components in this regard.

Web Components

Reuse core UI elements across multiple projects. You could create a set of core UI elements that have your corporate identity baked in like a modal, toolbar, side drawer which you can use in all your projects. We can also publish components or set of components even to NPM and install it to any project.
Isn't it amazingggg ??

Difference between Web Components Vs. Angular, React, Vue and JQuery

Component Driven approach is there in all these choices. Splitting logic into components. Then what is the difference…. ? Let us see that.

JQuery

Alt Text

Libraries like Jquery have great advantage of being drag and drop 
and import with a script tag and you are good to go. Downside is that you have multiple imports potentially atleast and you can have version conflicts as well due to other dependencies of Jquery. You might import loads of code into your project that your project might never need. You might not need the AJAX functionality of the Jquery plugin, you might not need certain dom traversal methods. If you are building a SPA Jquery will quickly hit its limits.

Frameworks

Alt Text

More than just components (routing and state management)
These frameworks give you everything you need to write complex frontend User interfaces most of the time often SPAs . Most of the time we have a clear set of rules of how we should structure our code for how we should write code and solve problems.e.g state management,form validation etc.

Downside of the framework is the complexity, the steeper learning curve that you have. Components are not reusable across other frameworks.Vue components cannot be used in Angular for that matter etc.

And this is where Web Components come into the picture ….. :)

Solves the downside of the frameworks because they are purely written in Pure Vanilla Javascript. We dont have any external dependencies and we do not need any special framework. We ship less code because it is just our component code. No overhead introduced by the framework and it is easily reusable since we use just javascript and all these frameworks and plugins use Javascript.We can bring our components into any application into the frontend of any web application that we are building.

Let us also consider some downsides of Web Components (They are also not free of these ofcourse :p)

1. Complexity & Steeper learning curve
2. You can build the entire user interface with web components but it will still lack state management for complex application, routing, solution, navigation, parsing url etc. Building SPAs with Web components will require extra libraries that will take care of all these concerns.

Finally to conclude :

Web Components are quite awesome and they are reusable across projects. You can use them across any project, be it Angular, React or Vue or any other Javascript FrontEnd Framework for that matter.

Follow me on:
👉 Twitter: https://twitter.com/thenerdydev

Posted on by:

thenerdydev profile

The Nerdy Dev

@thenerdydev

I am a Full Stack Developer, sometimes freelance also. I am a Mentor and Code Reviewer cum Teaching Assistant at Udemy.

Discussion

markdown guide