Download - 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