My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Saturday, May 03, 2014

micro-env: a tweet sized enriched environment

Probably the most minimalistic KISS approach to JavaScript environment pollution, micro-env is a funny "do more, with less" experiment entirely based on well known and commonly used APIs where each of them will fit in a tweet or better 140 plain chars once minified ... and not even gzipped!

A Micro Sized Rapid Prototype Development

Everything grouped in main topics per each folder is either a:
  • Basic Polyfill, where some caveat a part, the expected/needed behavior has been implemented
  • Partial Shim, where most common cases, performance, and YAGNI approach won over size
  • Feature, where handy, desired, and not that obtrusive ideas get into the env
On top of this, compatibility with every modern and very old browser has been the key so that migrating eventually to more features rich, complete, less obtrusive and more standard libraries such eddy.js will be painless.
Does it work in your browser or env? Feel free to test ;-)

About Objects

The most basic version includes utilities for any object:
// after including micro-env base.js
var obj = {
  set: function (key, value) {
    this.emit(
      'propertychange',
      key,
      this[key],
      this[key] = value
    );
  }
};

obj.on(
  'propertychange',
  function (key, oldValue, nevalue) {
    // do something more useful
    console.log(arguments);
  }
);

// test it
obj.set('key', 123); // key, undefined, 123
obj.set('key', 456); // key,       123, 456
Handlers creation is performed lazily so no actual RAM, CPU or GC extra work is ever involved until needed. Moreover, being the logic that simple to fit in 140 chars, the direct property will help avoiding memory leaks confining handlers within a single object.

About DOM

The DOM version enriches in a similar way only HTML elements, based to addEventListener and others W3C standard behaviors:
window.on('load', function load() {
  this.off('load', load);
  document.emit('loaded');
});
on, off, and emit do exactly what anyone would expect them to do via DOM nodes ;-)

About OOP Features

The Function is normalized with a partial shim for bind plus it's enriched with two very simple/basic utilities:
// Function#bind
window.on('load', app.init.bind(app));


// Function#inherit
// as utility
function Rectangle() {}
function Square() {}
Square.inherit(Rectangle);

// as inline utility
var Square = function(){}.inherit(Rectangle);


// Function#setPrototype
// as utility
function Person(name) {
  this.name = name;
}
Person.setPrototype({
  age: 0,
  growUp: function () {
    this.age++;
  }
});

// as inline declaration
var Person = function(name) {
  this.name = name;
}.setPrototype({
  age: 0,
  growUp: function () {
    this.age++;
  }
});

About Array

not only indexOf, commonly used forEach, some, every, map, and filter are in place too, and more might come soon as long as it fits in about 140 chars.

All Together

Either for node or browsers, we can easily test these features without requiring massive changes or libraries via a copy and paste based on one of the lightest and also fastest env utility out there ... enjoy ^_^

No comments: