An Introduction to Polymer - A Web Component Library

I&#x27;ve used Polymer for about a year now, and it&#x27;s not my favorite.<p>Two way data binding yields bad design, and stack traces are incredibly opaque (they go through polymer guts). That means debugging is an absolute nightmare (I come from strongly typed closure javascript, so this was a punch in the face). If your HTML has problems, the browser won&#x27;t yell at you; debugging tools are just plainly lacking. There&#x27;s a reason Google doesn&#x27;t use it widely.<p>So, it seems great at first because it does so much, but you realize you want some minor customization and you end up spending all your time trying to hack around it when you could have just written from scratch in the same time (for example, I wanted an iron-collapse to move upwards, and had to do some crazy CSS hackery to get that to work).<p>That being said, if you restrict Polymer with team style guide, it can be incredibly powerful for code reuse. My team has a style guide that looks like this: only use paper components if absolutely necessary, never use {{}} only use one-way data binding, and attach strongly typed javascript to the Polymer component classes with Closure or Typescript.<p>(I work at Google, was tech lead for the image search frontend team for 4 years, and now work on Tensorboard in Tensorflow which is Typescript + Polymer)

A few months ago I started working on a large web application that is being implemented with Polymer. A few take a ways that are top of mind:<p>1) Very easy to learn, but it has no idiomatic way to write large applications; it is not a framework like Angular or Ember.js. What the best way is to write large, maintainable, applications with Polymer is still open IMHO.<p>A potentially useful way to structure large Polymer based applications is to combine Polymer and Redux, separating presentation code from state&#x2F;business logic.<p>2) No idiomatic way to do dependency injection. In Polymer even services are stated declaratively in HTML (e.g. `&lt;my-service data={{resourceData}}&gt;&lt;&#x2F;my-service&gt;`). Because of this, there is no natural way to replace my-service with, for instance, a stubbed version for testing purposes. There are some solutions, but they are somewhat laborious [1].<p>3) Build process still buggy. We encountered multiple issues with the polymer-vulcanize library.<p>Looking back at the ease with which I started writing application code using Polymer I foresee a great future for this library, especially for smaller applications. We need to learn more best practices in order to use Polymer to create large maintainable applications.<p>[1] “Polymer - Dependency Injection with Custom Elements by Justin Fagnani” <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=6o5zaKHedTE" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=6o5zaKHedTE</a>

I&#x27;ve been using Polymer since 0.5 for a number of personal projects as well as professional.<p>I have to say it&#x27;s been a pleasure to use - coming from Angular 1.0. I like it has a very low barrier to entry, having only one real concept; Web Components.<p>Polymer gives you Data Binding and a few nice things on top of that, but for the most part, you&#x27;re writing things fairly vanilla.<p>It&#x27;s definitely not without it&#x27;s problems. Element inheritence doesn&#x27;t really exist in 1.X unless you use Behaviors. There&#x27;s no inline expression support in bindings. This is partially good because it forces you to keep logic in your javascript, where it belongs. But it also means you sometimes have to be more verbose in obvious places:<p><pre><code> &lt;span hidden$=&#x27;[[thingsAreEqual(a,b)]]&gt;They are not equal&lt;&#x2F;span&gt; </code></pre> vs<p><pre><code> &lt;span hidden$=&#x27;[[a==b]]&#x27;&gt;They are not equal&lt;&#x2F;span&gt; </code></pre> But even still, I&#x27;ve been able to be very productive with it, and enjoy using it thoroughly. Feel free to ask me about my experience.

I found Polymer to be very easy to pickup coming from Angular 1 &amp; 2. The only friction I experienced was difficulty integrating TypeScript.<p>Given how Polymer components are typically written with the JavaScript included with the HTML file of the component this was not really an easy option for a beginner.<p>However using tools like polymer-build with gulp you can still get TypeScript support. In the upcoming Polymer 2.0 release TypeScript typings are going to be included with the library!

Exciting about Polymer 2.0 for take advantage of native &quot;v1&quot; Web Components implementations across browsers.

This framework seems very interesting, I wonder why it didn&#x27;t become popular outside of Google

Does there exist an index of JS frameworks and the needs each is intended to meet?

I have recently decided to switch from Polymer to Material2 for the following reasons:<p>- Polymer is only available through bower, which means I have to teach 2 package management systems to my developers.<p>- The documentation is not great (for instance, events are documented in camelCase, but must be listened for in Angular 2 using dashes-between-words).<p>- There are serious issues [0] which not gone resolved for a long time.<p>- The behavior of important components is not intuitive. For instance, the menu component acts more like a list which has a selected item (which also cannot be reselected)<p>[0]: <a href="https:&#x2F;&#x2F;github.com&#x2F;webcomponents&#x2F;webcomponentsjs&#x2F;issues&#x2F;541" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;webcomponents&#x2F;webcomponentsjs&#x2F;issues&#x2F;541</a>

I have been working on polymer based projects for some time(8 months).<p>My opinion is that, polymer is good for specific use cases such as- Creating leaf level components, Reusing components around multiple projects.<p>BUT....<p>Building complete applications in Polymer has been a painful experience<p>I have at times encountered critical &#x27;library bugs&#x27;, which haven&#x27;t been fixed yet, we had to use hacky workarounds and forked repos with fixes. Check &#x27;p1-backlog&#x27; in github<p>Less control over elements because of two-way-data binding, I guess I should use redux with it. But I&#x27;m still a bit confused about certain aspects of adding redux into the mix<p>The application end up really heavy<p>I wish I had a bit more control over vulcanize

My limited experience building some components with Polymer was that it is surprisingly intuitive. When I thought something should naturally work a certain way, more often than not it did.

I work with Polymer quite a lot, it is my favorite platform both professionally and for personal projects.<p>What I like about it most is that it lets me program for the web like I would normally code for software projects without UI. You can completely deconstruct your application into components and encapsulate logic and responsibility, giving you all the tools you need for great architecture. I am traditionally more of a backend guy, but Polymer makes building frontend projects fun for me, because the most interesting thing about programming to me is software architecture, creating powerful abstractions and designing interaction and APIs.<p>I have been working with Polymer since the first beta release (before 0.1) and completed multiple projects, both at work and during my free time. It has not been without it&#x27;s problems. I have to say that it takes quite a while before it really &#x27;clicked&#x27;, because you have to learn quite a few patterns to make things work. If you started early on, it was very unpolished (despite that, we have a fairly large Polymer 0.5 application running in production, and it&#x27;s still chugging along nicely), and the upgrade process is extremely painful (hence aforementioned application still running 0.5). It can also be dangerous, because if you don&#x27;t know what you&#x27;re doing, it is easy to end up with some frankenstein contraption that performs terribly, and is a horror to maintain. My advice to anyone looking to get into Polymer is to get advice from more seasoned developers, the Slack channel[1] is a great resource for that. Learn from existing projects and applications as much as possible to see how they solve the issues you will run into, and get a feeling for how the general architectural patterns work.<p>The good part is that all the techniques you learn are almost directly applicable to the future native Web Platform, as one of the core concepts of Polymer is that it tries to emulate what the future Web Platform will look like, and allow you to use that platform today. Quite a large part of the platform is already natively supported on most of the evergreen browsers, and I find that I use less and less Polymer code these days and use more and more plain native code. One day we may no longer use Polymer at all, but your newly learned skills will still apply.<p>A recent side project of mine has been an exploration of what future Web Applications might look like, and to test what is possible on the platform today. I built it completely from scratch, with no libraries or dependencies other than Polymer:<p>- <a href="https:&#x2F;&#x2F;overwebs.ruph.in" rel="nofollow">https:&#x2F;&#x2F;overwebs.ruph.in</a> (warning: sound and relatively high bandwidth. Works best in Chrome, other browsers untested)<p>[1] <a href="https:&#x2F;&#x2F;polymer-slack.herokuapp.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;polymer-slack.herokuapp.com&#x2F;</a>

I&#x27;m curious if anyone uses SASS or Pug(jade) in Polymer components and how you implement. Do you use polymer-build &#x2F; Gulp?<p>What about JS Modules?

polymer-project link is not working