markmarijnissen

// In your parent
import placeholderfunction from "./placeholderfunction";

class Parent extends Component {
    // A placeholder function is a function that is not yet implemented
    save = placeholderfunction();

    render() {
        <button onClick={this.save}>Save</button>
        <Child save={this.save} />

markmarijnissen

Problem:

• There's a module that knows how to load (and re-load) data through an API, and stores it locally.
• Multiple modules access the loaded data, and transform them into a different representation (each module does a different transform), also storing them locally
• The transformed data is exposed to the view, with a 'loading' indication when the original data is (re)loaded and/or the transformation is in progress.

##API idea

Promises support:

• on resolution callbacks, where the transform function can be attached.
• a isResolved attribute, which is false when the promise has been started but not yet resolved.

markmarijnissen

/**
 * Copy-paste this in your console to test if function works as expected
 **/
function toNodejsFn(cordovaFn,self){
    return function(){
      var args = Array.prototype.slice.call(arguments,0);
      var callback = args.splice(args.length-1,1)[0]; 
      args.push(function onSuccess(){
        var args = Array.prototype.slice.call(arguments, 0);
        args.unshift(null);

markmarijnissen

Config requirements

• Require jade, coffee,less
• cordova.js should be loaded externally
• Copy file assets (png,jpg,ttf,etc) rather than hashing them.
• Multiple, independant bundles: /src/[name]/main.js --> /dist/[name]/bundle.js

##Enhancements:

Copy static assets

markmarijnissen

// TapEvent
// 
// Adds a "tap" event to all surfaces. 
//
// Usage: 
//
// require("TapEvent")         // require TapEvent ONCE BEFORE calling surface.on!
// surface.on("tap", ... )
//
// When is the "tap" event fired?

markmarijnissen

# set famous version here
VERSION=0.2

# 
echo "// Famo.us in one file. Including CSS. Version $VERSION."  > famousBox.js

# load all libraries
curl -s http://code.famo.us/lib/functionPrototypeBind.js       >> famousBox.js
curl -s http://code.famo.us/lib/classList.js                   >> famousBox.js
curl -s http://code.famo.us/lib/requestAnimationFrame.js       >> famousBox.js

markmarijnissen

define(function(require,module,exports){
    var Scrollview = require('famous/views/Scrollview');
    var ViewSequence = require('famous/core/ViewSequence');
    var VELOCITY = 0; // default: No animation (i.e. the item isn't given any "swipe"-velocity when moved)
    
    /***********************************
     *   getIndex
     ************************************/
    Scrollview.prototype.getIndex = function () {
      return this._node.getIndex();

markmarijnissen

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

function ShowModifier(options) {
  this.visible = !!options.visible;
  this._output = {
    transform: Transform.identity,
    opacity: 1,
    origin: null,
    align: null,
    size: null,

markmarijnissen

var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');

__original_modify = Modifier.prototype.modify;

Modifier.prototype.modify = function extended_modify(target) {
  __original_modify.call(this,target);
  
  // here is the hack: set target to NULL if it should not be visible!
  if(this._visibleGetter) this.visible = this._visibleGetter();

markmarijnissen

Given the following goals:

1. Famo.us should be framework agnostic and integrate with Firebase, AngularJS, Meteor and more.
2. Famo.us is a rendering engine, so it should be easy to share and reuse custom rendering nodes in different context (app, web, with different frameworks).
3. Famo.us components should be loosely coupled and have no external dependencies. Ideally, it can be contained in a single file.
4. Code should scale well to big projects, for example by structering the app into small, testable self-containted modules.
5. Apps should be easy to reskin, remix and reconfigure.

....and given the existing design decisions: