New to Polymer BTW. I have polymer 1 app running. Wondering if I can use Polymer lit-elements in Polymer 1?
Trying to achieve: Ask is to embed another module which is written in JavaScript by another team in my company to my polymer1 app. Is there any better way to do this?
UPDATE: Alot of changes have been made since the below answer was given. It may be possible now. Not sure.
No, as far as mixing with other Polymer library iterations, lit-element is stand alone and a upgrade from Polymer 3.
From https://www.polymer-project.org/blog/2018-05-02-roadmap-faq
In summary:
No
Basically it is impossible.
You should consider upgrading to polymer 3 to use lit element
Polymer 1 is not even used in Classes, so it is practically impossible and polymer 1 is falling into disuse so the polymer team do not think it plans to support this new feature.
Related
I have worked around one year with Polymer 1 and 2 in a big company with large webcomponents catalog and I am confident webcomponents can be very usefull. I am aware about "cons ideas" like https://adamsilver.io/articles/the-problem-with-web-components/.
Now I am studding deepely how to efficiently use vanilla webcomponents. I just started with the premisse that using vanilla web-components will help to be a aligned with webcomponents improvement (I can't defend such idea - I just assume this for now). Then I am trying to create an stack for working with vanilla webcomponents.
Searching for a recommended approach for testing I reached https://open-wc.org/testing and I assume it is aimed to promote good practices without adds to specific framework (from its site: "Open Web Components is a community-effort, independent of any framework or company"). It is exactly what I am looking for: a kind of good pratices and well-known recommendation similar as we have for microservice from micorservice.io (this is just an analogy).
Trying it scaffold I got in package.json:
"dependencies": {
"lit-html": "^1.0.0",
"lit-element": "^2.0.1"
}
So, my main question is: why lit-html for a webcomponent?
Usefull doubts surrounding my main question, as far as I know lit-html is a framework sponsored by google and polymer team. Isn't that somehow forcing me to use polifylls to run in all browsers? Assuming I don't care about browsers not compliance with webcomponents, why would I need a framework?
Maintainer of open-wc here :)
The reason we recommend lit-html/element is because they are very small libraries that help you write web components, and dont lock you in to a framework. Down the line, LitElement simply extends HTMLElement, which makes it interoperable with other web components and even frameworks. LitElement also reduces the boilerplate you have to write for vanilla web components. We’re not married to it however, and personally I really enjoy vanilla component solutions. Also, most (if not all) of our tools should be compatible with web components.
Regarding polyfills; LitElement will attempt to use modern standards is possible (eg: constructable stylesheets), and use a fallback if not available. Loading the web components polyfills is up to the developer - not litelement. If you use our build configurations for rollup or webpack, you can opt in to having the polyfills loaded.
Hope that answers your questions, feel free to reach out!
It's been about a while Polymer version 2 is available out there, but
few people talk about it
few developers write about it in their blogs
few developers share their workflow and their experiences
Polymer Project is powered by Google, and the team seems have impeccable philosophy behind it.
Beside lack of browser support, Polyfills are doing the job still fine.
By the way, It seems people don't prefer to switch on it and work on it although Web components is an standard of the web.
There's a big why for me, there should be an explanation.
This is I think is related to Stackoverflow However I know many wouldn't like this kind of questions.
First, it's actually a very new technology since Polymer 2 was officially released in May of 2017.
Second, the fact that it is supported by Google is not necessarily an advantage: web developers who want to rely on this company's products may prefer Angular, which is also promoted by Google and is much more mature and famous.
Third, the fact that it is founded on the Web components standard is not an advantage too:
polyfills are doing the job (though not always) but their use adds a bit of complexity and can introduce a gap in therm of performance between the native and polyfilled implementation of Custom Element and Shadow DOM.
developers who know Custom Elements and Shadow DOM may prefer to create Vanilla web components instead as they became very easy to design thanks to... Google :-) That's precisely the purpose of these new web standards.
Fourth, the Material Design flavor chosen for UI elements may not fit everyone's taste.
Fifth, version 2 is not fully compatible with version 1, which may bring some confusion for newcomers, and some disappointments for those who invested on the ephemeral version 1.
Finally, one can question if Polymer is a long-term framework or just a way to support the launch of the early standards (Custom Elements and Shadow DOM) proposed by Google, and promote their adoption.
PS
Some of the above points are only assumptions.
Personally, I started using Polymer 1 during a few months, then I switched to Vanilla Custom Elements.
because of that is harder to implement other than material design or bootstrap or other designing frameworks
bootstrap is easily implemented and no other things to do with it like adding javascript with each of components and each component have its own styles
but afterall polymer is good project for whom who has a better designing skills and bootstrap and other is'nt requires higher designing skills
Even though Polymer is getting closer and closer to native Vanilla web components the fact that they are still not fully supported across all Browsers makes it not really practical to use.
I personally like the idea that this(Polymer) might end one day with a somewhat seamless transfer to native components.
What I also picked up during talks and conversations with fellow developers is that React is way bigger in the states while Developers in Europe tend to choose rather Polymer. Why exactly that is I do not really know, but I believe that there are many factors influencing it and that it can't be pinpointed to a specific disadvantage or advantage of one of these libraries.
As Supersharp already mentioned Polymer is still pretty new compared to other libraries such as Angular & React. But the developer community is growing from year to year which was especially emphasized at the last Polymer summit in Copenhagen where everything was about "The Platform". This turned out to be the community, web standards and everything around it rather than a total Polymer worship which I felt pretty pleasant.
On last thing to add.
Although, Polymer might be backed by Google the team working on it is relatively small. Youtube just switched to a 100% Polymer and what I picked up is that the team that made this happen is way bigger than the actual team developing the platform.(We are talking about a handful people here).
I use Polymer 2 for a small demo project mid 2017 (RC2, not final one), was nice and enjoyable. For my point of view, it is easier than Angular (1.6), but I don't have a lot of experience with it.
Pro
I like this idea of a component for each problem
Easy to split data (properties) and template
Easy use of events
Con
CSS rules was really intuitive
Polymer 2 Example Element
<dom-module id="input-array-element">
<template>
<h3>Inputs Array</h3>
<template is="dom-repeat" items="{{technology}}">
<input type="text" value="{{item.label::input}}">[[item.label]]<br/>
</template><br>
</template>
<script>
class InputArrayElement extends Polymer.Element {
static get is() { return 'input-array-element'; }
static get properties() {
return {
technology : {
type: Array,
value: [
{id:"php", label:"PHP", selected:false},
{id:"js", label:"Javascript", selected:false},
{id:"html", label:"HTML", selected:false},
{id:"css", label:"CSS", selected:false},
],
notify: true
}
}
}
ready() {
super.ready();
this.addEventListener("technology-changed", function(e){
console.log(e);
});
}
}
window.customElements.define(InputArrayElement.is, InputArrayElement);
</script>
</dom-module>
Another dev team I am working with is building out a bunch of web components using polymer 0.5, but the issue is that it is really just Beta imo. So now that 1.0 is out, I wanted to build on top of their 0.5 stuff with 1.0.
They know they will be refactoring at some point and dear goodness there is a lot of differences. They seem to want to just keep chugging along and do their own then then migrate later.
The issue is that if i follow suit, they will eventually modify everything and then i will need to modify everything.
Can i just build 1.0 on top of their stuff in order to circumvent this refactor? I tried to tell them to just do it in 1.0 but their manager wont budge.
Can this be done?
We tried doing this on my team at Google and it's incredibly difficult to do. I really couldn't recommend it. As another answerer commented, they clobber each other's global Polymer variable, but also the version dependencies with Bower are super difficult to get any sense around.
You could recommend tools like polyup to help automate the process. We did it on our team and while it wasn't exactly trivial, it's definitely worth the time spent: which is often less than you think. Here's a Lighting Talk from the Polymer Summit last year which walks you through the general process.
Hope this helps!
Probably not, since both versions create a Polymer global variable, both are bound to overlap.
I am using Polymer 1.0 and looking to create a tabbed layout where I can swipe between each tab I have. I have found a swipe-pages component, but the dependencies on the site state that it needs "polymer": "Polymer/polymer#^0.4.0" which does not work with the rest of my application. Are there any other components compatible with the latest version of Polymer (or at least Polymer 1.0)?
Thanks
There is a Polymer 1.0 version. See https://github.com/slogger/swipe-pages.
I'm very new in web development but I made an swipeable-pages element for Polymer 1.0 that works with dynamic pages like dom-repeat!
https://github.com/emersonbottero/swipeable-pages.
P.S.: I know the question is old but people may still need it.
P.S.2: Improvements are welcome to the code :D.
I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.