portlets in SPAs

MainAdminShell.js

// Admin App Host application
require('something') // we need to force load all modules,  could this be by convention?
var Registration = require('register');

var links = Registration.get();

for(var i in links)
{
 print("<a href='+i.url+' >' + i.title  +'</a>
}

MainAdminShellUsingReact

/*
  The smae idea could be applied to react.  just replace a the url with a function which happens to return a component
  
  something like
*/

require('something') // we need to force load all modules,  could this be by convention?
var Registration = require('register');

var links = Registration.get();  { id: ..., ; title: ...., function: ....}

var MainApplicationWindow = React.createClass({
  var subComponents = links.map(function (item) {
    return (
      <div id={item.id}>
        <h1>{item.title}</h1>
        {item.function()}
      </div>
      );
   return {
     <div>
       {subComponents}
     </div>
   }
}

exports = MainApplicationWindow

MyModule1.js

var Registration = reguire('register');

Registration.register('ats', 'Manage Ats', '//hello.world/api');

register.js

var registrations = [];

var register = function(id, title, url) {
 registrations.push({ 'id': id, 'title': title, 'url': url})
}

var get = function() { return registrations; };

exports = { register: register, getRegistrations: get };