- Minimalistic 1kb library to prototype Single Page Applications as fast as lightning
- Demo and docs : https://alterebro.github.io/m.js/
m.js (m as in mini, micro, minimal...) is a 1Kb, zero dependencies, minimalistic library to create single page applications and simple web prototypes as fast as lightning.
The small m.js library has got three utilities : a request handler to create AJAX calls, a simple hash router and a micro template system. Its simplicity and small size makes m.js a perfect starting point to create a web prototype or SPA very quickly.
<a href="#/">home</a>
<a href="#/about">about</a>
<a href="#/user/michael">user:michael</a>
{
"home" : "this is home",
"about" : "about data",
"user" : "user string"
}
m.req('sample.json', function(data) {
var tpl = m.tpl('<%= val %>');
var router = m.run({
'/': function() {
console.log( tpl({val: data.home}) );
},
'/about': function() {
console.log( tpl({val: data.about}) );
},
'/user/:user': function(user) {
console.log( tpl({val: data.user + ', user: ' +user}) );
}
});
router.start();
});
Underscore-like micro template system http://underscorejs.org/#template
// Pre-rendering template
var tpl = m.tpl('<%= val %>');
console.log( tpl({val: 'test'}) );
// or passing directly the data:
var tpl = m.tpl('<%= val %>', {val: 'test'});
console.log( tpl );
Hash router using router rules like backbone http://backbonejs.org/#Router-routes
var router = m.run({
'/': function() {
console.log('index / home route');
},
'/users/:user': function(id) {
console.log('users route, user is ' + id)
},
'/file/*path': function(path) {
console.log('file route, file path is ' + path)
}
});
router.start()
m.req('data.json', function(data) {
console.log( data );
});
The main file ( m.js
) is located on /src
folder, once edited build the minified version and spread it with the gulp command
$ gulp
- The templating is inspired on the Underscore.js templates as well as the micro templating implementation by John Resig (http://ejohn.org/blog/javascript-micro-templating/).
- The router is heavily based in the previous work of @cheft done in minrouter.