Web Components and Frameworks
🇪🇸 Los Web Components y los Frameworks
As a faithful defender of the standards, I’ve been watching the Web Components try their best for years in a world full of Frameworks in which the wheel is continually reinvented. Therefore, I have decided to talk about this issue and the advantages they offer us and, above all, to show that they are not incompatible or exclusive, but rather the opposite.
As a web developer for 15 years I have seen how web standards have been defined and how browsers have been agreeing to create a platform compatible with all. I remember when you had to develop the same thing several times to make it compatible with each other. Some of you will remember things like these:
if (elem.addEventListener) {
elem.addEventListener (eventType, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent (‘on’ + eventType, handler);
}The worst part is that now I’m having the same feeling, but with the frameworks. I explain: if we want to make a web we find that according to the framework that we choose each one has its implementation of the same components.
Several Material Design Implementations
If we take as an example the popular Material Design and see how there is an implementation for each of the 3 main Frameworks:
To put a simple text field to request the email we would have the following variants according to the framework:
Angular Material
<mat-form-field>
<mat-label>Email</mat-label>
<input matInput placeholder="user@domain.com">
</mat-form-field>React Material-UI
<TextField label="Email" placeholder="user@domain.com"/>Vue Material
<md-field>
<label>Email</label>
<md-input placeholder="user@domain.com"></md-input>
</md-field> Leaving aside that each one implements the interaction with the component in its own way without faithfully following what is described in Material Design Text fields, do not you think there are 3 very similar ways of doing the same?
Would not it be much more practical to have a single component that could be used in all frameworks?
Custom Elements (Custom Elements)
The Custom Elements is the key specification on which Web Components are based. According to the MDN web documentation:
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 utilize them in your web apps.
One of the first that supported and disclosed the Web Components, making use of the 4 specifications, not only of the Custom Elements, was Google through Polymer.
Using this library the Paper Elements were born, which would reduce the 3 previous examples to one, being able to use in all the frameworks the same component in this way:
<paper-input label="Email" placeholder="user@domain.com"></paper-input>With this, we promote the standards and reduce maintenance by N (where N is the number of implementations of Material Design).
I know that there is a lot of detractor of Polymer, but without its appearance in the field of play, the Web Components would not be as advanced as before.
Also, I have always said:
Polymer is a heroic bookstore since it was born to promote standards and will die when the standard is imposed.
He has dedicated all his “short” life (currently just over 4 years) to defend and evolve the Web Components, shortening his life with each specification implemented by browsers.
With Custom Element Everywhere, a great initiative by Rob Dodson, we can ensure that frameworks and Custom Elements can be best friends forever.
As you can see, both Angular and Vue are 100% compatible with Custom Elements, which would allow us to integrate them into our application without problems. React has a little bit left, but I’m sure that all tests will soon be over.
The solution: Web Components
As we have said, Polymer is a library destined to disappear when web standards are imposed, therefore, the best solution would be to implement the components as close to the standard as possible and thus reduce the legacy code.
A good example is the initiative of the Polymer team that is developing all the components of Material Design as Web Components and, contrary to what you can think, they are doing it without using Polymer.
It is still a bit green, but if you want to use Material Design in your applications, take a look at the material-components/material-components-web-components repository and demos. With these components you can save a lot of work and you will not anchor to the framework, being able to reuse a large part of the work in your next project or in the next update or framework migration.
Remember to clap if you like it to reach more people
