Polymer and MeteorJS, the Holy Grail of Web Development

After some my past considerations on components and the Ry Walker presentation at Meteor Devshop I decided to try again the MeteorJS + Polymer combo

meteor-polymer-example.meteor.com / source (currently there are some issues with non-Chrome browsers)

Why Polymer and Meteor?

Bootstrap, Materialize and similar CSS frameworks are fine. But when you start to implement custom features it’s difficult to abstract reusable components.

On the Meteor side, Blaze is good to reduce the DOM changes but it is Meteor specific and sometimes you don’t want to hardcode some reactive data in your templates to build “your Meteor component” because an hypothetical color-picker widget should be indipendent by the fact you use Meteor or not.

Show me some code: How to use use a slider component with Meteor

We’ll use as example the <paper-slider> component, which emits a change event when it’s value changes via slider or associated input (see Polymer documentation).

To use it in Meteor, you just have to put the tag into the template and listen for component events you need.
You can also debug its behavior via inspector because some attributes are updated during its usage.

<template name="app">
...
    <paper-slider id="uno" pin editable value="{{counter}}"></paper-slider>
...
<template>

Here is a Meteor template

  // default value / reactive variable
  Session.setDefault("counter", 50);

  Template.app.events({
    // 'change' is the event emitted by the component
    'change #uno': function (e, template) {
      Session.set('counter', e.target.value);
    }
  });

Animations and Overlays

Polymer allow to use or build custom animation, and it just work. The unique thing you have to keep in mind is that it assumes the elements are present in the DOM. Unfortunatly it can’t be alwais true, some templates could be generated when there is a user interaction.

<template name="home">
  <paper-dialog backdrop layered="false" heading="About" transition="core-transition-right">
Pop up!
  </paper-dialog>
</template>

With a single tag <paper-dialog> you can select the transition animation that you prefere.
The attribute layered="false" is very important with Meteor because with the default value the overlay events aren’t accessible.

Template.sidebar.events({
  'click [data-action="open-dialog"]': function (){
      Blaze.render(Template.home, document.body);
  }
  });

Now the overlay Template.home is present in the DOM and you can activate it calling .toggle() on the element.

  Template.home.rendered = function (argument) {
    // After <paper-dialog> is created activate the animation
    $('paper-dialog')[0].toggle();
  }

In conclusion, Polymer and Meteor are two great complementary technologies, there are some overlaps but you can pick Polymer for indipendent components and Material Design and continue to use Meteor for data synchronization and reactivity.