I haven’t done an app yet with Meteor, just followed a lot of tutorials and tried Meteor for small things.
But now I feel that I would start on an app. I really would like to use Polymer, but I don’t really know how to install it. Should I use some package like https://github.com/ecwyne/meteor-polymer/tree/1.0, or should I use HTML imports?
Also, does Polymer play well with Meteor now? I’ve seen some comments about the double brackets issue and so on. Does it work yet?
Thanks!
/Meteor newbie
I don’t know if you’ve seen this thread yet but there’s a very hot debate going on about the view layer for Meteor. See this: Next steps on Blaze and the view layer
To sum up, basically MDG is focusing on React as the view layer, so that’s probably the platform you’ll find most resources and support from MDG from now on.
That being said, I know close to nothing about Polymer and React, so I don’t know if and where they overlap. My advice is, focus on React for your view layer.
oh, welcome to Meteor!
I wouldn’t say they are focusing on React. MDG is also working directly with the Angular team, so Angular 2.0 will have full parity when it eventually comes out.
They are giving you choices on the frontend.
Hi, I’ve managed to understand how to use Polymer with Meteor after a long struggle.
You can see it here ( the markers are data from a mongo collection and you can filter them. Disable “silk screen” under “processes” to see it work). This is done with shady DOM, not the old shadow DOM polyfill.
Meteor and Polymer don’t work that well together out of the box. Why? When you use a custom-element such as
<paper-dropdown></paper-dropdown>
Polymer generates DOM like this
<paper-dropdown>
<div>
<div>this is a random visualization to visualize div soup</div>
</div>
</paper-dropdown>
Now, if you have something like this:
<paper-dropdown>
{{#each bla}}
<paper-item>blubb</paper-item>
{{/each}}
</paper-dropdown>
Meteor get’s all confused because of the DIV soup and it’s like "What, I don’t get it, where am I supposed to put the paper-items in the #each helper? With shadow DOM this does not happen, because custom-elements with native shadow DOM are essentially normal HTML elements that you have built yourself. The old shadow DOM polyfill therefore works with Meteor - but is freaking slow.
As of today, only Chrome and Opera support shadow DOM. Safari has recently implemented shadow DOM but it is not yet shipped. Edge and Firefox are most likely working on the integration right now as well (just about 1-2 months ago all browser vendors agreed on a final v1 of shadow DOM).
Since the shadow DOM polyfill is slow, Google/smart people at https://github.com/webcomponents/webcomponentsjs came up with shady DOM, which roughly emulates shadow DOM, but not as strict as the old polyfill. It works a lot faster but: DIV soup that makes meteor and other frameworks sad.
Now, how do we solve this? Simple! We don’t generate new HTML elements with meteor. Instead, we only pass data (objects, arrays) to a custom Polymer element. This custom element contains all the frontend stuff we need. So in case of a {{#each}} helper what we do is this:
<map-view map-data='{{map-data-meteor'}}></map-view>
map-data is a property defined in the custom element “map-view”, whereas map-data-meteor is data that is pushed to the element via a meteor helper. Now in our template, we are able to just generate the elements similarly to how the each would work:
<template is='dom-repeat' items='{{mapData}}'>
<paper-item>{{item.somedata}}</paper-item>
</template>
Bam, magic! This is the gist of it. I’m really, really trying to reach out to people to help meteor get a better integration with Polymer. Either by creating custom DOM insertion that uses Polymer’s DOM api or by creating a router that handles stuff better. Ideally, we would get rid of blaze and jquery because we don’t need them. All we need is a way to include our custom-element and pass data to it, that’s it.
Thanks all for your answers!
@thomasyajl36 @jacobin
I’ve listened on podcasts and read about React. It seems like the majority that uses anything else than Blaze are using React. At the moment I haven’t worked with neither Angular nor React. So I’m not sure what to learn. Which one do you recommend?
@AndreasGalster Thank you for your example and explanation! Now I understand the problem with Polymer.
I haven’t yet worked with neither React nor Angular. My plan is to start learning React next month.
React is not on version 1.0 yet, but it seems like the API is somewhat stable and, besides, Facebook has been using React for a long time.
As for Angular, they’re working on version 2.0 which is not compatible with 1.xx. I don’t know when 2.0 will be out, but I think you can probably find a way to try whatever work-in-progress they have for now.
I wouldn’t put time into learning Angular 1.0.
Overral I feel like MDG has more love for React. But that’s just my impression.