sheets icon indicating copy to clipboard operation
sheets copied to clipboard

Mention somewhere it's based on F/A?

Open stukennedy opened this issue 11 years ago • 1 comments

This looks VERY cool.

I got here via your slides ... but here on the README there's no indication at all that it has anything to do with Angular and Famous. May cause some confusion.

Do you have a simple example project on how to use it? I'll take a look at this tomorrow and see if I can figure out how to use it.

stukennedy avatar Nov 13 '14 00:11 stukennedy

Hey Stu—

The best example I know of of Sheets in action is the new Famo.us/Angular homepage. Most of the animations and all of the responsive polymorphism is handled with Sheets.

https://github.com/thomasstreet/famous-angular-docs/tree/development-2/app

All of that said, Sheets is intentionally built completely decoupled from Famo.us/Angular. (in fact, you can't even use it out of the box with Famo.us/Angular without the config that's described in the README.) Angular is currently a hard dependency for the niceties of e.g. DI and configuration via providers, but even that is a very light-weight dependency and could be dispensed with very easily.

The basic idea of this library, which could be useful in several other scenarios, is the ability to bind an arbitrary function (developer-defined; the 'payload') to a DOM element (chosen by selector) via a handler (also developer-defined; akin to a Directive.) The system is like very light-weight Angular Directives, but with a functional approach, and completely separated from the template. E.g. instead of saying <div id="my-div" ng-repeat="blah"></div> you could write a Sheets handler ngRepeat and apply it to your div with nicely separated concerns, like

  <div id="my-div"></div>
  '#my-div' : {
    ngRepeat: function() {
      //ngRepeat, the Handler Function, is defined elsewhere and is responsible for transclusion etc. based on the return value of this function.  The return value here is a replacement for an inlined attribute in a traditional Angular Directive 
      return blah;
      //note that this is a pretty complex example and it ignores what would need to be implemented in the ngRepeat Handler Function to make it work.  It also ignores what the expected return type here would be (probably some sort of iterator function.)  More basic use cases (and the ones for which ready-to-use Handler Functions are already defined, see README) are things like transform and opacity, for which return values are simple arrays/numbers)
    }
  }

I'm thinking this is going to be buffed up and will grow to become more central to the next iteration of Famo.us/Angular, but we'll see how she goes :)

zackbrown avatar Nov 25 '14 16:11 zackbrown