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

Answer 1

Here's a presentation from the February 2014 Devshop about integrating Meteor with Famous. I haven't seen it in two months, but I do distinctly remember them mentioning that yes, you leverage the Collection.observe pattern.

In short, just like using React or Three.js, Famous is obtuse to the Blaze templating engine. It sidesteps it completely, and renders all elements as flat DOM. Read Mark's answer about this.

A package that leverages the require.js API was submitted to Atmosphere a few days ago. It's called Famono.

I've successfully used it to whip up a minimalistic proof of concept, with observe. You can find the source code on Github, and I also deployed it with meteor deploy.

The code itself is really simple. A collection:

// collections/clicks.js
Clicks = new Meteor.Collection('clicks');

A little fixture on the server to add an item:

// server/fixtures.js
if (Clicks.find().count() === 0) {
  Clicks.insert({ 'number': 0 });
}

And the index.js file:

// client/index.js
UI.body.rendered = function() {
  require("famous-polyfills"); // Add polyfills
  require("famous/core/famous"); // Add the default css file

  var Engine = require('famous/core/Engine');

  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');

  var mainContext = Engine.createContext();

  var containerModifier = new Modifier({
    origin: [0.5, 0.5]
  });

  mainContext = mainContext.add(containerModifier);

  var square = new Surface({
    size: [200, 200],
    properties: {
      lineHeight: '200px',
      textAlign: 'center',
      background: 'rgba(200, 200, 200, 0.5)'
    }
  });

  Clicks.find().observe({
    added: function(clickCounter) {
      // This is the way that you replace content in your surface.
      // Injecting handlebars templates here will probably do nothing.
      square.setContent(clickCounter.number);
    },

    changed: function(clickCounter) {
      square.setContent(clickCounter.number);
    }
  });

  square.on('click', function() {
    // Hardcoded to work with only the first item in the collection.
    // Like I said, minimal proof of concept.
    var clickCounter = Clicks.findOne();

    Clicks.update(clickCounter._id, { number: clickCounter.number + 1 });
  });

  mainContext.add(square);
};