Ever since MDG decided that Blaze is not gonna be part of the greater vision of Meteor, developers look for alternative frontend frameworks. While React and Angular are gaining enormous momentum these days, there is also Polymer which follows a very different approach: use the platform (the browser) instead of adding an additional layer of complexity. This slide deck provides a high level introduction to Polymer and why it is such a good alternative frontend technology for Meteor.

1. Meteor + Polymer
A perfect synthesis

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

4. Virtual Reality
Progressive Web Apps
Machine Learning

8. Using Polymer with Meteor
Yes, it’s a 101!

9. https://github.com/meteorwebcomponents/synthesis

10. ● 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

11. 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.

12. 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.

13. Handling events
● Bind on-tap events to functions using markup
● Or in your element definition using listeners

14. Adding a little bit of Meteor magic

15. 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

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

18. 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

19. Case Study: Bummerl Liste
Before:
Meteor 1.0 + Blaze
+ Bootstrap + Materialize
After:
Meteor 1.3 + Polymer

20. Folder Structure

21. Blazing Fast & Lightweight

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

23. Ready to get componentized?
Thanks for your attention!
faburem Fabian Kromer @faburem