Adapt Learning Community: Dependancy prototype

Hey,

I've done an initial prototype of Adapt's initial loading that can be viewed here.

What this proof of concept proves is the following:

- Use RequireJS to load our core modules into a single file based upon their dependancies.

- Register a component with Adapt and create it using Adapt's API.

- Load components into the main file (I understand this will be done in a slightly different way)

- Create a plugin that prints out hello world.

Although the src folder isn't up to the final process - the build folder is what is meant to be run in the browser.

I have setup the following grunt processes:

grunt - this will build the Handlebars templates and preprocess the Less files into CSS files and then 'watch' the files for any changes.

grunt build - this will build all the source files together putting the dependancies into the correct order.

I envisage a Grunt process that spawns off and fetchs the components and extensions and their dependancies.

What I like about RequireJS is that is supports some great features, is widely used and documentation is great. We can use it in the src folder as well as the build folder, without having to compile our core code.

It does everything Browserify does - i.e. put all our scripts into a closure to lock away data. We can also write the syntax as a commonJS module definition. We're also not locked into using NPM (which for me should be used for node modules not front end dependancies) so we could use something like BowerJS that has been built as a front end dependancy manager - and my favourite thing about it - is we can have our own Bower server.

This leads us to having a nice separate dependancy server just for Adapt plugins. This would fit nicely with our editor as there could be one central registry and no need to avoid naming collisions.

I still think there's much to do here but in terms of a first glimpse/prove of concept it's something we can work from - discuss ideas and alternatives. Please feel free to play/prototype with it by branching off.

Daryl

Hiya,

Have just forked your code and extracted the helloWorld component into a separate external repository.

The plugin now lives here: https://github.com/cajones/adapt-hello-world/tree/0.0.2

And my fork is here: https://github.com/cajones/adapt_framework/tree/prototype/requirejs/

I've used bower to grab the external plugin and install it into the src/plugins directory from there your grunt task to compile the css/hbs/js just works as normal.

Show parent | Reply

Hey,

This is great. Nice prototype to show off Bower and using external git repos. One of the other issues we need to consider is how the bower.json file gets populated.

Daryl

Show parent | Reply

In this example you can user bower to install packages on the command line.

For example:

$ npm install -g bower

$ bower install {plugin-name or git repo url} --save

In production we should use the bower API to install the component/extension/theme into the appropriate directory.

var bower = require('bower');
bower.commands.install({plugin-name or git repo url}, {
save: true
}, {
directory: 'src/components' //or 'src/themes'
});

This does the following

copies the files from the git repo into the src/plugins directory.
saves the new dependency and version number to bower.json

We discussed providing a UI to allow the user to browse plugins and install them... using the API this should be fairly easy.

Another approach would be to build a command-line -interface that wraps the bower API and extends it with some other functions like plugin creation.

Something like ...

$ npm install -g adapt-cli

$ adapt search hello-world //search the repo(s) for a match

$ adapt install hello-world //install a plugin

$ adapt create plugin my-new-plugin //scaffolds a new directory containing the files needed for a plugin (using a yeoman generator)

If we can do it on the command line first then we can build more "sophisticated" tooling later.

Chris

Show parent | Reply

Hey,

I think for me the Bower API allows a lot of possibilities. Being able to save the type of plugin into the correct folder is perfect. Allows separation of themes, menus, components and extensions.

I really like the idea we discussed around using the adapt package, which in turn allows us to run

$ adapt create theme "cool-theme-name"

and this puts all the necessary files and templates into my themes folder ready for me to start my theme.

Command line is definitely the first requirement and I don't see the UI version until much later.

Daryl

Show parent | Reply