why do we need to install web components with bower?
touseefbsb opened this issue · 7 comments
this is more of a conceptual question :
web components are supposed to be native and built right into the browsers so they can easily be used as native html elements, but when using polymer even if we only want to use already present elements from webcomponents.org we still have to install them with bower ( npm in polymer 3.0 ) and then they are present in components folder or node modules folder. if they arent referenced there we cant use them and then we also have to import html or js module ( depending on the polymer version ) in order to use them in a specific file.
The purpose was to make them native so we dont have to depend on libraries like angular and vue e.t.c. So is the work still under process? will they be completely native in the future? or what is the deal with it?
Web component APIs (like Custom Elements and Shadow DOM) are built in to modern browsers. Polymer is a library that built on these APIs and it needs to be installed (through npm or bower), and there are elements (e.g. <app-drawer>) that Polymer Starter Kit depends on which depend on Polymer and need to be installed as well.
The goal in the future is to eliminate the dependency on webcomponentsjs, which polyfills web component APIs on browsers that don't have them. All pages currently load webcomponentsjs/webcomponents-loader.js (https://github.com/PolymerElements/polymer-starter-kit/blob/02b05e335a4cdea2138abd827661097bf9c4e3c3/index.html#L88) - it has no side effect in Chrome but polyfills the API on other browsers.
Ok so when all browsers support the apis natively then we wont need to pollyfill them anymore. But we will still need to install the components through npm right? wont that make the production package of the app relatively bigger? I mean if the created components are supported by every browser by default, we wont be needing any reference in our app even through npm. And all new components can be just addition to native html tags. Which should be the actual goal I think.
There can be a responsible committee or something linked with webcomponents.org, when the new components published can be analyzed and then added to all browsers natively if it passes the requirements.
Developers will still be able to make their own custom components which they dont want to ship but can use in their apps, by creating them in polymer and then referencing them with in their app. So every use case can be satisfied with optimal performance.
Again it is just a suggestion, I am not an expert to know whether this is possible or not, but I just think it solves one of the biggest problem of modern web development :)
The purpose was to make them native so we dont have to depend on libraries like angular and vue e.t.c. So is the work still under process?
I don't think you have the right idea with custom elements / web components. The idea is that the element you write is now customizable and leverages strongly on browser APIs. It won't mean the browser is going to have all the definitions of all versions of custom elements in the world, or even some of them. All browsers have to agree on anything, and chances are they won't do this unless it's in some sort of spec that everyone buys into.
Actually I saw some videos from Polymer Summit 2017 and they said that they are trying along with google so that all browsers can agree on one standard of web components definition, hence leading to a native set of new components which will work accross all browsers without polyfills. That is why I was under the impression would be standardized. Also they said that we can still use complex UI libraries like angular and react e.t.c. but they wont be required much because most of the functionality will be standardized into web components.
we already can create custom elements with vue js, and angular and a lot more libraries, so if polymer is doing the same, then what is new which polymer brings?
Vue and Angular don't generate (standards-based) custom elements as described in https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements or https://developers.google.com/web/fundamentals/web-components/customelements.
They reinvent "custom" elements and if you really want custom elements with shadow DOM encapsulation etc., Vue and Angular does not do it but they have the potential to add the tooling to achieve the same end in the near future.
Alternatives to Polymer are: Svelte, SkateJS, Stencil. They all aim to generate custom elements as an output.
oh alright thanks :)