An Introduction to Polymer - A Web Component Library
wearenorthern.comI'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)
Two-way data-binding is definitely still controversial and/or can be hard to use in some cases, but its also very easy to use in others, and we've found it help people get started very quickly. I think it's important to know that it's an _option_ and has potential downsides. I'm not sure we communicate that enough. We do have large customers who follow a mostly-one-way pattern.
Speaking of, Google does use Polymer widely. All of YouTube is converting to Polymer right now, plus quite a large number of "smaller" projects like Play Music, Chrome, Translate, Chromecast, TensorFlow :), etc.
Two-way data binding is indeed a bad pattern, but the issue is that there is only syntax to bind data down, with [[]]. Sometimes it makes sense to get data from a child, and {{}} can be convenient, as long as you follow the rule that you only use it to retrieve data, and never try to set it. Unfortunately there is no syntax for such a binding, but as long as you follow the style that {{}} is only used as a one-way binding (but in the opposite direction compared to [[]]) it works just fine.
I usually create elements that are responsible for managing a certain type of data, and expose is through properties. This data can then be used anywhere in the application, by using that element and observing with {{}}. I really like that pattern, it feels like a traditional model object that exposes a nice API to consumers.
I definitely agree that you need a pretty strict style guide, it's too easy to go crazy and just stitch things together, and end up with an entangled mess.
I'm a big fan of the two-way data binding in Angular (though you do need to be aware of its limits), and I'd gotten the impression that Polymer was a bit of a spiritual successor to Angular. Any opinions on how the two compare?
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.
@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.
You can check out 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...
Thanks for the link. Still the presentational components have to be 2-way binded, right?
yeah either 2-way binding or just firing events which are handled in the container components (2 way binding is actually implemented using events)
I've had very similar experience with Angular 1.x where a lot of problems can be avoided by having a sensible styleguide/standard across the entire team. I've since moved to using React and couldn't be happier :)
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
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.
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>
<span hidden$='[[a==b]]'>They are not equal</span>
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.
Some potentially relevant links for you...
1: https://beta.webcomponents.org/ - A public repository of web components (including the official Polymer components and community components).
2: https://polymer-slack.herokuapp.com/ - Join the Polymer community on Slack. All of the core team members are there as well :)
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.
> Once I stumbled onto Angular Material I sort of forgot about Polymer because I didn't have a dedicated UI guy
That is kind of funny - because it looks like polymer has much more complete Material UI implementation compared to both Angulars (unless they catched up on that).
The idea of Polymer/Web Components appeals to me as a backend developer who has a little experience with JS and Angular 1. Can you tell me a little about how you've used it professionally and what you thought? I.e. scale, scalability, maintainability, encapsulation. I've read a little about Polymer but I haven't spent enough time to grok it. Note: consider me a novice as far as front end goes.
Yeah that's a nice/bad thing about Polymer: how vanilla it is. 2.0 is even more vanilla. But the mantra is to #UseThePlatform and so that's what they do. The platform is becoming less burdensome than it used to be. Because of how isolated Web Components are it keeps things simple, particularly when you're dealing with DOM. Components tend to keep to themselves and interact with each other via your agreed-upon interfaces.
I also noticed the verboseness. On the projects I worked on at Google I had just made a Behavior of logic utilities that I added to components that needed that kind of behavior. So they could inherit some utilities like `_equalTo`. It wasn't ideal but it did stop the need to define essentially the same functions across multiple components.
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!
You can do something simple like this: https://github.com/tensorflow/tensorflow/blob/master/tensorf...
And a simple implementation: https://github.com/tensorflow/tensorflow/blob/master/tensorf...
Yep, we're going to greatly expand our support of TypeScript with Polymer 2.0. We'll have supported type declarations, and decorators to help write elements, and eventually (though maybe not at Polymer 2.0's release) tools support in the Polymer Analyzer and IDE plugins. You'll even be able to type check and auto-complete in your templates.
There's a little dated PR that adds TypeScript decorators here: https://github.com/Polymer/polymer/pull/3954 We're probably going to break out the decorators into a separate packages, since the ECMAScript decorators proposal has diverged a bit from what TypeScript supports now.
Yeah... I used it initially with no TS experience, but coming back to it later I do find myself missing TS. But yeah you can use polymer-build to split the script block out of the HTML file, run it through TSC, then insert it back into the file as JS.
Exciting about Polymer 2.0 for take advantage of native "v1" Web Components implementations across browsers.
This framework seems very interesting, I wonder why it didn't become popular outside of Google
It is popular outside of google:
https://youtu.be/VBbejeKHrjg?t=9m22s
ING, USA Today, IBM, General Electric, Comcast, Net-A-Porter, BBVA, Coca-Cola, Electronic Arts - one of the biggest players in their industries.
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.
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.
I've found it's still pretty difficult to integrate with Webpack because pretty much all of the components use bower instead of npm. I've been having success with https://github.com/aitoroses/vulcanize-loader although re-running vulcanize every time components change is not fast, and I can't get it to work with Hot Module Reloading. Maybe the Webpack story will get better with Polymer 2.0
I think it's mostly due to browser support and developer awareness of Web Components. Chrome has native support (of course) for the four main technologies needed for Web Components, but other browsers are starting to catch on. In the meantime you need a few Polyfills to get full support, which is not ideal.
The support graph is starting to look a lot better, though: https://jonrimmer.github.io/are-we-componentized-yet/
Safari has shipped 2/4 of them already with the Custom Elements v1 spec currently in the Safari Tech Preview and turned on by default. https://webkit.org/blog/7027/introducing-custom-elements/
Sure, but look at it this way - with other solutions like lets say React their virtual dom is your "polyfill". Even with polyfills polymer is MUCH smaller than react core ;-) I don't see it as a problem as I've created elements that worked in IE10+ with it.
Oh I definitely agree with you. We've worked on projects with Angular 1/2, React/Redux, and Polymer and Polymer is, for me personally at least, the nicest to work with. I have grown to really like TypeScript since working in React land on recent projects but I'm excited because Polymer 2.0 will be [easily] TS compatible. Best of both worlds, I think.
React's virtual DOM has a far smaller performance impact than the web components polyfills have...
You with your FUD again, dbmon benchmarks say otherwise.
Does there exist an index of JS frameworks and the needs each is intended to meet?
I've yet to see one. Might make one, though, because I deal with this a lot on Quora as well.
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
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
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.
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.
The integration into Angular 2 was actually fairly seamless once I added vulcanize into the build process.
Polymer 2.x will be distributed with npm + yarn. They had technical reasons to stick with bower for time being. They worked with yarn and it is the solution to the problem :-) There was a talk on the subject on polymer summit.
you serious issue IS merged https://github.com/webcomponents/webcomponentsjs/pull/644 ;-)
Also its NOT polymer issue - it is polyfill issue. It affects things like x-tag,bosonic and others. ANyways it looks like latest release is the fixed version.
I understand that webcomponentsjs is a polyfill, but it is a required dependency for Polymer, and until it uses the version with the fix, the issue will be a problem. Anyway, that was just one example of many.
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
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.
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 (warning: sound and relatively high bandwidth. Works best in Chrome, other browsers untested)
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?
I just use Gulp alongside the standard Polymer CLI. Here's my Gulp config https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1...
Thanks man, you're the best.
polymer-project link is not working
Thanks for the heads up, fixed! Looks like their website requires the www. prefix or it doesn't work at all.
spankalee@
Likely needs an A or a CNAME record.