There's nothing smaller than writing plain vanilla javascript, that would be my advice.
And add a couple of micro libraries for DOM manipulation and ajax if you need.
You want to observe your models, but data-binding might be heavy, magic comes at a cost. Why not just use a pub-sub library to communicate to the modules that a model data has changed? It is simple, small and safe.
I'm going to give you some examples with something that I know, the framework soma.js. It is very lightweight, doesn't have a router (I usually advice to use director.js). It provides dependency injection, an event-based observer system, as well as basic OOP such as inheritance. It is very much focused on avoiding highly-coupled code so modules are maintainable and reusable. Vanilla javascript is the key which is possible dependency injection.
Funny, someone thought I was coming from a .NET background with that framework, maybe it appeal to you.
For the ajax part, strip out jquery so there's only the ajax stuff (so it is small), or use something like reqwest.
Here is a quick overview of what you can do.
Inheritance
// create "super class"
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function() {
console.log("I'm a Person, my name is:", this.name);
}
// create "child class" that will inherit from its parent
var Man = function(name) {
Person.call(this, name); // call super constructor
}
Man.prototype.say = function() {
// Person.prototype.say.call(this); // call super say method
console.log("I'm a Man, my name is:", this.name);
}
// apply inheritance
soma.inherit(Person, Man.prototype);
// create Person
var person = new Person("Doe");
person.say();
// create Man
var john = new Man("John Doe");
john.say();
Try it out
Here is another example with some shortcuts.
// create "super class"
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function() {
console.log("I'm a Person, my name is:", this.name);
}
// create an "extend" shortcut
Person.extend = function (obj) {
return soma.inherit(Person, obj);
};
// create "child class" and apply inheritance using an "extend" shortcut
var Man = Person.extend({
constructor: function(name) {
Person.call(this, name); // call super constructor
},
say: function() {
// Person.prototype.say.call(this); // call super say method
console.log("I'm a Man, my name is:", this.name);
}
});
// create Person
var person = new Person("Doe");
person.say();
// create Man
var john = new Man("John Doe");
john.say();
Try it out
Modules
The frameworks makes you able to vanilla javascript so it is very reusable.
Here is what a Model, or Module, or anything else could look like (vanilla javascript):
(function(clock) {
'use strict';
var TimerModel = function() {
};
TimerModel.prototype.update = function() {
// update something
};
TimerModel.prototype.add = function(callback) {
// add something
};
TimerModel.prototype.remove = function(callback) {
// remove something
};
TimerModel.prototype.dispose = function() {
// destroy model
};
clock.TimerModel = TimerModel;
})(window.clock = window.clock || {});
Dependency injection
The framework provides dependency injection, which makes you able to use named variable to get your instances in other modules.
An injection rule could look like that:
injector.mapClass("myModel", Model);
To get your model somewhere else, just use the "named variables", the injector will take care of everything (also very good to solve nested dependencies):
var Module = function(myModel) {
// myModel has been injected
}
Try an example
More information
Communication (pub-sub, Observer Pattern)
A event-based tool (interchangeable with a DOM node for high decoupling) is available to communicate: the dispatcher. You also get it with injection:
var Module = function(myModel, dispatcher) {
// myModel and dispatcher have been injected
}
Dispatch an event:
this.dispatcher.dispatch('do-something');
Listen to an event:
dispatcher.addEventListener('do-something', function(event) {
// react to an event
});
Template
You can use a very powerful plugin as a template engine (real non-destructive DOM manipulation) called soma-template.
Or any other template engine of your choice.
Build an application
Here is an article that make you build an scalable and maintainable application:
http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/
That's not it, the framework also provide Mediators and Commands to make your code reusable. Check out the site, it has tons of demos.
I hope all this is helping you.
I'm used to write very bare bone application that run fast on mobile, so please ask me precise questions about what you need so I can maybe help.
Romu
