Fractal - The Javascript Extention Repository System

Fractal is not just a Javascript library.

It is a code distribution system that promotes the extension of Javascript code and the open-source mentality.

Why Do I Need Fractal?

If you've used object oriented Javascript, you know prototypal inheritance gives the language many of the same benefits that traditional languages have.

Of course, Javascript is not Java or C. It was born on the front-end of the web and now enjoys the support of a large online open-source community. Some great distribution systems have been established, such as GitHub, but even the great should strive to be greater.

Currently these systems are great at distributing extensions, but only if you remember to include its dependencies in the repo. For instance, I guarantee there are thousands of copies of jQuery on GitHub, when there only really needs to be one for each version. This is where Fractal comes in.

Fractal's purpose is to greatly simplify package creation, distribution, and implementation.

With Fractal, a single JSON string is all you need to include an extension and all of its dependencies.

Want to see it in action. Visit the World's First Fractal Repo

Fractal on Github

How to use the library

Here is an example of loading scripts and detecting completion:

var fracLinks='[{"path":"jquery","exts":[{"path":"equalize"}]},{"path":"another_library"}]';
$F('traviswimer.com/fractal_repo').load(fracLinks);
head(function(){
	$(function(){
		console.log("Loading complete!");
	});
});

Here is how it works:

$F('fractal_repo') is called to set the repo. A Fractal repo can be set up on a remote server or you can simply create one using a local directory.

Then, you can call the load() method on the object. This method takes a JSON string as its only argument.

The JSON string consists of nested arrays of objects to form a hierarchy. Here is the JSON from the example above formatted for readability:

[
    {
        "path": "jquery",
        "exts": [
            {
                "path": "equalize"
            }
        ]
    },
    {
        "path": "another_library"
    }
]

As you can see, the top level array contains two objects. Each object has a path: property ("jquery" and "another_library"). this means that jquery.js and another_library.js will both be loaded from the root of the specified Fractal repo directory.

You may have also noticed that the first object also has an exts: property. This is where you specify the code that extends the current script and is what makes the actual Fractal concept work. The exts: property simply contains another object with the path: and exts: properties (exts: is optional). In other words, the example means that equalize.js extends jquery.js

In other words, the example means that equalize.js extends jquery.js. another_library.js does not have any extentions, therefore it does not include the exts: property.

How to setup a Fractal repository

Fractal repos can be located on a remote server, or be used locally for improved organization and consistency.

These repos are really nothing more than a directory hierarchy based upon the way Javascript files are extended.

That means that if jquery.js is extended by jq_ext.js, the file structure would look like this:

Since jq_ext.js extends jquery.js, it is placed in the jquery directory. Easy as that.

Help make Fractal the best it can be.

Tell the world your thoughts