Polymer + Meteor


#1

I am looking for a way to integrate Meteor and Polymer. I have basic polymer app development skill and i want to integrate my basic meteor blog app with its elements, transitions and animations, how can I do it? I am mostly confused on the part that meteor also uses, {{helper}} in template file and polymer also uses such double curly helpers for data-binding, how do you separate those?

Is there any basic app example or something, i have seen example of differential:polymer-demo but it is somehow confusing for me.


#2

Please be more specific about “somehow confusing” – what exactly are you confused about? What more specific question do you have?

I just installed Differential’s polymer-demo and I can see that they do not provide an example of creating one’s own polymer component in there. So it’s clear that your first question isn’t answered in this demo.
Here’s a thought: I suppose you should be able to create custom components outside of the Meteor app and then import them just like you would with any web component? Isn’t that even the whole purpose of the polymer/webcomponents business that you should create reusable components that look and behave like they were a regular HTML element? And then behavior gets added on to these components as you include them in a specific site or app?
I’m not too familiar with the specifics of polymer/webcomponents, so I’m just deducing here. But it seems to me that fundamentally you have nothing to gain from defining your web components inside a Meteor app, because you can use polymer’s own templating & definition of styles etc for that. And then when you include one of your custom defined components into your specific Meteor app, that is a good time to tack on some additional behavior and specific styling, just like we do with all of the other HTML elements that we use inside our apps.

Other than that you could probably place or name your web components files such that Meteor won’t process them as regular templates, and so you’d be free to use the {{curly braces}} syntax in there without Blaze interfering because it thinks you’re writing a Blaze template there. (Something like… either placing them in private/ and manually sending them to the client, or creating a package that defines an extension like .webcomponents.html that won’t be processed by Blaze, or… I’m sure others here might have more and potentially better ideas for you, too!)

Hope that helps for now, until someone more experienced with Polymer weighs in!


Web components support
#3

@kshitizrimal,

Agree with @seeekr on everything.

You can’t mix Blaze template files and Polymer components. Blaze will attempt to interpret the Polymer components as Blaze. The way I’ve seen it done is to stick Polymer components in the public folder.

Taking it further, IMO, Blaze components and Polymer components are competitive. That is, anything you can do in one you can do in another. So I’m not sure which one is right for you.

I have a basic Meteor-Polymer app example where the app is written in Polymer components (that live in public) and talk to a Meteor server via Minimongo. There are no Blaze files in it.

HTH,
Gerard


#4

I partially agree with guys above.
Reserved tag template and curly braces are quite annoying.
Still for what exactly you need data binding? Cause blaze can take care of attributes management and there are many events fired around animations too.
So you should not need direct communication between polymer components in theory :smiley:
Or you can extend “default” polymer components and fire your own events so blaze can respond to them and propogate attributes to other components.
Kinda become polymer states single point of truth, as minimongo is for data on client.

PS: 1.0 now have 1 way binding using [[]] .
Can you somehow echo <template> tag to html so we can initialize the external form of bindings polymer provide?