Integrating the DOM-library (jquery, zepto, etc) about aura HOT 14 CLOSED

@dustinboston I would love for us to address this soon. What are your thoughts on the idea?

from aura.

@rudolfrck @addyosmani That makes sense and it's a simple enough change. I wonder if it would be better to remove the jquery dependency from aura/facade and aura/permissions and just directly include the path to jquery in aura/mediator. Others could swap it out even easier that way. It's a little more work but probably worth it.

All other widgets, and even the ext/* files should be getting their reference to jquery/zepto/whatever from the mediator anyway. The only thing it really breaks is the jquery_ui dependency in ext.

from aura.

I wonder if it would be better to remove the jquery dependency from aura/facade and aura/permissions and just directly include the path to jquery in aura/mediator. Others could swap it out even easier that way. It's a little more work but probably worth it.

I was thinking about that during the last set of updates. If we could avoid having any jQuery dependency at all in Aura itself, it's more than okay for the examples to pass it (or Zepto etc) on as needed.

from aura.

Perfect

from aura.

I've attempted to address this above, but ran into some interesting quirks, some of which I'm not entirely happy are handled as best as they could be. @rudolfrck If you could review, that would be appreciated.

• Generally when using jQuery with AMD, we have the benefit of having define.amd.jQuery handled for us by the library. In order to get everything working smoothly end to end using 'dom' using of just 'jquery', I had to patch the jQuery source to expose 'dom' instead. This could have been handled elsewhere and I feel that needing to patch a library to get this in place is not the right way to go about it. Suggestions? If you're doing something differently, could you try applying that to the Aura setup and see if that works?
• Aura uses jQuery Deferreds and as such, I had to use both Zepto and the Deferred.js library (which works with Zepto) to get this working. Its mostly okay but there are a number of quirks with getting Zepto working with jQuery UI (something which one of our demo widgets required).

So, this ticket is effectively done, but I'd like us to see if we can figure out where better to place this line (currently the patch in jQuery):

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "dom", [], function () { return jQuery; } );
}

Also note that as Zepto require you to take care of your own AMD support, I had to patch that using:

if (typeof define === 'function' && define.amd) {
    define( "dom", [], function () { return Zepto; } );
}

We'll probably leave the minor changes needed for Zepto support commented out for the time-being, but it would be nice to figure out a more smooth way of interchanging them in the future.

from aura.

I've come across the same issue, and I agree it's absolutely not a beautiful solution.
I really like the way lodash handles this, by defining itself as anonymous, so it can be referenced to by its path:
https://github.com/bestiejs/lodash/blob/master/lodash.js#L3638

But I guess jQuery won't come bundled like this any time soon.

from aura.

@rudolfrck Yeah. It's a bit tricky. I wonder if we need to somehow allow people to easily switch between these libraries using a config of some sort without requiring them to change any of the lines currently commented. Would you be interested in taking a look at this? We absolutely don't have to make the Zepto support be jQueryUI compatible and the code in there at the moment should work, but I'm just thinking of how else this can be solved better.

from aura.

I managed to get this working in a separate project now without using patches in jQuery and Zepto.

My shim/path config looks like this:

require.config({
    shim: {
        '_dom': {
            exports: '$'
        },
        'backbone': {
            deps: ['underscore', '_dom'],
            exports: 'Backbone'
        }
    },

    paths: {
        '_dom': 'vendor/jquery',
        'underscore': 'vendor/lodash',
        'backbone': 'vendor/backbone'
    }
})

Then in my modules folder (I guess lib would be the best for place for this in aura) I have a file called dom.js which contains the following:

define(['_dom'], function ($) {
    return $;
});

So when I use the dom-library I just do:

require(['modules/dom'], function ($) {
});

I'll see if I can come up with a pull request if the time doesn't run away from me (like it's been doing lately...).

Not sure if this is the solution you want, as you'll still have issues if jQuery UI is required.

from aura.

Sweet!

I'm honestly okay without the jQuery UI support and I don't mind rewriting the existing calendar widget to not rely on it. I'd much rather have hot-swap between jQuery and Zepto in place. If you're able to get a PR together that would be much appreciated. I'd be happy to land it :)

from aura.

@rudolfrck @addyosmani Those changes look good. And to second @addyosmani I don't think jQuery UI is a hard requirement, it's just needed for demo... maybe it's time to set up core and demo folders now?

from aura.

What I've done in master at the moment is split up everything into: aura,
aura backbone extension and the demo. I see aura being the core.
On 10 Jul 2012 21:43, "Dustin Boston" <
[email protected]>
wrote:

@rudolfrck @addyosmani Those changes look good. And to second @addyosmani
I don't think jQuery UI is a hard requirement, it's just needed for demo...
maybe it's time to set up core and demo folders now?

---

Reply to this email directly or view it on GitHub:
https://github.com/addyosmani/backbone-aura/issues/18#issuecomment-6888371

from aura.

@addyosmani Oh shit. I've been out of it for so long I hadn't even noticed! Better get my ass back in gear! :-D

from aura.

Actually, I landed on a bit different solution:

Config:

require.config({
    paths: {
        'zepto': 'vendor/zepto',
        'jquery': 'vendor/jquery',
        'underscore': 'vendor/lodash',
        'backbone': 'vendor/backbone'
    },

    shim: {
        'dom': {
            exports: '$',
            deps: ['zepto'] // here you define what dom-lib to use
        },
        'backbone': {
            exports: 'Backbone',
            deps: ['underscore', 'dom']
        }
    }
})

The only downside to this approach, is that you need a dom.js file with no content so require.js can find it.
If it's not present, it will complain about it.

from aura.

This was closed in #45.

from aura.