
An Introduction to Polymer - A Web Component Library - zacharytamas
https://wearenorthern.com/blog/2016/polymer-is-the-whole-package/
======
nsthorat
I've used Polymer for about a year now, and it's not my favorite.

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't yell at you; debugging
tools are just plainly lacking. There's a reason Google doesn't use it widely.

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).

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.

(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)

~~~
nverba
Also, using the two way binding is optional. We've been using Polymer for
about the same time with Redux and a unidirectional data flow. I'm very happy
with it.

~~~
sravan_ess
@nverba Hoi mate, Any pointers about using redux with polymer? I have been
using polymer for some eight months now. I tried to implement redux in one of
my components a couple of months back. But I couldn't finish it, because of
the humongous refactoring work.

~~~
timeu
You can check out polymer-redux ([https://github.com/tur-nr/polymer-
redux](https://github.com/tur-nr/polymer-redux)). It's makes it easy to
integrate the redux store inside your components. Basically you will split up
your components in two types: 1.) container components that are redux aware
and subscribes to slices of your state graph and pure presentational
components that are unaware of redux and are management by the container
components. This is similar to what is suggested in React/Redux. This way you
can re-use your presentational components elsewhere.

Check also this guide: [https://medium.com/@dan_abramov/smart-and-dumb-
components-7c...](https://medium.com/@dan_abramov/smart-and-dumb-
components-7ca2f9a7c7d0#.a9y6idjta)

~~~
sravan_ess
Thanks for the link. Still the presentational components have to be 2-way
binded, right?

~~~
timeu
yeah either 2-way binding or just firing events which are handled in the
container components (2 way binding is actually implemented using events)

------
visionscaper
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:

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.

A potentially useful way to structure large Polymer based applications is to
combine Polymer and Redux, separating presentation code from state/business
logic.

2) No idiomatic way to do dependency injection. In Polymer even services are
stated declaratively in HTML (e.g. `<my-service data={{resourceData}}></my-
service>`). 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].

3) Build process still buggy. We encountered multiple issues with the polymer-
vulcanize library.

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.

[1] “Polymer - Dependency Injection with Custom Elements by Justin Fagnani”
[https://www.youtube.com/watch?v=6o5zaKHedTE](https://www.youtube.com/watch?v=6o5zaKHedTE)

~~~
nverba
Exactly this. I think some of the tutorials and introductions were a bit
overwhelming with their huge dependency lists (see Polymer catalogue), and a
lot of opinionated ideas about how to form a Polymer application. Core Polymer
is so easy to pick up and flexible. It's been a joy to work with. Well ok,
there's a few gotchas, and the build process if you're mostly rolling your own
can be a real pain. But once you find your feet with it, everything works
pretty well.

------
yathern
I've been using Polymer since 0.5 for a number of personal projects as well as
professional.

I have to say it'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.

Polymer gives you Data Binding and a few nice things on top of that, but for
the most part, you're writing things fairly vanilla.

It's definitely not without it's problems. Element inheritence doesn't really
exist in 1.X unless you use Behaviors. There'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:

    
    
       <span hidden$='[[thingsAreEqual(a,b)]]>They are not equal</span>
    

vs

    
    
       <span hidden$='[[a==b]]'>They are not equal</span>
    

But even still, I've been able to be very productive with it, and enjoy using
it thoroughly. Feel free to ask me about my experience.

~~~
Pigo
I first looked at Polymer quite awhile ago, maybe over a year. I guess I kind
of thought it was a stepping stone to Angular 2 which uses a component model,
like most of the other latest frameworks. Or that maybe it was some kind of
special one-off project at Google. Once I stumbled onto Angular Material I
sort of forgot about Polymer because I didn't have a dedicated UI guy, and
there was a nice cache of controls to work with. I'd consider looking into
Polymer again if I see a some good demos in the PolymerElements, and if it
seems like there's a roadmap with an active community. I'm always impressed
with Google Play Music.

~~~
cdata
Some potentially relevant links for you...

1: [https://beta.webcomponents.org/](https://beta.webcomponents.org/) \- A
public repository of web components (including the official Polymer components
and community components).

2: [https://polymer-slack.herokuapp.com/](https://polymer-
slack.herokuapp.com/) \- Join the Polymer community on Slack. All of the core
team members are there as well :)

~~~
Pigo
Thanks, I always thought it was a slick project. It was maybe just above my
skill-set when I first encountered it, as I was still getting familiar with
angular. If it's going to continue to be around for awhile, I want to give it
another shot.

------
adamduren
I found Polymer to be very easy to pickup coming from Angular 1 & 2\. The only
friction I experienced was difficulty integrating TypeScript.

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.

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!

~~~
nsthorat
You can do something simple like this:
[https://github.com/tensorflow/tensorflow/blob/master/tensorf...](https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-
projector-util.ts)

And a simple implementation:
[https://github.com/tensorflow/tensorflow/blob/master/tensorf...](https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-
projector-metadata-card.ts)

------
abdonrd
Exciting about Polymer 2.0 for take advantage of native "v1" Web Components
implementations across browsers.

------
bezzi
This framework seems very interesting, I wonder why it didn't become popular
outside of Google

~~~
Klathmon
For a while there in the .5 to .8 days performance was pretty iffy, and the
documentation was lacking (as was expected for a library pre-1.0), but it
seemed that was when a lot of bloggers picked it up, compared it to
react/angular, then dropped it.

And back then when I was trying it out there wasn't any easy way to integrate
webpack (or something like it) which made it difficult as I've gotten very
used to a good bundler/compiler.

~~~
zacharytamas
Yeah... I remember those days. The first projects I built with it were 0.5.
The migration to 0.8 was... painful. But given the huge performance
improvements it was worth it.

As you said, you kinda just have to expect a little pain pre-1.0. But the time
investment in learning and using it has been worth it in my opinion.

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

~~~
seangrogg
I've yet to see one. Might make one, though, because I deal with this a lot on
Quora as well.

------
hanspragt
I have recently decided to switch from Polymer to Material2 for the following
reasons:

\- Polymer is only available through bower, which means I have to teach 2
package management systems to my developers.

\- The documentation is not great (for instance, events are documented in
camelCase, but must be listened for in Angular 2 using dashes-between-words).

\- There are serious issues [0] which not gone resolved for a long time.

\- 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)

[0]:
[https://github.com/webcomponents/webcomponentsjs/issues/541](https://github.com/webcomponents/webcomponentsjs/issues/541)

~~~
adamduren
I think you meant to say that you switched to Angular 2 with Angular Material
2 which still considers itself in alpha status which I would not currently use
in production.

I agree that the documentation can be improved in that respect, however once
you have learned the convention it applies for all components. In angular 1
documentation you had the same issues of `ngRepeat` and similar directives
being expressed as `ng-repeat` in the HTML attributes. The only explanation is
in the directive documentation [0] which can be pretty exhausting to take in.

[0]:
[https://docs.angularjs.org/guide/directive#normalization](https://docs.angularjs.org/guide/directive#normalization)

~~~
hanspragt
No, we used Polymer in an Angular 2 app. <\- Sorry, I misunderstood what you
were saying. Yeah, the full name is Material Design for Angular 2.

Even though Material 2 is in alpha, the components we need just work better
than in Polymer; They have fewer quirks, fewer bugs, and fit better into the
Angular 2 ecosystem.

~~~
adamduren
Ah, I understand now. I've done some work integrating Angular 2 and Polymer
and there are pitfalls.

I've come across this repo in the past for integrating the two but I
personally haven't used it yet.

[https://github.com/vaadin/angular2-polymer](https://github.com/vaadin/angular2-polymer)

~~~
hanspragt
The integration into Angular 2 was actually fairly seamless once I added
vulcanize into the build process.

------
sravan_ess
I have been working on polymer based projects for some time(8 months).

My opinion is that, polymer is good for specific use cases such as- Creating
leaf level components, Reusing components around multiple projects.

BUT....

Building complete applications in Polymer has been a painful experience

I have at times encountered critical 'library bugs', which haven't been fixed
yet, we had to use hacky workarounds and forked repos with fixes. Check
'p1-backlog' in github

Less control over elements because of two-way-data binding, I guess I should
use redux with it. But I'm still a bit confused about certain aspects of
adding redux into the mix

The application end up really heavy

I wish I had a bit more control over vulcanize

------
datashovel
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.

------
Ruphin
I work with Polymer quite a lot, it is my favorite platform both
professionally and for personal projects.

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.

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's problems. I have to say that it takes quite a while before
it really 'clicked', 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'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't know what you'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.

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.

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:

\- [https://overwebs.ruph.in](https://overwebs.ruph.in) (warning: sound and
relatively high bandwidth. Works best in Chrome, other browsers untested)

[1] [https://polymer-slack.herokuapp.com/](https://polymer-
slack.herokuapp.com/)

------
yellowboxtenant
I'm curious if anyone uses SASS or Pug(jade) in Polymer components and how you
implement. Do you use polymer-build / Gulp?

What about JS Modules?

~~~
yellowboxtenant
I just use Gulp alongside the standard Polymer CLI. Here's my Gulp config
[https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1...](https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1ff19)

~~~
yellowboxtenant
Thanks man, you're the best.

------
ns8sl
polymer-project link is not working

~~~
zacharytamas
Thanks for the heads up, fixed! Looks like their website requires the www.
prefix or it doesn't work at all.

~~~
jiaweihli
spankalee@

Likely needs an A or a CNAME record.

