HubSpot / messenger

Growl-style alerts and messages for your app. #hubspot-open-source
http://github.hubspot.com/messenger/
MIT License
4.03k stars 408 forks source link

RemovejQuery dependency for IE10+? #96

Open azaslavsky opened 8 years ago

azaslavsky commented 8 years ago

Just testing the waters to see if there is interest/whether the maintainers think this is feasible..

This is, in my opinion, by far the best tool for doing what it does, both in terms of API and user experience. But a lot of modern projects forgo jQuery completely (ex: I am working on separate Angular and React projects at the moment, neither of which use it). Obviously, it provides massive benefits for abstracting away the API differences and weird behavior in older browsers (IE7, 8, 9), but that's not really a major problem in modern(-ish) environments (IE10+, Chrome, FF, Safari). For those, the benefit of jQuery is greatly diminished, especially relative to its size.

I took a quick look at the source, and it seems only the following jQuery methods are used, almost all of which can be very easily replaced with native JS and DOM calls (see: your very own http://youmightnotneedjquery.com/). A list:

$.extend() // http://youmightnotneedjquery.com/#extend
$.on() & $.off() // http://stackoverflow.com/a/25248515/2230156
$.remove() & $.detach() // http://youmightnotneedjquery.com/#remove
$.addClass & $.removeClass // http://youmightnotneedjquery.com/#add_class
$.scrollTo() // can be replaced with CSS3 transitions and DOM style modification
$.html() // http://youmightnotneedjquery.com/#set_html
$.append() & .prepend() // http://youmightnotneedjquery.com/#append
$.attr() & .data() // http://youmightnotneedjquery.com/#set_attributes
$.find() // http://youmightnotneedjquery.com/#find_children
$.text() // http://youmightnotneedjquery.com/#set_text
$.css // can be solved by directly querying the DOM "style" object
$.ajax // See below

element creation // ex: $ '<span class="messenger-phrase">'
event triggering // ex: $cancel.click => do @cancel

The only thing on that list that would pose significant trouble to replace is $.ajax(), which can be handled the same way Backbone does it: consumers of the API can set Messenger.ajax = whatever; before making Messenger calls, which will be set to $.ajax by default if they have jQuery set, or will require user override if not (perhaps using a library like reqwest or similar).

Is there interest in doing something like this? I would be happy to give it a spin and try to implement the above proposal, preparing replacements for the listed methods if jQuery is not loaded, and throwing errors if users try and use <IE10 without jQuery loaded.

zackbloom commented 8 years ago

We (the authors of Messenger) happen to also be the creators of http://YouMightNotNeedJQuery.com. So the short answer is, yes, we would be tremendously enthused if you were able to remove the jQuery dependency. Thank you for the through analysis, if you make a pull request we will absolutely review and merge it.

On Sep 11, 2015, at 8:36 PM, Alex Zaslavsky notifications@github.com wrote:

Just testing the waters to see if there is interest/whether the maintainers think this is feasible..

This is, in my opinion, by far the best tool for doing what it does, both in terms of API and user experience. But a lot of modern projects forgo jQuery completely (ex: I am working on separate Angular and React projects at the moment, neither of which use it). Obviously, it provides massive benefits for abstracting away the API differences and weird behavior in older browsers (IE7, 8, 9), but that's not really a major problem in modern(-ish) environments (IE10+, Chrome, FF, Safari). For those, the benefit of jQuery is greatly diminished, especially relative to its size.

I took a quick look at the source, and it seems only the following jQuery methods are used, almost all of which can be very easily replaced with native JS and DOM calls (see: your very own http://youmightnotneedjquery.com/). A list:

$.extend() // http://youmightnotneedjquery.com/#extend $.on() & $.off() // http://stackoverflow.com/a/25248515/2230156 $.remove() & $.detach() // http://youmightnotneedjquery.com/#remove $.addClass & $.removeClass // http://youmightnotneedjquery.com/#add_class $.scrollTo() // can be replaced with CSS3 transitions and DOM style modification $.html() // http://youmightnotneedjquery.com/#set_html $.append() & .prepend() // http://youmightnotneedjquery.com/#append $.attr() & .data() // http://youmightnotneedjquery.com/#set_attributes $.find() // http://youmightnotneedjquery.com/#find_children $.text() // http://youmightnotneedjquery.com/#set_text $.css // can be solved by directly querying the DOM "style" object $.ajax // See below

element creation // ex: $ '' event triggering // ex: $cancel.click => do @cancel The only thing on that list that would pose significant trouble to replace is $.ajax(), which can be handled the same way Backbone does it: consumers of the API can set Messenger.ajax = whatever; before making Messenger calls, which will be set to $.ajax by default if they have jQuery set, or will require user override if not (perhaps using a library like reqwest or similar).

Is there interest in doing something like this? I would be happy to give it a spin and try to implement the above proposal, preparing replacements for the listed methods if jQuery is not loaded, and throwing errors if users try and use <IE10 without jQuery loaded.

— Reply to this email directly or view it on GitHub.