2

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;
    }
};
7
  • I don't get it, you want a framework which looks like jQuery, smells like jQuery, even tastes like jQuery... Why not just use jQuery... Commented Sep 23, 2010 at 0:02
  • 1
    @Andrew - Because he doesn't want to be Framework dependent. Commented Sep 23, 2010 at 0:05
  • @Andrew - Chase is spot on. I will be porting my existing jQuery plugins to vanilla javascript so 90% of the code will not use any framework, for things where not using a framework is unfeasible such as selectors and DOM manipulation (as doing them in vanilla js is excruciating) that small amount of code should use an agnostic framework adapter. The choice of having the interface mostly jQuery is due to jQuery's large market share, and thus is a good adoption decision. In regards to just porting my plugins into jQuery AND MooTools versions - it's far from ideal having to maintain two codebases Commented Sep 23, 2010 at 0:11
  • 3
    so you want a framework which allows your code to be framework agnostic? Commented Sep 23, 2010 at 7:28
  • @Anurag heh, well said +1. some people still think Esperanto was a good idea... BTW, why do you throw an error and require mootools to have sizzle? you should look at slick which is coming out with 1.3, it will be far more compatible with results sizzle renders. in fact, more compliant. period. Commented Sep 23, 2010 at 8:43

2 Answers 2

3

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

Sign up to request clarification or add additional context in comments.

2 Comments

+1 Fascinating talk and well worth a listen for any advanced JavaScript programmer! Thanks for the link! Although it is only loosely related to this question so unfortunately I can't accept it as an answer. Again thanks for the link, will definitely improve my code in the future.
Watching the end of the talk does cover this question by providing an alternative answer. I'll wait about a week to see what else people come up with, but this is good candidate as an acceptable answer. Thanks.
0

I believe that you might find the new (alpha release) of FuseJS to be exactly the sort of thing you are looking for.

Quoting from the very first line of the readme:

JavaScript frameworks share similar features and functionality, such as DOM manipulation, event registration, and CSS selector engines. FuseJS attempts to incorporate the strengths of these frameworks into one stable, efficient, and optimized core JavaScript framework.

It's also nifty because of its sandboxed natives feature. (Which is a standalone library too!) I haven't had a chance to play around with them yet (i.e. benchmark and browser test) but the concept is very nifty. (Basically, it uses an assortment of tricks to provide a way to extend Array, Object, etc. without extending the global versions of these objects. Intrigued yet?)

4 Comments

I failed to see how FuseJS relates to a bridge/adapter concept, to me it just seems like another framework just like jQuery or MooTools. The question is about making your plugin work with jQuery and MooTools with the least amount of code possible by using a bridge.
@balupton -- Apologies; from your question and comments it looked like what you were looking for was something that would let you use the selector engine from jQuery, Mootools classes, the Dojo.include and Dojo.require system, and the Array extensions from Prototype all in one package. FuseJS is the only thing out there that I know of that is trying to do anything even remotely like that. (Unless of course you count the moo4q system -- but that's not what you're looking for either, since it's designed to let you use both [rather than either] libraries for their strengths.)
Having watched the Zakas lecture that @Chase suggested (great lecture by the by, +1) -- a generally extensible, application agnostic framework that allows you to implement a system that looks like the Application Core section of Zakas' demonstration application does not exist in the wild (at least, as far as I know.) Perhaps that's a void that needs to be filled?
yeah mate no worries. I've +1 your comments :). It does seem like there is a void for it doesn't it? But I guess the ultimate aim he was getting at is the bridges should be custom for each application such that you can have the least code possible. But then again you could do the exact same thing with a common bridge then just select which functions you want to include in your custom build - solving that problem. Very interesting stuff.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.