fabien-d / sandboxed-js Goto Github PK

This is just a draft of an idea, curious what people think about it

Most people have seen or should see Nicholas Zakas' talk on building "Scalable JavaScript Application Architecture" (slides, video).

The sandbox concept (interface for each module to promote loose coupling) was something new for me and has changed the way I code. It has helped me organize my code for my own projects and thought maybe it could benefit all developers.

What I was thinking

Too often I've had to write custom modules or alter existing modules to remove jQuery references because I wasn't using the framework in my project. This got me thinking, how great would it be if modules extracted references to third party libraries and hid them behind a sandbox. They could then be altered without touching the core code. This would allow a module to be based on any framework without writing module.jquery.js, module.mootools.js, module.native.js and so on.

Pros

• No forced dependencies
• Promotes loose coupling
• DRY code
• Could build a library of reusable modules that can simply be dropped in any project

Cons

• New standard to follow and any minor differences could result in malfunctioning modules
• Learning curve for non-developers, could be harder to setup plugins since they would require a sandbox

There are way more pros/cons, this is just a draft.

Concept

Here's a very basic example showing ONLY the concept:

Common code in modules

// jQuery is a must for it to work
var el = $( '#element' );
el.addClass( 'super-awesome-class' );

Following proposed specs

var el = sandbox.dom.find( '#element' );
sandbox.dom.addClass( el, 'super-awesome-class' );

Sandbox A - Native

sandbox.dom.find = function ( selector ) {
    return document.querySelector( selector );
};

sandbox.dom.addClass = function ( el, str ) {
    el.classList.add( str );
};

Sandbox B - jQuery

// would include a jQuery adapter
sandbox.dom.find = function ( selector ) {
    return $( selector );
};

sandbox.dom.addClass = function ( el, str ) {
    el.addClass( str );
};

This would allow developers to create their own sandbox(es) and use any modules that were developed following the specs without tweaking any code.

Specs

Specs would have to be written and an API would have to be defined. This would include common functionality that would best be separated from the core code of modules (essentially everything that is handled via third party library/framework). A few examples could include:

DOM manipulation

• dom.find
• dom.findAll
• dom.addClass
• dom.removeClass
• dom.toggleClass

Events

• event.bind or events.on
• event.unbind or events.off