Meteor + polymer = a perfect synthesis

Meteor + PolymerA perfect synthesis

http://jonrimmer.github.io/are-we-componentized-yet/

Virtual RealityProgressive Web AppsMachine Learning

Using Polymer with MeteorYes, it’s a 101!

https://github.com/meteorwebcomponents/synthesis

● Square brackets ([[]]) create one-way bindings. Data

flow is downward, host-to-child, and the binding never

modifies the host property.

● Curly brackets ({{}}) create automatic bindings. Data flow

is one-way or two-way, depending whether the target

property is configured for two-way binding.

Databinding

Template repeater (dom-repeat)

Similar to Blaze {{#each}} with some extensions / limitations

● Binds only to arrays, no other data structures.● Exposes

○ item: The array item.○ index: The index of item in the array.

Conditional Templates

● Similar to Blaze {{#if}}● By default all stamped elements are hidden (but remain in

the DOM tree).● To disable this behavior, set the restamp property to true.

Handling events

● Bind on-tap events to functions using markup

● Or in your element definition using listeners

Adding a little bit of Meteor magic

Using reactive Data sources

● Provided by the mwcMixin● Uses Tracker to reactively rerun code when needed● getMeteorData capsules all your collections and exposes

them through the mwcData property

{{ }}Blaze is dead,long live Handlebars!

What about Meteor best practices?

● Encourages template level subscriptions● Good support for Flowrouter (through mwc:layout)● Encourages the Meteor 1.3 directory structure● Enables the definition of reusable components

Case Study: Bummerl Liste

Before:Meteor 1.0 + Blaze

+ Bootstrap + Materialize

After:Meteor 1.3 + Polymer

Folder Structure

Blazing Fast & Lightweight

https://github.com/faburem/bummerl-liste

Ready to get componentized?

Thanks for your attention!

faburem Fabian Kromer @faburem