gaffa

A powerful, fast, and relatively small application framework.

affa.js

A list of changes, and how to upgrade is available in the wiki

gaffa-template

git clone git@github.com:KoryNunn/gaffa-template.git

the template repo is a good starting point for an application.

Gaffa attempts to speed up the development of complicated UI's by providing a rich binding layer between arbitrary data and your UI.

Writing UI's using gaffa is unlike most other MVC/MVVM/etc frameworks for a number of different reasons. (Although, others share some of the below points)

  • ASAP databinding - model change events are instantaneous
  • Extremely powerful model bindings - use complex expressions to bind to data
  • UI by transform - Use transforms over data to affect how data is displated, rather than modifying the data to suite the UI.
  • NO HTML! - Javascript to DOM, no pointless middleman.
  • Serialise to JSON - An entire application can be serialised to JSON, by design.
  • No lock-in - Push your views to the edge of Gaffa's capabilities, and break out whenever you need.

Gaffa must be compiled with browserify browserify

 
var Gaffa = require('../'),
    Text = require('gaffa-text'),
    Textbox = require('gaffa-textbox'),
    gaffa = new Gaffa();
 
// Register used viewItems with gaffa 
gaffa.registerConstructor(Text);
gaffa.registerConstructor(Textbox);
 
// create a text view 
var text = new Text();
text.text.binding = '(join " " "Current value of [value]:" [value])';
 
// create a textbox view 
var textbox = new Textbox();
 
// Bind the textbox's value to model.value 
textbox.value.binding = '[value]';
 
// Tell the textbox to set it's value on keyup 
textbox.updateEventName = 'keyup';
 
// An example model 
gaffa.model.set({
    value:'things'
})
 
// Add the view on load. 
window.onload = function(){
    gaffa.views.add([
        text,
        textbox
    ]);
};
 
// Globalise gaffa for easy debugging. 
window.gaffa = gaffa;