Adapt Learning Community: How best to add jQuery UI library for use by component

I am building a component that requires the jQuery UI library and wanted some advice on how best to add this.

Currently I have added it to the js folder of my component and then required it as follows in my components main js file as follows:

var jQueryUIRef = require('components/adapt-contrib-scroller/js/jquery-ui.min');

This seems to work but I wanted to check if this is how you (the experts) would suggest adding this library.

Similar to how I added the js, I just renamed the jquery-ui.css file to jquery-ui.less and popped it into the less folder of my component.

If how I have done this is not such a good implementation I would be interested to hear suggestions on how best to add additional libraries such as this. I would be concerned there could be duplication if more than one of my custom components require the jQuery UI library but pretty sure the "require" functionality would prevent any redundancy.

Thanks

Paul

That method of loading the JS seems fine to me if you only want to use the library in one or two components. As you say, require will ensure it's only loaded once so your only worry is ensuring that the version of JQuery UI is the same in any component that is using it.

You can also load it from a CDN, particularly useful if you do want to use it across multiple components as then you don't need to worry about multiple copies of the code. Also there's a chance that the user may already have it cached. This is less useful if you're using a custom build of JQuery UI.

If you did have something like this that you wanted to use across many components you could always amend the framework to have it loaded as a core library. You'd add the .js file to src/core/js then modify src/core/js/scriptLoader.js

Show parent | Reply

Thanks Matt

That is good to know my implementation isn't too bad.

And thanks for the info on the alternatives. The CDN option seems a good option.

Cheers

Paul

Show parent | Reply