Polymer 1.0 with Meteor - pros and cons

Could you assure me that Meteor with Blaze + Polymer 1.0 (or Polymer at all) is a good idea? I mean are there any performance problems or is there something particular hard to achieve? What are the blockers? Etc. I don’t know if this is a good path for Meteor projects and I really like Polymer. I would love to hear something from Differential. @ryw @schnie @rgoomar ? :wink: Thanks.

4 Likes

this doesn’t concern version 1.0 specifically,
but as long as PhantomJS doesn’t support webcomponents.js, you can’t use polymer with the spiderable package

+1 for integration of Meteor + Polymer 1.0

1 Like

We haven’t seen any performance problems with Polymer, and 1.0 promises better performance so that’s not a concern. I guess #1 concern would be being the first person to do Polymer 1.0 + Meteor.

@schnie just accepted PR for https://github.com/Differential/meteor-vulcanize/ for 1.0 support + released to atmosphere, so that’s a start :smile:

I wasn’t aware or have forgotten about the spiderable issue. We don’t have spiderable on our usercycle meteor repo, and looking in Google for USERcycle, definitely uglying up our Google results. The pages are in the index, but no page descriptions showing.

1 Like

I am moving over my Polymer 0.5 + Meteor App to Polymer 1.0.
I ran in a couple of issue which looks to be Polymer / Chrome related.
It could be that Blaze messes up the rendering order however, I am having issues with loading icons.
See my other posts about this for more details

2 Likes

I ran Meteor with Polymer 1.0 based on your demo ( https://github.com/Differential/polymer-demo ) and it works quite good, but I need to test it more. I like this approach with bower and vulcanize package. Thanks.

I most want to learn exactly how to get around the syntax clash with spacebars. It seems like even with HTML imports we’d lose a lot of the more advanced Polymer functionality

Checkout https://github.com/meteorwebcomponents/compiler . . https://github.com/meteorwebcomponents/demo-flowrouter . An attempt use polymer as the view layer instead of blaze. You can remove blaze which is causing issues.

3 Likes

How stable is the PolymerLayout already?

mwc:layout it is quite stable. mwc:compiler needs a better file watching algorithm. With the current version sometimes you have to delete the vulcanized file public/mwc_compiler.html manually . Other than that it works fine. Here is an app which uses mwc components. https://github.com/HedCET/TorrentAlert . I’m currently working on extensions which can work on top of the output of mwc:compiler. mwc:extensions , mwc:ecmascript (run babel on the scripts inside polymer components) (work is not complete in both packages).

mwc:mixin - use the reactive meteor collections inside polymer elements.

mwc:router - User FlowRouter reactively from polymer components

https://github.com/meteorwebcomponents/layout - polymer layout renderer (similar to Blaze.render)

###Update

mwc:extensions package is ready with one extension mwc:ecmascript which transpiles es6 scripts inside the polymer html files. https://github.com/meteorwebcomponents/extensions . https://github.com/meteorwebcomponents/ecmascript .

Here is a kickstart repo

4 Likes

Thanks for all the love!

mwc:compiler works great! You should probably add a basic example of mwcLayout. It’s really hard to find all the three pieces in the advanced example. I’m still looking for the last missing piece I guess (where do you reference the component to be embedded).

Specifically it’s not clear what are all the steps to get a basic layout/router example working. For example I’m not sure do I need to define mwcRouter behavior to make the basic mwc.Layout.render() work for a polymer component?

mupx fails. Is this because it requires npm, so essentially meteor 1.3?

@AndreasGalster meteor 1.3 have issues with npm binary packages that’s the problem

mwc:mixin is the awesome thing which provide reactive data source inside polymer like blaze helper

Is there a solution or workaround for this?

https://github.com/meteorwebcomponents/kickstart-meteor-polymer.
Here is a basic example with all mwc packages. Check files. client/router.js , client/compiler.mwc.json, .polymer/index.html, .polymer/demo/demo.html

they said meteor-1.3.1 will support npm binary packages

Yes, I was missing the bower dependency on mcw-layout. I didn’t know you had to bower import it. So a documentation or at least checklist 1,2,3 would be good. I’ll create a pull request when I find time. Got it working now, I’m finally rid of jquery & blaze, thank you :smiley: ! Also, 1.3 beta 12 worked for me :slight_smile:

1 Like

Have you tried importing npm packages in polymer components? I’ve added the ecmascript package but when I run an import in my polymer component it says unexpected token import.

Also referencing to scripts outside of the .polymer folder doesn’t seem to be possible. It always reverts to the root folder which is .polymer, so loading npm_modules via script tags doesn’t seem possible.

you can do this inside meteor client folder, polymer root directory anywhere in ur system so meteor can’t refer it if it outside meteor directory

Isn’t that the point of the ecmascript extension? Otherwise, how am I truly going to be able to write reusable components? I won’t be able to just create a component and import it in anywhere I want. I’ll always have to import certain scripts seperately manually instead of them being registered as the component gets attached to the DOM.