Fetching latest commit…
GenericJS 
GenericJS is a universal front end framework inspired by AngularJS. The idea, however, has been simplified to absolute minimum, which has resulted in incredible extensibility and power, while limiting the framework's code complexity and size.
Thanks to GenericJS it is possible to provide Angular's functionality (or any other) with just a few simple extensions (gens)!
Development has never been easier and more productive.
Installation
bower install generic.js
The idea
The idea behind GenericJS is very simple - it lets you run a gen (plain JavaScript function) on any object (DOMElement, or another JS object). That's it. Very simple, but just see how powerful it can be!
gens/mygen.js
define(function () {
return function () {
this.innerHTML = 'GenericJS!';
};
});index.html
<div gen='mygen'></div>Renders
<div gen='mygen'>GenericJS!</div>Examples
Implemending Angular's ng-click
In this example, we'll see how easy it is to implement Angular's ng-click directive using GenericJS. We'll define an 'actions' gen that will define the directive and a 'controller' gen that will handle that action.
gens/actions.js
define('gens/std/actions', [], function () {
return function () {
// Add a global gen.
gen.addGlobal(function initActions(callback) {
var i, item, match, action;
// Loop through the element's attributes.
for (i = 0; i < this.attributes.length; ++i) {
item = this.attributes.item(i);
// Search for an attribute matching the gen-action pattern.
match = item.nodeName.match(/^gen-action-([a-zA-Z0-9_]*)$/);
if (match) {
action = match[1];
if (action === 'click') {
// If the action is 'click', add the click listener.
this.onclick = function (event) {
event.preventDefault();
// Call the listener function on the current object.
this[item.nodeValue](event);
}.bind(this);
}
}
}
callback();
});
};
});
gens/controller.js
define(function () {
return function () {
this.onClick = function (event) {
alert('I was clicked!');
};
};
});index.html
<html gen='actions'>
<head>
<script src="build/generic.js"></script>
</head>
<body>
<div gen='controller' gen-action-click='onClick'></div>
</body>
</html>Result
Using this simple piece of code we've defined a global, Angular-like click directive for our application. Not using Angular at all, just using the GenericJS foundation.
Defining a gen
GenericJS uses RequireJS pattern to define gens.
define(function () {
var MyGen = function () {
};
return MyGen;
});Global gens
Global gens are executed each time another gen is. They allow defining global functionality for other gens.
define(function () {
var MyGen = function () {
gen.addGlobal(function (callback) {
// Global gen
callback();
});
};
return MyGen;
});Creating gen libraries
With GenericJS, it is very easy to define libraries. Simply, return an array of gens! GenericJS includes an "std" library by default.
gens/mylib.js
define('gens/mylib', [
'gens/mylib/gen1.js',
'gens/mylib/gen2.js',
'gens/mylib/gen3.js'
]function () {
return arguments;
});Running a gen
On an HTML element
<div gen='mygen'></div>On an JS object
var obj = {};
gen.run('mygen', obj);Using the std library
As part of the GenericJS project, the std library is being developed. The std library is a collection of global, commonly used gens. You can include it in your project as follows:
<html gen='std'>You can also use its gens selectively, e.g.
<html gen='std/actions, std/mvc'>std/mvc
The std/mvc gen provides simple MVC mechanisms to your application. Views support plain HTML as well as Handlebars templates. Models are plain gens (JavaScript functions).
views
views/user.hbs
<p>User: {{name}}</p>gens/user.js
An empty gen.
index.html
<html gen='std/mvc'>
<head>
<script src="build/generic.js"></script>
</head>
<body>
<div gen='user' gen-view='views/user.hbs' gen-data-name='John'></div>
</body>
</html>Render:
<html gen='std/mvc'>
<head>
<script src="build/generic.js"></script>
</head>
<body>
<div gen='user' gen-view='views/user.hbs' gen-data-name='John'>
<p>User: John</p>
</div>
</body>
</html>Building GenericJS
Just run:
grunt build