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.
bower install generic.js
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>###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.
GenericJS uses RequireJS pattern to define gens.
define(function () {
var MyGen = function () {
};
return MyGen;
});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;
});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;
});<div gen='mygen'></div>var obj = {};
gen.run('mygen', obj);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>Just run:
grunt build