How do Meteor's blaze and Famo.us play together?

Question

2 Technologies:

• Meteor with the blaze templating engine
• Famo.us with their awesome gui framework

I come from the meteor side, I personally like using {{mustache}} (handlebars) to drive the gui from data, the reactive session / database makes this really efficient and intuitive.

Now came famo.us and all its advantages, but the drawback of a code based gui is that there is no place for handlebars anymore…

• What is the current practice for mixing both technologies together ?
• Are they completely dissociative ?
• Is using the "observe" / "Deps.autorun" mechanism a common practice everywhere a famo.us element to be updated by a meteor reactive item ?

Answer 1

I just released a preview of famous-components, which is an attempt at a tight integration between Blaze and Famous. All the other approaches I've seen so far side step most of Blaze, and require writing large amounts of code in JavaScript, which felt very unnatural to me in Meteor. Meteor code should be small, concise and easy with powerful results. Here are a few examples of what it looks like: (each template forms a renderNode, any HTML gets put on a Surface. Modifiers/views/options are specified as a component attributes)

<template name="test">
  {{#Surface size=reactiveSizeHelper}}
    <p>hello there</p>
  {{/Surface}}

  {{#if loggedIn}}
    {{>SequentialLayout template='userBar' direction="X"}}
  {{else}}
    {{>Surface template='pleaseLogIn' origin="[0.5,0.5]"}}
  {{/if}}
</template>

Scrollview (can be split into sub templates):

<template name="famousInit">
  {{#Scrollview size="[undefined,undefined]"}}
    {{#famousEach items}}
      {{#Surface size="[undefined,100]"}}{{name}}{{/Surface}}
    {{/famousEach}}
  {{/Scrollview}}
</template>

Template.famousInit.items = function() { return Items.find() };

Events:

Template.blockSpring.events({
  'click': function(event, tpl) {
    var fview = FView.fromTemplate(tpl);
    fview.modifier.setTransform(
      Transform.translate(Math.random()*500,Math.random()*300),
      springTransition
    );
  }
});

It also works out the box with iron-router. More details, docs, live demos, all at http://famous-views.meteor.com/