Why another JavaScript library?

joi is not just another JavaScript library. It's a JavaScript framework for developing robust web applications which are quick to implement and easy to maintain. joi emphasizes structure, ease of use, readability, and flexibility.

joi is Fun

JavaScript is a really fun language to use, and we're just riding the wave. The example below shows some of the capabilities of joi's effects engine.

joi.get('demoA').fx.transition({ position: 'relative', left: 100, width: 200, fontSize: '160%', background: '#99f', border: '4px dashed #000' });

This is an element with id "demoA".

Works in pre-CSS3 browsers

For browsers which don't support CSS3 transitions, the transition effect is accomplished by joi's effects engine, which is able to apply effects to many styles based on size and color. When available, CSS3 transitions will be used instead for improved performance.

joi is Easy

joi provides a lot of common, prewritten functions, methods, and construtors so that you don't have to write as much code to get things done. In this area, joi feels a kindred spirit to Scala, a Java-derivative language.

One of our goals for the future of joi is to continue to provide more helper methods to fit a wide range of different situations, just to make your life easier. We strive to provide whatever methods we can, and let you find a use for the ones you want.

In this way, joi enables you to rapidly develop rich JavaScript applications, and you don't have to worry about the headache of incompatibility between browsers.

joi is JavaScript

One of the intentions in the design of joi was to build on the JavaScript language, not reinvent it. Some libraries try to turn JavaScript into something it's not, twisting it to behave like other languages such as Java or ruby. joi preserves the dynamic, prototype-based nature of JavaScript, while allowing for cleaner, more organized syntax for inheritance and delegation. The following code shows some of the features of joi's object inheritance model:

/* Define a new constructor which inherits from * Unit (the most basic joi constructor). */ var Pet = joi.Unit.sub(function() { function constructor(name) { this.base(); this.name = name; } constructor.prototype = { name: null, call: function() { alert('Here, ' + this.name); }, speak: function() { } }; return constructor; }()); // Define a Dog constructor which inherits from Pet. var Dog = Pet.sub(function() { function constructor(name) { this.base(name); } constructor.prototype = { speak: function() { var say = joi.Random.choose(['woof', 'bark']); alert(say + ' ' + say + '!'); } }; return constructor; }()); var dog = new Dog('Bandi'); dog.call(); // outputs: "Here, Bandi" dog.speak(); // outputs: "woof woof!" or "bark bark!"

joi is Organized

One advantage of joi is its high degree of organization. joi encourages good programming practices through its object model and syntax.

Each object has a well defined and distinct ancestry. For instance, a div will inherit from the following constructors:

   joi.Html.Elements.Div
   joi.Html.Elements.ContainerElement
   joi.Html.Elements.Element
   joi.Html.Elements.Node
   joi.Html.Elements.DomUnit
   joi.Html.Elements.Unit

This also means elements can easily be extended by adding more functionality to one of the constructors in its ancestry. Since these constructors are provided by joi, extending them doesn't carry the same drawbacks as extending the native JavaScript or DOM constructors.