Using (NEW) Famo.us Engine with RequireJS and EJS Templates

Question

Before Famo.us completely changed their architecture I was developing some Apps using Famo.us, RequireJS, EJS Templates, Node and some other stuff.

But now when I come to replace the old Famo.us architecture with the new Famo.us 'Engine' I am getting errors - which tells me the architecture is wrong for the new approach - so wondered if you guys can help me.

Background

Server is Node.js, Express 4 and some other stuff
Client will be Famo.us, EJS Templates and some other stuff

The current approach is that the '/' Router calls an 'ejs' template.

index.ejs:

  <!DOCTYPE HTML>
    <html>
      <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="/css/famous.css" />
        <link rel="stylesheet" type="text/css" href="/css/style.css" />
      </head>
      <body>
        <script data-main="/js/webmain.js" src="/js/vendor/requirejs/require.js"></script>
      </body>
    </html>

This worked fine with old Famo.us architecture...and would call the webmain.js script using RequireJS.

webmain.js:

/* globals require */
require.config({
  baseUrl: "js",
  nodeRequire: require,
  paths: {
    "famous": "vendor/famous",
    "famous-flex": "vendor/famous-flex/src",
    json2: "vendor/json2",
    "requirejs": "vendor/requirejs/require",
    "socketcluster": "vendor/socketcluster",
    "ua-parser" : "vendor/ua-parser.min",
    "uuid": "vendor/uuid"
  }
});
require(["platform"]);

The 'platform.js' script would contain the following:

define('platform', function(require, exports, module) {
  'use strict';
  var Engine = require("famous/core/Engine");
  var contentContext = Engine.createContext();
  var Widget = require('app/widgets/DefaultWidget');
  var mainView = new Widget();
  var contextSize = [undefined, undefined];

  contentContext.setPerspective(1);

  Engine.nextTick(function() {
    contextSize = contentContext.getSize();
    mainView.setOptions({size: [contextSize[0], contextSize[1]]});
    contentContext.add(mainView);
  });
  contentContext.on('resize', function(e) {
    contextSize = contentContext.getSize();
    if (mainView) mainView.setOptions({size: [contextSize[0]*1, contextSize[1]*1]});
  }.bind(this));


});

But the new version of Famo.us will not work using this approach and I wanted to ask your thoughts as to why, or if there was another way they have not mentioned?

I have updated the Famou.us source code in 'vendor/famous' to use the 'Famo.us Engine' code from github. If I replace the old Famo.us code in the 'platform.js' script with new Famo.us code - like this:

define('platform', function(require, exports, module) {
  'use strict';

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');

FamousEngine.init();
var scene = FamousEngine.createScene();

var node = scene.addChild();
var domEl = new DOMElement(node, {
    content: 'Hello World',
    properties: {
        fontFamily: 'Arial'
    }
});

});

I get the following errors:

Uncaught Error: Module name "Clock" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught Error: Module name "../utilities/CallbackStore" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught TypeError: Cannot read property 'init' of undefined platform.js:28

I guess I am trying to understand, when the RequireJS skeleton is pretty much the same, why it doesn't work? Why Famo.us is undefined, and why the new Famo.us architecture can break so much - and what the 'new' way of integrating famo.us would be?

I have asked questions on their 'slack' IRC but it doesn't seem to be a way to get answers and a really poor 'help'.

Any help would be greatly appreciated as I am really stuck from moving forward at the moment.

Thanks again.

Answer 1

Famo.us version 0.3.5 and earlier used RequireJS using AMD .

The new version 0.5.0+ uses the node.js flavor of CommonJS and uses Browserify to build a bundle of your javascript application for the browser.

The following from an Answer in this question sums it up. More about their similarities and differences in the answers.

RequireJS implements the AMD API (source) .

CommonJS is a way of defining modules with the help of an exports object, that defines the module contents.

Using (NEW) Famo.us Engine with RequireJS and EJS Templates

Question

1 answers

solution1
0 ACCPTED 2015-07-27 19:41:48

Using (NEW) Famo.us Engine with RequireJS and EJS Templates

Question

1 answers

solution1 0 ACCPTED 2015-07-27 19:41:48

solution1
0 ACCPTED 2015-07-27 19:41:48