You must be wondering what are the advantages web components offer to us Well, there are plenty lets go through some of them…
- Easy to understand
- Every element takes care about one task (the old single responsibility principle everyone is familiar of guess if you are a developer, right ? ;p)
- 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.
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 ??
Component Driven approach is there in all these choices. Splitting logic into components. Then what is the difference…. ? Let us see that.
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.
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.
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 :
Follow me on:
👉 Twitter: https://twitter.com/thenerdydev