Picture of Daryl Hedley
Dependancy prototype
by Daryl Hedley - Thursday, 17 October 2013, 1:42 PM


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.


Picture of Chris Jones
Re: Dependancy prototype
by Chris Jones - Thursday, 17 October 2013, 4:29 PM


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.



Picture of Daryl Hedley
Re: Dependancy prototype
by Daryl Hedley - Friday, 18 October 2013, 9:15 AM


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.


Picture of Chris Jones
Re: Dependancy prototype
by Chris Jones - Friday, 18 October 2013, 11:46 AM

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

  1. copies the files from the git repo into the src/plugins directory.
  2. 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.


Picture of Daryl Hedley
Re: Dependancy prototype
by Daryl Hedley - Friday, 18 October 2013, 12:28 PM


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.