8 ms·

An Introduction to Polymer - A Web Component Library

97 points by zacharytamas 10y ago

vizza 10y ago
The link to the polymer site is broken.
ns8sl 10y ago
polymer-project link is not working
- zacharytamas 10y ago
  Thanks for the heads up, fixed! Looks like their website requires the www. prefix or it doesn't work at all.
  - jiaweihli 10y ago
    spankalee@ Likely needs an A or a CNAME record.
yathern 10y ago
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: They are not equal vs They are not equal 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.
- hood_syntax 10y ago
 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.
- zacharytamas 10y ago
 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.
- Pigo 10y ago
 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 10y ago
 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 :)
bezzi 10y ago
This framework seems very interesting, I wonder why it didn't become popular outside of Google
- zacharytamas 10y ago
  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/ 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/ https://webkit.org/blog/7027/introducing-custom-elements/
  - ergo14 10y ago
    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.
    - zacharytamas 10y ago
      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.
    - Vinnl 10y ago
      React's virtual DOM has a far smaller performance impact than the web components polyfills have...
adamduren 10y ago
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!
- zacharytamas 10y ago
  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.
- nsthorat 10y ago
  You can do something simple like this: https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-projector-util.ts https://github.com/tensorflow/tensorflow/blob/master/tensorf... And a simple implementation: https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-projector-metadata-card.ts https://github.com/tensorflow/tensorflow/blob/master/tensorf...
- spankalee 10y ago
  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 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.
abdonrd 10y ago
Exciting about Polymer 2.0 for take advantage of native "v1" Web Components implementations across browsers.
nsthorat 10y ago
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)
- spankalee 10y ago
  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.
- Ruphin 10y ago
  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.
hanspragt 10y ago
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 10y ago
 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 10y ago
 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 10y ago
 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
GrinningFool 10y ago
Does there exist an index of JS frameworks and the needs each is intended to meet?
- seangrogg 10y ago
  I've yet to see one. Might make one, though, because I deal with this a lot on Quora as well.
Ruphin 10y ago
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/
visionscaper 10y ago
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 10y ago
 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.
yellowboxtenant 10y ago
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 10y ago
  I just use Gulp alongside the standard Polymer CLI. Here's my Gulp config https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1ff19 https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1...
  - yellowboxtenant 10y ago
    Thanks man, you're the best.
mikebay 10y ago
Riotjs is rocking for me much better. Its really light weight and straight forward flow.
datashovel 10y ago
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.
sravan_ess 10y ago
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

97 points by zacharytamas 10y ago

vizza 10y ago

The link to the polymer site is broken.

ns8sl 10y ago

polymer-project link is not working

zacharytamas 10y ago
Thanks for the heads up, fixed! Looks like their website requires the www. prefix or it doesn't work at all.
- jiaweihli 10y ago
  spankalee@ Likely needs an A or a CNAME record.

yathern 10y ago

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: They are not equal vs They are not equal 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.

hood_syntax 10y ago
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.
zacharytamas 10y ago
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.
Pigo 10y ago
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 10y ago
  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 :)

bezzi 10y ago

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

zacharytamas 10y ago
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/ 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/ https://webkit.org/blog/7027/introducing-custom-elements/
- ergo14 10y ago
  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.
  - zacharytamas 10y ago
    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.
  - Vinnl 10y ago
    React's virtual DOM has a far smaller performance impact than the web components polyfills have...

adamduren 10y ago

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!

zacharytamas 10y ago
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.
nsthorat 10y ago
You can do something simple like this: https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-projector-util.ts https://github.com/tensorflow/tensorflow/blob/master/tensorf... And a simple implementation: https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/components/vz_projector/vz-projector-metadata-card.ts https://github.com/tensorflow/tensorflow/blob/master/tensorf...
spankalee 10y ago
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 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.

abdonrd 10y ago

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

nsthorat 10y ago

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)

spankalee 10y ago
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.
Ruphin 10y ago
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.

hanspragt 10y ago

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 10y ago
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 10y ago
 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 10y ago
 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

GrinningFool 10y ago

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

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

Ruphin 10y ago

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/

visionscaper 10y ago

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 10y ago
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.

yellowboxtenant 10y ago

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 10y ago
I just use Gulp alongside the standard Polymer CLI. Here's my Gulp config https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1ff19 https://gist.github.com/NickRun/977bb54eada17653acc81ccd63b1...
- yellowboxtenant 10y ago
  Thanks man, you're the best.

mikebay 10y ago

Riotjs is rocking for me much better. Its really light weight and straight forward flow.

datashovel 10y ago

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.

sravan_ess 10y ago

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