5 ms·

Disclaimer: I led development of gaming.youtube.com. We chose Polymer at the time for non-technical reasons. Some downsides: Performance is not great. Lack of

Disclaimer: I led development of gaming.youtube.com. We chose Polymer at the time for non-technical reasons. Some downsides: Performance is not great. Lack of coherent data architecture (e.g. Redux). Difficult to manage state change (as opposed to React) due to a more limited programming model - e.g. template ifs and repeats don't know to reevaluate in many cases. This makes it harder to integrate with third party js libraries. Inferior tooling vs React. Philosophically Polymer is more about the DOM and React is more JS-focused. Some of this is personal preference.

torgoguys 10y ago
You answered the question asked, but I'm also curious as to what you liked about it for that project.
- sshumaker 10y ago
  Pluses: It was vastly preferable to server-side template rendering (how YouTube is traditionally built). :) Generally well-built components with support for material design patterns. Polymer team was responsive to issues and quick to address feedback. Plus a bunch of non-technical reasons like developer mindshare within YouTube etc.
nawitus 10y ago
>e.g. template ifs and repeats don't know to reevaluate in many cases. Examples?
- eob 10y ago
  There's a bit of hassle required to bind conditionals to object paths IIRC. Also CSS classes bound to variables don't work well if you're also using custom-style elements, which is virtually inevitable.
- sshumaker 10y ago
  They don't re-evaluate on nested path changes, e.g. if (item.bar.isActive) won't trigger if isActive changes. You can work around this in practice but often it requires significant architectural changes and for your regular JS code to be Polymer-aware. This wasn't true in Polymer 0.6 but required Object.observe which is SLOW. React's render everything and diff approach avoids this issue.
  - justjico 10y ago
    I agree this can be a pain and it does require significant architectural changes, but needing "nested path changes" is also often a code smell calling for better component encapsulation. The DOM/polymer already supports nesting components.
    - elcritch 10y ago
      This seems to be a common assumption in the JS world. Even many polymer elements seem to focus on providing stunts for JS procedural style programming rather than DOM first programming. Do you have any good resources on refactoring JS code to be more DOM centric? I'm thinking tools like d3.
justjico 10y ago
I found you don't really need Redux if you follow the "DOM is your API" paradigm. Components/events/changes make a lot more sense after that.
- nightwolf 10y ago
  >the "DOM is your API" paradigm What does that mean, exactly? Do you have any resources you could link to?
  - nostrademons 10y ago
    Not OP and I don't have any resources for you, but I spent a while playing around with Polymer in the very early (0.3) stages, and was one of the first internal Google customers for them. I found that once you have web components, there's nothing stopping you from representing your entire webapp's UI in terms of semantic elements only. For example, a HN comment thread could look something like this: <hn-thread title="Ask HN: What are the cons of Google Polymer?" votes="47" comments="46" posted="20160509T12:12:00"> <hn-comment author="sshumaker" posted="20160509T14:12:00"> Disclaimer: I led development of gaming.youtube.com... <hn-comment author="justjco" posted="20160509T14:40:00"> I found you don't really need Redux if you follow the "DOM is your API" paradigm.... <hn-comment ...></hn-comment> </hn-comment> <hn-comment author="torgoguys" posted="20160509T14:56:00"> You answered the question asked, but I'm also curious as to what you liked about it for that project. </hn-comment> </hn-comment> </hn-thread> All of the details about how to present a <hn-thread> or <hn-comment> are encapsulated in the definition of the custom element, and you only specify the data that changes between each one. Similarly, you could define methods on <hn-comment> that pop up a comment box when you hit "reply", for example, and this also drops out of the light DOM tree. When you do it this way, your DOM becomes basically isomorphic to what you would write in your Redux state or send in a JSON response. You could, in fact, write a trivial helper to convert between JSON and DOM, but there isn't really a need when you could just send HTML down the wire.
    - spankalee 10y ago
lastmjs 10y ago
You can use Redux with Polymer projects. I've created an element for that: https://github.com/lastmjs/polymer-redux-store https://github.com/lastmjs/polymer-redux-store

torgoguys 10y ago

You answered the question asked, but I'm also curious as to what you liked about it for that project.

sshumaker 10y ago
Pluses: It was vastly preferable to server-side template rendering (how YouTube is traditionally built). :) Generally well-built components with support for material design patterns. Polymer team was responsive to issues and quick to address feedback. Plus a bunch of non-technical reasons like developer mindshare within YouTube etc.

nawitus 10y ago

>e.g. template ifs and repeats don't know to reevaluate in many cases. Examples?

eob 10y ago
There's a bit of hassle required to bind conditionals to object paths IIRC. Also CSS classes bound to variables don't work well if you're also using custom-style elements, which is virtually inevitable.
sshumaker 10y ago
They don't re-evaluate on nested path changes, e.g. if (item.bar.isActive) won't trigger if isActive changes. You can work around this in practice but often it requires significant architectural changes and for your regular JS code to be Polymer-aware. This wasn't true in Polymer 0.6 but required Object.observe which is SLOW. React's render everything and diff approach avoids this issue.
- justjico 10y ago
  I agree this can be a pain and it does require significant architectural changes, but needing "nested path changes" is also often a code smell calling for better component encapsulation. The DOM/polymer already supports nesting components.
  - elcritch 10y ago
    This seems to be a common assumption in the JS world. Even many polymer elements seem to focus on providing stunts for JS procedural style programming rather than DOM first programming. Do you have any good resources on refactoring JS code to be more DOM centric? I'm thinking tools like d3.

justjico 10y ago

I found you don't really need Redux if you follow the "DOM is your API" paradigm. Components/events/changes make a lot more sense after that.

nightwolf 10y ago
>the "DOM is your API" paradigm What does that mean, exactly? Do you have any resources you could link to?
- nostrademons 10y ago
  Not OP and I don't have any resources for you, but I spent a while playing around with Polymer in the very early (0.3) stages, and was one of the first internal Google customers for them. I found that once you have web components, there's nothing stopping you from representing your entire webapp's UI in terms of semantic elements only. For example, a HN comment thread could look something like this: <hn-thread title="Ask HN: What are the cons of Google Polymer?" votes="47" comments="46" posted="20160509T12:12:00"> <hn-comment author="sshumaker" posted="20160509T14:12:00"> Disclaimer: I led development of gaming.youtube.com... <hn-comment author="justjco" posted="20160509T14:40:00"> I found you don't really need Redux if you follow the "DOM is your API" paradigm.... <hn-comment ...></hn-comment> </hn-comment> <hn-comment author="torgoguys" posted="20160509T14:56:00"> You answered the question asked, but I'm also curious as to what you liked about it for that project. </hn-comment> </hn-comment> </hn-thread> All of the details about how to present a <hn-thread> or <hn-comment> are encapsulated in the definition of the custom element, and you only specify the data that changes between each one. Similarly, you could define methods on <hn-comment> that pop up a comment box when you hit "reply", for example, and this also drops out of the light DOM tree. When you do it this way, your DOM becomes basically isomorphic to what you would write in your Redux state or send in a JSON response. You could, in fact, write a trivial helper to convert between JSON and DOM, but there isn't really a need when you could just send HTML down the wire.
  - spankalee 10y ago

lastmjs 10y ago

You can use Redux with Polymer projects. I've created an element for that: https://github.com/lastmjs/polymer-redux-store https://github.com/lastmjs/polymer-redux-store