Integration Kernel.js architecture with Dojo 1.7 (AMD) base library

65 views
Skip to first unread message

Erik Beugelaar

unread,
May 19, 2012, 6:45:28 PM5/19/12
to kern...@googlegroups.com, markaa...@worldwiselearning.org

Hello Alan,

I am very interested to use your kernel.js in a new project. However, I tried my best to find more real-life examples/boilerplates how to implement eg. a base library like Dojo 1.7 (AMD).

Can you help me further?
Thanks in advance and I am looking forward to hear from you.

Kind regards,
Erik Beugelaar

Cross-platform developer
solidit.eu
nl.linkedin.com/in/beugelaar

alan lindsay

unread,
May 21, 2012, 12:16:42 PM5/21/12
to kern...@googlegroups.com, markaa...@worldwiselearning.org
Erik,

Kernel modules are not AMD modules if that is what you are getting at. One of the fundamental concepts of Kernel is that there are no dependencies between modules. So you would never `require` modules from other modules like you do with AMD modules.

Does this answer your question? If not feel free to give me a more specific scenario and I will do my best to help out.

Regards,

Alan

Erik Beugelaar

unread,
May 24, 2012, 8:25:00 AM5/24/12
to kern...@googlegroups.com, Mark Aalderink
Hi Alan,

Indeed, my question was not very clear.
The fundamental concept of the Kernel is clear to me (Zakas). It's more about the handling of notifications between modules and setting up these modules for the use of Dojo toolkit (Dijit widgets).
Do I need a special controller module to handle layout rendering inside a module (like the Commands in PureMVC) or can I handle all interfacing and layout rendering in separate models via HTML templates (by the use of eg. Maqetta)?
So, basically, what is the best way to implement the base Dojo (digit) and how to communicate and setup these modules to exchange information to the Kernel?

Thank you for your time and maybe you have a practical example of a simple web app so I can sort it out by myself?

Kind regards,
Erik Beugelaar

alindsay55661

unread,
May 24, 2012, 11:35:59 AM5/24/12
to kern...@googlegroups.com, Mark Aalderink
Erik,

I really should put a practical example together so people can use it as a reference. But basically you have options. If you want to have modules handle their own rendering that is up to you. In the past I typically provide rendering at the Kernel level through an extension. Here is a trivial example:


Kernel.extend(Kernel, {

  // Gets called for each module when using Kernel.start or Kernel.startAll
  onStart: function(instance) {

    if (instance.render) this.renderModule(instance);

  },

  renderModule: function(instance) {

    // Do stuff, inject html into your app, render a module "shell" if you want

    // And don't forget to call init() when you are done.
    instance.init();

  }
});

However, recently I have moved rendering to the module itself because in many cases I want to defer the rendering until I have gotten some data from somewhere. In those cases I simply use onStart to add a few helper methods to my modules:

Kernel.extend(Kernel, {

  // Gets called for each module when using Kernel.start or Kernel.startAll
  onStart: function(instance) {

    if (instance.render) this.addHelpers(instance);

    // Don't forget to call init()
    instance.init();

  },

  addHelpers: function(instance) {

    // We'll make sure that all modules with a `render` method also have an `applyTemplate` method
    instance.applyTemplate = instance.applyTemplate || function(data) {
      
      // Assumes the module has an `el` reference to a valid element
      instance.el.innerHTML = instance.template(data);
    }

  }
});

Ok so the above is pseudo code but you get the idea. As a module is started a new method `applyTemplate` is added to the module. This method will call the module's `template` method (which accepts data as a parameter) and then assign the results (presumably html) into the module's `el` property which should be a valid html node. Then your module code would look something like this:

Kernel.module.define('MyModule', {

  init: function() {

     var that = this;

    // Get some data from somewhere
    request = $.ajax(. . .);

    request.done(function(data) {

      that.applyTemplate(data);

    })
  },

  template: function(data) {
    // Take the data and return html 
  }

});

This is just an example, you can do it however you want. If you get further into an implementation and want to have me look at it I would be happy to help. Right now I'm afraid your question is still a bit too broad as you can go in many directions with Kernel, it does not recommend a specific way to implement rendering.

Hope this helps.

Alan

Erik Beugelaar

unread,
May 24, 2012, 12:44:03 PM5/24/12
to kern...@googlegroups.com, Mark Aalderink
Hello Alan,

With this answer you helped me a lot!
Maybe it's an idea to write this info on your website for other developers too.

Best regards,
Erik Beugelaar
Reply all
Reply to author
Forward
0 new messages