Router Plugin - AMD in Multi Page Web Apps

Adam Chambers

unread,

May 4, 2013, 5:10:06 AM5/4/13

to amd-im...@googlegroups.com

Hey all,

I have been using AMD for a while now and have been searching for the best to solution to handling AMD in large, javascript heavy, multi page web apps. I have written a plugin which I'd love to get some feedback on.

You can check it out on Github - https://github.com/chambaz/Router

The basic idea is to pass the required modules for any given page via a body tag attribute. The modules can return public properties which can be accessed from main.js and key/value arguments can be passed to the modules via the attribute tag. This approach has given me a lot of flexibility in modular design and code sharing throughout multi page applications.

Example body attribute specifying two modules to load, one with key/value arguments

What do you guys think? :)

Guy Bedford

unread,

May 4, 2013, 2:49:41 PM5/4/13

to amd-im...@googlegroups.com

It seems that the major reason for this is to allow sending instance data for the current page into the modules that need to create their behaviours.

This is a common problem, and I can understand the need to have a common solution.

But why not just use a <script> tag and a require to send some data into a function?

--
You received this message because you are subscribed to the Google Groups "amd-implement" group.
To unsubscribe from this group and stop receiving emails from it, send an email to amd-implemen...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Adam Chambers

unread,

May 13, 2013, 2:57:40 PM5/13/13

to amd-im...@googlegroups.com, guybe...@googlemail.com

Hey,

Thanks for your reply. The main reason this plugin came into existence was a need to include specific modules on a per page basis in CMS driven sites. I played around with using an inline require statement to load the modules required for that page, however this seemed a little sloppy. Also we are using view templates and in most cases the footer and header are in a global include so it would mean adding a <script> somewhere in the middle of the markup. We include the body tag in all view templates for styling so I found it neater to use this element to pass the references to the required modules without the need for inline JS. I also tried including separate main.js files for each page variation but this also seemed less streamlined.

Whats your thoughts?

Miller Medeiros

unread,

May 13, 2013, 3:49:56 PM5/13/13

to amd-im...@googlegroups.com

All my pages loads same JS and I use the URI or [data-attributes] or `className` to define what should be loaded: https://gist.github.com/millermedeiros/1191420 (best technique will vary based on the project)

If you need to pass some custom settings you could define a module inline on the HTML page:

define('socialSettings', {

type: 'twitter',

something: 'else'

});

Which is more flexible and clearer than the "query string" approach.

Adam Chambers

unread,

May 13, 2013, 4:00:05 PM5/13/13

to amd-im...@googlegroups.com

Hey,

Yeah that is very similar to my plugin. I agree an inline module probably does provide more flexibility but I'm not convinced by the thought of including a module inline in the middle of an HTML doc. The reason behind building this plugin was to handle AMD on CMS driven sites where we are working with view templates with global header/footer includes.