New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polymer Team - I'm really frustrated! #36

Open
tjsavage opened this Issue Mar 16, 2017 · 40 comments

Comments

Projects
None yet
@tjsavage
Copy link
Contributor

tjsavage commented Mar 16, 2017

From @clintwood on March 6, 2017 13:54

@tjsavage and the Polymer team, I am really frustrated with the Polymer Project / team!!!

I believe there are very few frameworks out there that are so committed to taking full advantage of and working so close to the metal of the amazing next generation web platform and specifically the Web Component technology set! Polymer should be (is?) that project! The tech benefits for WebApp development using Polymer is a no-brainer on many levels IMHO...

I keep seeing tweets and articles like this which continuously show the performance benefits of sticking with the platform and therefore Polymer!
https://twitter.com/paulcuth/status/837632180352401408
https://twitter.com/marcushellberg/status/837451438418616321
https://aerotwist.com/blog/when-everything-is-important-nothing-is/
(there are many more)

So why is Polymer not totally buzzing right up there with these other frameworks - React, Vue, etc.? Why is the community not jumping on this?

From the outside looking in I can only attribute this to two possibilities:

  1. A lack of energy from the Polymer project management team who I feel do not spend enough time pushing the benefits of Polymer through the various media channels... It just feels like there is no energy there...
  2. Internally Polymer is possibly a conflicting project with other projects such as Angular and is therefore not being pushed!?

On the first point:

  • why does this issue have comments like "it would be nice if there is a little more communication", "Again, a update of the current state would be nice?" and "No News? Would realy be interesting to know where we are? When can we estimate first release?". Feedback on how things are to the community is slow and usually comes from issues like the one above.
  • Polymer has been slow to adopt ES6/7 which other frameworks like React, Vue are not scared to assume by default - I understand the no-build concept but these days nearly every decent framework requires a build step! Just package built & unbuilt code in the same projects and default to the built one.
  • Recently, not taking the perfect opportunity on the v1.0 release of the Web Component spec to solidly make 'breaking changes' to Polymer 2.x and therefore transport it into a project that competes with frameworks like React/Vue in terms of popularity - look at the Github Stars for these projects (React 61K, Vue.js 45K, Polymer 17K)!
  • In v2.x not providing an imperative API that supports runtime DOM composition that makes binding to existing parent element just work - is this a design flaw in Polymer?

On the second point, it's anyone's guess - this is unlikely though, I would think!

Another point - look at the job market and compare the call for React jobs vs Polymer jobs!

The Polymer Project is such an opportunity to be the framework that drives Web Component technologies into being better supported by all modern browsers! Why is this not happening!?

If it doesn't take this opportunity then we may see another framework take up it's position of being the Web Component framework of choice!!!

I truly do not mean to offend here, if anything, I would like to see Polymer at least reach the level of recognition it deserves - right up there with React, Vue, etc!!!

How can we get it there!?

Copied from original issue: Polymer/polymer#4380

@tjsavage

This comment has been minimized.

Copy link
Contributor Author

tjsavage commented Mar 16, 2017

From @web-padawan on March 6, 2017 14:53

IMO building Polymer apps is kinda like a back to Backbone times. I mean, Polymer is great to build components, but offers very few project-level architecture solutions.

This can be partially fulfilled by projects like UniFlow for Polymer, and Polymer Redux, but for a long time we didn't have any guides on this.

So, when using Polymer, project-specific part of the code is much bigger than framework-specific. This means that switching to a different project might be pretty hard, as you will need to learn new concepts and solutions adopted by that project's team.

Another thing is tools. A month ago we received a new polymer-bundler, which is a lot more faster than vulcanize used to be. But these existing tools are less powerful than Webpack, because of Polymer limitations (e. g. placing styles in HTML, not stylesheets). They also require spec-related tricks to work (e. g. not so easy to implement HMR due to lack of ability to unregister element, etc).

@tjsavage

This comment has been minimized.

Copy link
Contributor Author

tjsavage commented Mar 16, 2017

From @MartinsThiago on March 6, 2017 21:41

Hey guyz, take it easy...
Polymer 2.0 is on the way, I can't even imagine how much effort these guys are putting on it

I am sure we'll have tons of news when we get 2.0.0-stable... Then all of these feelings will go away and happiness will take place again 😇

@tjsavage

This comment has been minimized.

Copy link
Contributor Author

tjsavage commented Mar 16, 2017

Hey @clintwood!

I hear your frustration, and appreciate your enthusiasm. We think there should be much more buzz too!

Polymer's growth has been tightly and necessarily constrained by broad adoption of the Web Components specs. I'm sure I'm preaching to the choir here about the promise of Web Components: platform-level, encapsulated component model, to make sharing components/possible easier across frameworks, to not have to re-invent a component model for every new framework, and ultimately to allow devs to write higher-level code while shipping less JS down to the client.

The Polymer project was designed to prove out Web Components, help shape the low-level API's themselves, and then ultimately to make it easier to build Web Components.

The history of the project has very tightly progressed along these lines:

  • Polymer 0.1-0.5 releases were all about proving out early Web Components, as well as looking to tie in additional experimental specs (remember Object.observe!). With this, we helped bridge the gap between spec authors and developers to land on what might work and what might not.
  • Polymer 1.0 was about proving Web Components could be used in production. This meant optimizing for performance - this is where Shady DOM came in so that we wouldn't have to lug around the full Shadow DOM polyfill on Safari.

Even with Polymer 1.0 though, we haven't come close to realizing the full potential of Web Components. True encapsulation, true re-usability, truly minimal JS is not possible without broad browser support for native Web Component API's. Polyfills are typically fine on desktop browser with big beefy CPU's and Wifi/Cable connections, but they do matter on mobile browsers.

Unfortunately, even though I think we've shown that despite polyfills you can still ship really fast, powerful experiences on mobile using Web Components, and even though I believe relying on polyfills should be considered an advantage, not a weakness, given that they disappear over time, the current state of Web Components is an incredibly easy thing to nitpick.

So while we're in this uncanny-valley, rather than target broad, Hacker News-type reach, we've been targeting large organizations and products inside and outside Google - those who have an immediate and crushing need for Web Components today - to make sure the project and toolset works for these use-cases.

As you note, we've recently hit a major milestone for Web Components - the Web Components v1 specs. Unfortunately, they haven't quite all shipped yet - Safari is yet to ship Custom Elements v1, though it is completed in Tech Preview. But we're extremely close.

So we've designed Polymer 2.0 to fully embrace these v1 specs. And we've been working hard to get 2.0 production-ready before v1 completely lands.

Polymer 2.0 is designed to actually realize the full promise of Web Components. One quick way to see this - here is a table showing the combined size of Polymer + the polyfills required to use 2.0's class-based element syntax:

Native Browser Support Combined size of Polymer & Polyfills (in kb, gzip)
Browser HTMLImports Custom Elements ShadowDOM Other Platform 1.x 2.x (legacy API) 2.x
Chrome ✔︎  ✔︎ ✔︎ ✔︎ 53 23 10
Safari w/ CEv1 ✔︎ ✔︎ ✔︎ 53 26 13
Safari 10 ✔︎ ✔︎ 53 30 17
Firefox ✔︎ 53 45 32
Microsoft Edge/IE 53 49 36
Polyfill size 3.5 3.7 14.8 3.5

The more specs supported natively, the less code required. Down to ~10kb on Chrome.

I wish we had a magic switch we could pull that would make Web Components wildly popular. By hitching our cart to the Web Platform horse, we're at the whim and the pace of the overall spec adoption - which is a long arc. Thanks to Google's backing we've been able to take this long view - to target the long-term paradigm shift rather than seeking short-term popularity.

I have not done as good a job as I'd like keeping the community updated on our progress - this is something we're actively working on changing our culture around.

We've also needed to conserve our credibility. As we all know, web developers can be an opinionated bunch :). We set out our long-term thesis and set the goalposts when Web Components v1 first solidified. Rather than continually pound this drum, we've put our heads down the last few (many) months to execute on this. The result will be Polymer 2.0, which will be released imminently.

We hope 2.0 will be a major transformation in Polymer's broad appeal. But we need this amazing community's help:

  • We need help with feedback on the 2.0 release candidate, to make sure we end up shipping the right thing to stable. The community is absolutely critical here. We'll have more information coming on this release candidate very shortly.
  • We need help building up a corpus of content on the web about Polymer. Answering StackOverflow questions, posting "How to get started" blog posts, etc.
  • We need help growing the set of high-quality components available in the ecosystem - publishing to webcomponents.org. The set of components on webcomponents.org has been growing in leaps and bounds - let's keep it growing!

I hope this at least speaks to your concern, @clintwood. As a team we're pouring our hearts and souls into building the right next product, with 2.0. We need all the help and community energy we can get to make sure it's great. From there, I think we'll have a solid foundation to reach the popularity you're hoping for.

@tjsavage

This comment has been minimized.

Copy link
Contributor Author

tjsavage commented Mar 16, 2017

We're doing an issue scrub on Polymer/polymer currently - I'll move this thread to github.com/polymer/project where we try to keep these convo's open

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Mar 31, 2017

I would really be nice, if we get more information whats happeining...

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Jul 14, 2017

Again... 2 months... no new infos... Whats happening to designer? What are the plans of the team now, since polymer 2 is released? What are the plans about html includes or es6 modules? What about bower?

@arodic

This comment has been minimized.

Copy link

arodic commented Jul 14, 2017

@jogibear9988 the team is apparently actively working on bower replacement. It looks like npm is going to fill in the void. See this issue.

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Jul 14, 2017

it would realy be nice if the going on is more open...

@justinfagnani

This comment has been minimized.

Copy link

justinfagnani commented Jul 16, 2017

@jogibear9988 I'll try to get more of our discussions and work for npm publicly viewable soon.

As for Designer, I really want to get back to it right after the summit next month. I updated it to Polymer 2.0 recently, and want to update it to npm as soon as our solution rolls out, then start on feature work again.

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Jul 16, 2017

also any news about ES6Modules and Html Imports?

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Jul 29, 2017

And also, is anything planed around typescript support (or a recommended workflow?)?

@moander

This comment has been minimized.

Copy link

moander commented Jul 29, 2017

@silenceisgolden

This comment has been minimized.

Copy link

silenceisgolden commented Aug 4, 2017

@jogibear9988 Maybe we can work on a list of issues

  • TS recommended workflow
  • ES6 Modules vs HTML Imports
  • Can we actually use is="<element>"? Safari isn't happy about it but are we safe if it is only inside of a Polymer loaded template? Great for accessibility but if we cannot use it does that change the implementation of stuff like paper-input.
  • NPM support
  • Polymer 2 updated elements
  • A modal that pins it's content to the root of the DOM so it is over everything else (in progress but not sure about it's status as a fully fledged element) https://github.com/PolymerLabs/iron-overlay

Anything else?

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Aug 4, 2017

Style components, worflow! If you use a external lib wich has js and css, you should put the css in a style component (because link style should not be used). But how should that work if I want copy over the style manually on each update...

@silenceisgolden

This comment has been minimized.

Copy link

silenceisgolden commented Aug 7, 2017

@jogibear9988 Could you elaborate on this a bit more? The css goes in the style tag which gets entered into the shadow dom and is scoped to that shadow root. Is there another operation you would like to do to the styles?

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Aug 7, 2017

My Problem is, when you have external libs, youre styles are in css files, wich you can include via

 <link rel="import" type="css" href="style.css">

but as you can read here : https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom this is a deprecated feature! I should use style modules. But then I have to copy the css into a html style module each time I update the external lib!

I would not like to depend on a deprecated feature.

@bahrus

This comment has been minimized.

Copy link

bahrus commented Aug 7, 2017

@clintwood

This comment has been minimized.

Copy link

clintwood commented Aug 14, 2017

I've switched to Vue.js and am blown away at how far behind Polymer is compared to Vue in all respects - community support, available extensions etc, etc! It's really sad as Polymer is the only real flagship that could promote the uptake of the awesome Web Components features of the platform by the community but it has just dragged along despite cries of desperation from the community for it to become a thing. In terms of complexity to Angular, React and Vue, Polymer is actually not that complex but it still lags in so many ways. What a shame but good luck anyway!

@xliiv

This comment has been minimized.

Copy link

xliiv commented Aug 14, 2017

In the meantime..
I'm very satisfied using Polymer.. . ;P
(sorry for this comment i needed to)

@web-padawan

This comment has been minimized.

Copy link

web-padawan commented Aug 14, 2017

@clintwood please take into account the fact that unlike Vue.js, Polymer is not a JS framework by itself, and it has lots of limitations definitely worth writing a series of blog posts. I hope I'll be able to cover it in the future once I have enough time.

@arodic

This comment has been minimized.

Copy link

arodic commented Aug 14, 2017

I think many people here misunderstand what Polymer is. I see it as a very simple library paving the way towards native custom elements and related web standards. The ultimate success of Polymer (the way I see it) is when it is no longer needed. The fact that Polymer is getting slimmer with each release is a testimony to its success.

For everyone here frustrated with Polymer, I would highly recommend to spend some time making custom elements in vanilla JavaScript. You will be surprised that Polymer is not much different than vanilla JavaScript today; it only makes the process more enjoyable.

While I share most of the concerns stated above (bower, HTML imports, application architecture, communication and community growth), I have no doubts that Polymer project is going in the right direction.

Polymer <3

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Aug 14, 2017

I think it is more... you also have the app components, dom repeat, binding, ....

@WoodyWoodsta

This comment has been minimized.

Copy link

WoodyWoodsta commented Aug 20, 2017

@arodic This is true, but it sports more than the spec, and so people are falsely led to believe that Polymer is a component framework (as @jogibear9988 shows us). The fact that people have misunderstood what it is means there has been no clear explanation/product delivery from the start. Polymer's intent is still blurry to me and leads me to believe that it is blurry to the makers themselves. It comes across in their community engagement, documentation and development itself.

I still think that it is great and I enjoy using it when I do, but it can't be "going in the right direction" year after year after year.

@rahulmaha

This comment has been minimized.

Copy link

rahulmaha commented Aug 20, 2017

@jogibear9988

This comment has been minimized.

Copy link

jogibear9988 commented Aug 22, 2017

For me it looks like there isn't much News during the year, so we have News on the Summit.

I would like if the development would happen more open.

I asked on 16 July what about Es6Modules? Now it's beeing switched...

@rjsteinert

This comment has been minimized.

Copy link

rjsteinert commented Oct 30, 2017

I'm very much looking forward to Polymer 3 and using the Lit HTML renderer! Go Polymer team!

@xliiv

This comment has been minimized.

Copy link

xliiv commented Oct 30, 2017

@rjsteinert

This comment has been minimized.

Copy link

rjsteinert commented Oct 30, 2017

Ah, thanks @xliiv for the more recent Lit HTML vid. I thought I had posted the new one. Great talk @justinfagnani !

@tjsavage I also really appreciated your talk mentioning Redux with Polymer where you showed some best practices.

  1. Pushing state down to presentational components with element.setProperties({...}). I've been using Object.apply(elem, state) and reflectToAttribute.
  2. Send actions up to a controller component by using presentationComponent.dispatchEvent(CustomEvent('MY_ACTION_TYPE', {detail: {...})

Those are real gems for folks who are new to Redux and Polymer as jumping straight into using polymer-redux feels like the deep end to me right now.

Something to note, I bet the use of the detail property on the second argument object is probably lost on most folks that don't know that's a special property that bubbles up with events.

@jimbarrett33

This comment has been minimized.

Copy link

jimbarrett33 commented Nov 29, 2017

A question in line with this thread since I'm fairly new to Polymer...

From all I have read, in addition to being able to build full applications with it, Polymer can be used to create/produce Web Components according to the Web Component standards. So my question is, does Polymer actually produce "pure" Web Components that can be "picked up" and dropped in other frameworks like Angular and React? This is the greatest appeal of Web Components.

I am interested in integration with Angular but I have seen tools like https://github.com/hotforfeature/origami and don't quite understand why they should be required.

Thanks.

@rjsteinert

This comment has been minimized.

Copy link

rjsteinert commented Nov 30, 2017

@jimbarrett33 Polymer components do come with the dependency of the Polymer core. I've also seen a couple of examples of using Web Components in recent versions of Angular but I haven't seen an example I feel comfortable with yet. I'm hoping that there is more meeting in the middle with Polymer and Angular in the future.

I know Ionic Team has been investing in both Web Components and Angular in their Ionic Framework, perhaps they might pave the way. Their Stencil project seems impressive how it transpiles to Web Components without the need for an external Stencil dependency. That project is still young though so I'm just watching that one at this point. https://github.com/ionic-team/stencil

@jimbarrett33

This comment has been minimized.

Copy link

jimbarrett33 commented Nov 30, 2017

@rjsteinert Thanks for the reply. I am in a waiting it out stage also. We're probably at least a year away from the nirvana of components being seamlessly passed around among frameworks, if ever.

@justinfagnani

This comment has been minimized.

Copy link

justinfagnani commented Dec 1, 2017

@jimbarrett33 the short answer is: yes, Polymer elements are just HTML elements, aka "pure" Web Components, and can be used in any framework. Polymer is just a base class that extends HTMLElement and offers some sugar for implementing your element. From the outside it's just a Web Component.

The long answer is more complicated and a story we're working hard on right now. Historically there's been a few barriers to easily using Polymer in other frameworks:

  1. Polymer is distributed via Bower, while most other framework code is now distributed via npm. It's not possible to add a Bower package as a dependency to a npm package, so this causes friction. This isn't a problem for apps, btw, which can easily have both bower and npm dependencies.
  2. Polymer uses HTML Imports, and there's no standard way to import a Polymer element into a JavaScript file that defines a framework component. There are a few WebPack loaders that help with this though.
  3. Some frameworks had made assumptions about HTML that don't hold with the open-ended world of custom elements.

We're addressing these problems right now:

  1. Polymer 3.0 is distributed on npm
  2. Polymer 3.0 uses standard JavaScript modules
  3. We've been pushing on frameworks to work better with custom elements: https://custom-elements-everywhere.com/

I think with Polymer 3.0 and the continued improvements of frameworks, seamless interop will be here very soon.

@rjsteinert

This comment has been minimized.

Copy link

rjsteinert commented Dec 2, 2017

@jimbarrett33 Thanks for chiming in. I've been wondering lately how to deal with the issue that when using Web Components on NPM you need to set your package.json "flat": true but for projects like Angular I'm pretty sure that would blow up if you made the dependencies flat. Is there a best practice yet for dealing with that issue or maybe it's not an issue?

@jimbarrett33

This comment has been minimized.

Copy link

jimbarrett33 commented Dec 4, 2017

@justinfagnani thanks for the detailed response and @justinfagnani thanks again.

The best resource I have found regarding Web Components and Angular is this video https://www.youtube.com/watch?v=Ucq9F-7Xp8I (May 2017) and the supporting code https://github.com/angular/custom-elements-interop. I had a chance yesterday to try this out with the latest version of Angular/Angular-Cli and it works. I had to make one change to use Renderer2 instead of Renderer in app.component.ts.

For me, the most interesting parts of the video/code are:

  • one of the speakers indicated that browsers may not implement html import; not sure what this means long term

  • it helps with Angular binding if the web component sticks to the attributes and events of underlying html controls such as "checked" for checkbox; this seems to make sense anyway

  • they do talk about bower vs. npm and mention yarn as a potential solution for handling web component versioning but it's been 6 months and I think npm has added features similar to yarn so not sure where this stands

  • if you open one of the web components, for example dash-listbox.js, the "Polymer Project Authors" license is at the top

I'm not sure about this last bullet but it seems Polymer was used, the example does work, and I don't see anything "polymer" specific.

@satyakresna

This comment has been minimized.

Copy link

satyakresna commented Feb 12, 2018

Hi @Polymer team, thanks a lot for providing this awesome library to make #WebGreatAgain using Web Components tech. Just for a feedback IMO:

  1. We need more codelabs about Polymer in codelabs.developers.google.com. Currently, I found 8 codelabs that related with Polymer and 1 of them is deprecated I think (Interact with bluetooth device with polymer) because of retired in Google Archive. I already try 4 of them (excluded that deprecated).

  2. We need the codelabs that up to date based on Polymer version. Maybe we can create branch ex. branch v-1 for polymer 1, branch v-2 for polymer 2, etc.

screen shot 2018-02-12 at 9 53 20 pm

In my country, Indonesia, Polymer community is still low than another front end framework and library. You can check our online community here: Polymer Indonesia. The reason is like I said above. I saw that your team run a polytechnic before, a roadshow to introduce Polymer and promote them, right? But, can I know the reason you stop or pending that roadshow? I hope you can consider to run it again. Thanks a lot.

@treshugart

This comment has been minimized.

Copy link

treshugart commented Feb 12, 2018

@nijin87

This comment has been minimized.

Copy link

nijin87 commented Nov 12, 2018

HI team,
We are updating our polymer 1 project to Angular 6, is there any way to use polymer elements to Angular 6.
Am not seeing any support for polymer 1 version.

@rjsteinert

This comment has been minimized.

Copy link

rjsteinert commented Nov 12, 2018

@nijin87 I've been using Polymer 3 in Angular 6 for a some time and it works great. For Polymer 1, I suppose you could try adding your elements into the Angular assets folder, then adding tags in the index.html to include them. That doesn't help with transpiling for earlier versions of browsers though. That's where Polymer 3 using es6 modules really helps with Angular slurping them up as if they were any other javascript module.

@nijin87

This comment has been minimized.

Copy link

nijin87 commented Nov 20, 2018

Am new to polymer,
my existing project is in polymer version 1.x, is it possible to update the existing code to latest version (3)?

@ArvindKumarAkula

This comment has been minimized.

Copy link

ArvindKumarAkula commented Feb 8, 2019

Hi @Polymer team, thanks a lot for this amazing library.
Wat are the best sources or sample to integrate (Polymer3 + Spring Boot [java backend ] ) project. We are replacing our front-end with polymer3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment