Question

I’m about to port a series of my jQuery projects over to Vanilla Javascript (pure javascript, no framework) and would like to know if there are any existing [framework adapters / framework agnostic adapters] out there?

For instance I’m envisioning something like this:

// My Project
(function(){
    // Fetch all the elements using Sizzle Selector System
    var $els = Agnostic.find('.penguins');
    $els.hide();

    // Perform a Ajax Request
    Agnostic.ajax({
        dataType: 'json',
        sucess: function(){

        },
        error: function(){

        }
    });
});

/**
 * Our Agnostic Framework
 * Provides a framework agnostic interface for jQuery and MooTools
 */
var Agnostic = {
    framework: null,
    Framework: null,

    /**
     * Initialise our Agnostic Framework
     */
    init: function(){
        switch ( true ) {
            case Boolean(jQuery||false):
                Agnostic.Framework = jQuery;
                Agnostic.framework = 'jQuery';
                break;

            case Boolean(MooTools||false):
                // Check for Sizzle
                if ( typeof Sizzle === 'undefined' ) {
                    throw new Error('MooTools interface requires the Sizzle Selector Engine.');
                }
                Agnostic.Framework = MooTools;
                Agnostic.framework = 'MooTools';
                break;

            default:
                throw new Error('Could not detect a framework.');
                break;
        }
    }

    /**
     * Our Element Object
     * Used to Wrap the Framework's Object to provide an Agnostic API
     */
    Element: {
        /**
         * Create the Element Wrapper
         */
        create: function(Object){
            var El = new Agnostic.Element;
            El.Object = Object;
        },

        /**
         * Hide the Element
         */
        hide: function(){
            switch ( Agnostic.framework ) {
                case 'jQuery':
                    this.Object.hide();
                    break;

                case 'MooTools':
                    this.Object.setStyle('display','none'); 
                    break;
            }
        },

        /**
         * Show the Element
         */
        show: function(){
            switch ( Agnostic.framework ) {
                case 'jQuery':
                    this.Object.show();
                    break;

                case 'MooTools':
                    this.Object.setStyle('display',''); 
                    break;
            }
        }
    },

    /**
     * Fetch elements from the DOM using the Sizzle Selector Engine
     */
    find: function(selector){
        var Element = null;

        // Fetch
        switch ( Agnostic.framework ) {
            case 'jQuery':
                Element = jQuery(selector);
                break;

            case 'MooTools':
                Element = new Elements(new Sizzle(selector)); 
                break;
        }

        // Wrap
        Element = Agnostic.Element.create(Element);

        // Return Element
        return Element;
    },

    /**
     * Perform an Ajax Request
     * We use the jQuery.ajax interface here
     * But they are more or less the same
     */
    ajax: function(request){
        // Send Request
        switch ( Agnostic.framework ) {
            case 'jQuery':
                jQuery.ajax(request);
                break;

            case 'MooTools':
                (new Request(request)).send();
                break;
        }

        // Wrap
        Element = Agnostic.Element.create(Element);

        // Return Element
        return Element;
    }
};

Answer 1

I haven’t seen a pre-packaged “Framework bridge”. There is a good talk about abstracting away the framework from your application by Nicholas C. Zakas. It’s really good and in depth regarding the importance about separating your framework from your application.

http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture