add support for AMD (specifically require.js) loading about mixpanel-js HOT 25 CLOSED

Thanks so much for getting in touch with us! Can you tell me
a bit
more about how AMD will help you and your implementation? If this
is a global use case we'll definitely consider supporting AMD in
the next library release. Are you having issues integrating the
standard library with your require.js app?

Please let me know if you need anything else!

Thanks,

Drew Ritter

from mixpanel-js.

Since you do not provide mixpanel as a module, people are trying to do it themselves (see http://stackoverflow.com/questions/15076489/how-can-i-integrate-mixpanel-and-requirejs and http://stackoverflow.com/questions/17729068/mixpanel-2-2-within-an-amd-structured-web-app-e-g-require-js/17918097#17918097).

This can cause issues with the mixpanel library in regards to the actual reporting, whether done before the library is loaded and/or in delaying the actual loading of the page.

My specific use case is a Backbone.js application, in which I created my own method of tracking events which I spread around the code. That method will call the actual mixpanel library' "track" method. (I also wrapped other libaray methods (such as super property setters, and identify) with my own methods. This will allow me to upgrade your library in the future and/or add more tracking/conversion libraries in the future.

As I do not want to keep track of every release you make to the library in a custom implementation as in the above SO questions, right now my only option is to load mixpanel outside of the require.js scope (and into the global scope), and trusting the browser that the mixpanel method already exists (due to "done" callback capabilities).

from mixpanel-js.

Hi @dorongutman . Does this mean you have an active fork of mixpanel-js that supports AMD? If so, I'd be willing to review a pull request with an implementation similar to underscore's jashkenas/underscore@d12b5be

from mixpanel-js.

Hi @malectro - no, I don't have an active fork. I didn't want to have any thing custom that can break when you change stuff.

While I can add a quick underscore.js style amd support for the mixpanel.js file (see https://github.com/dorongutman/mixpanel-js/blob/amd/mixpanel.js), I'm not quite sure about your snippet code that users need to put in the section as explained in the top of this page: https://mixpanel.com/help/reference/javascript
This underscore.js style AMD will depend on this snippet, which I believe makes the changes to mixpanel.js alone - a bit useless.

What do you think ?

from mixpanel-js.

@dorongutman Ah yes, the snippet. I'm guessing this will require a lot more thinking on my part, but I agree that being AMD compatible would make a lot of sense for our library. This might mean adding a way to bypass the snippet altogether in our lib (and a few more unit tests). I'm going put some energy into this over the coming week.

from mixpanel-js.

Nice.

Some thoughts I had that might interest you regarding this change:

1. I saw you're copying some underscore.js's functionality. Since it supports AMD (since version 1.6.0, Feb, 2014) you could provide a smaller version of the library for those that already use underscore, specifically in an AMD environment.
2. Errorception is a service that provides a JS library that catches exceptions and shows them to you in their dashboard. The code they provide you is very small, and only meant to store the exceptions until it loads the actual JS library (the equivalent of your "snippet"). The reason I'm saying this, is that it's much smaller than the snippet you provide and I think that you can indeed provide a much much smaller snippet code, that just stores the calls to all your methods (init, track, identify, etc..) in an array, which is parsed later when the library actually finishes loading and initializing.
   While I know you're already doing this, you're also doing all sorts of other stuff, which makes the snippet quite large.

This is the minified code errorception provides:

        (function(_,e,rr,s){_errs=[s];var c=_.onerror;_.onerror=function(){var a=arguments;_errs.push(a);
            c&&c.apply(this,a)};var b=function(){var c=e.createElement(rr),b=e.getElementsByTagName(rr)[0];
            c.src="//beacon.errorception.com/"+s+".js";c.async=!0;b.parentNode.insertBefore(c,b)};
            _.addEventListener?_.addEventListener("load",b,!1):_.attachEvent("onload",b)})
            (window,document,"script","TOKEN");

from mixpanel-js.

+1

from mixpanel-js.

+1

from mixpanel-js.

+1 and while at it, why not putting a UMD wrapper on it to support CommonJS too (browserify)?

from mixpanel-js.

+1 for UMD please

from mixpanel-js.

+1

Any updates with this?

from mixpanel-js.

+1

from mixpanel-js.

+1 Any updates from mixpanel?

from mixpanel-js.

Unfortunately it's still a bit up in the air. We're going to have an internal conversation about getting useful module support into the lib while staying future-proof for ES6 modules and not breaking the existing async 'snippet' loader. Will post back when there's news; thanks for your patience.

from mixpanel-js.

+1

from mixpanel-js.

+1. The workarounds are handy until you need to use the requirejs optimizer, then it just falls apart.

from mixpanel-js.

Any updates on this a few months later?

from mixpanel-js.

planning on getting this in before the end of april. sorry this is taking a while. will post back here when there's news.

from mixpanel-js.

@tdumitrescu April has been and gone, any news here?

from mixpanel-js.

Sorry, got a little overambitious wrt scheduling and mixpanel product priorities. There's a prototype but it's not ready for release; unfortunately can't give an ETA at the moment, but please trust that this isn't forgotten.

from mixpanel-js.

+1 I am really looking forward to an CommonJS version on NPM!

from mixpanel-js.

We now have a PR open with the necessary basic changes: #37 so it won't be too much longer. Thanks again for your patience.

from mixpanel-js.

+1 - any progress on this?

from mixpanel-js.

+1

from mixpanel-js.

AMD/CJS/UMD/ES2015 module support is available as of v2.7.0 (https://github.com/mixpanel/mixpanel-js/releases/tag/v2.7.0). See https://github.com/mixpanel/mixpanel-js/tree/master/examples for some usage examples; documentation in README coming soon.

from mixpanel-js.