Adapt Learning Community: Packaging Additional JS Libraries

Folks, If I want to add JS libraries for example (e.g. highcharts) that may be used by a number of plugins.. how do I go about adding them to a package/course?

I can see that the main libraries are getting loaded via require in core/app.js

require([

'coreModels/backboneModel',

'coreJS/adapt',

'coreJS/router',

'coreJS/drawer',

'coreJS/device',

], function (BackboneModel, Adapt, Router, Drawer, Device, .......) {

Would this be the recommended place to load additional libraries (eg highCharts) so that they can be used in multiple plugins?

Show parent | Reply

Very good question, I don't know what best practice here would be.

If you were to include it in every plugin that would be OK since require should ensure it only gets loaded once. You do then have the overhead of keeping it up-to-date in all the plugins though.

Anyone got any ideas?

Show parent | Reply

Thanks guys. Any chance you can point me to an example of loading a library from within a plugin? Any other plugins doing this?

Show parent | Reply

Michael,

I have a component that I have worked on that uses a library: https://github.com/chucklorenz/adapt-visTimeline
I have not used it in production, but have had it working in the framework. I'm not sure that it will give ah-ha insights, and I can't vouch for best practices, but perhaps it's helpful.

Anyone else?

Show parent | Reply

adapt-contrib-media loads mediaelement-and-player.min.js

Show parent | Reply

Hi Michael,

What Matt said is probably the most common.

You could also create a pseudo/helper extension that loads these libraries, and provides a single location to allow you to access them from your components (this is probably a bit overly complex, but could be useful if you wanted to expose or modify certain functions from the libraries).

Show parent | Reply

Thanks folks, Im not too up on requirejs. Apologies for the stupid question but.. If I wanted to utilize a library such as http://code.highcharts.com/adapters/standalone-framework.js in a component..

Do I need to wrap the this in a self executing function or something before require will load it?

It does not seem to be loading when I use something like

var hc = require('components/adapt-goodbye/js/highcharts-standalone-framework')

..from within my component

Show parent | Reply

How'd you do, Michael? Any progress?
If you need more guidance, I put together a down and dirty implementation of a highcharts example: https://github.com/chucklorenz/adapt-highchart. Yep, looks just like the jsfiddle. The component's code is rough, so don't think of this as a model of component, just proof that this will work with highcharts. Add the json in example.json to components.json. (And don't trip over the fact that I used highchart with no 'S'--noticed that too late. )

Show parent | Reply

Wow. Thank's Chuck that is fantastic and a great help. Works perfectly in my course. I don't know why highcharts was not loading for me yesterday. Only difference was I was using the standalone version of HC. Anyway. Thank you

Show parent | Reply

As we all ponder how to incorporate libraries effectively, I'd like to add something from my wish list.

Some many libraries have figured out a way to reduce the size of the library they deliver to you by giving you options to select before you download the library. Instead of the complete library, you only get the modules that support the subset of features you want.

As a plug-in developer I might want to pass on the same flexibility to the course author. I don't want to have seven different plug-ins differentiated only by a single feature or combination of features. Since the library is available packaged by modules, how neat it would be to include the separate modules libraries with the component source, and then allow the user to enable various features. Only the module libraries that correspond to the enabled features would be transferred into the build and thus keeping the build lean as possible.

I know this is not possible as things stand, but I can dream, right?

Show parent | Reply

Highcharts is available via bower, I haven't tried this in a while but you can list dependencies in your bower.json and they will be installed by bower alongside your component. If the component is in the public bower you would need to add http://bower.herokuapp.com to your .bowerrc to get it to search there. I don't know who good the support for multiple version will be, but it may be worth investigation.

On a vaguely related note, you can provide relative paths to load using requirejs, for example

var $ = require('./my-library.js');

This will load another script from the same directory, allowing you to bundle custom builds with your component or just separate your concerns within a plugin.

Show parent | Reply

Ok cool. Thanks Chris

Show parent | Reply