Deeper separation in Module Sandbox Core Javascript Pattern

Question

Following the ideas from Patterns For Large-Scale JavaScript Application Architecture and Nicholas Zakas: Scalable JavaScript Application Architecture I began to implement my college license project using this architecture.

I have encountered a situation where it is unclear how I should proceed. To illustrate the scenario I will try to give a solid example:

I have two modules that are started via the CORE, they are legit modules that get a sandbox instance each. One module displays the dashboard main content of an administration area, and the other one displays the user profile main content of the admin area.

enter image description here

Both modules make use of the sandbox to fetch content via Ajax from the server. This is where the unclear thing pops in. Both modules have one small but noticeable common point. A small user statistics div which displays some data about the currently logged in user.

This design pattern states that modules should not have any other dependencies apart from the Sandbox. However, it is clear to me that the User Statistics Mini Module is a standalone component, used by both the Dashboard and the User Profile big module.

My question is, how would I expose the User Statistics Mini Module to my Dashboard and Profile big Modules?

kirilloid · Accepted Answer · 2012-03-07 08:32:14Z

2

Modules should interact anyway, the idea of pattern is to decouple this interaction, so they shouldn't interact directly, but may do that through core mediator using subscribe/publish events.

You may publish e.g. displayUserStats event with additional data in your dashboard modules and subscribe that event in your small module.

answered Mar 7, 2012 at 8:32

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vlad Nicula Over a year ago

So I should see the mini-module as a standalone module. The thing that still needs clarification is the rendering of the Dom content. Dashboard and User Profile have different HTML templates, and User Statistics render in different places within the big modules. :-?

kirilloid Over a year ago

Well, you may couple modules a bit tightly, creating Core.getModule function. Anyway, since you're rendering templates, you need some way to delegate partial template rendering to some another module/function. This can be done with event as well.

Vlad Nicula Over a year ago

The Core.getModule was the first idea that I thought of... My sandbox is instantiated with a dom target as one of the parameters, making appends happen only within the target DOM node. I found my answer! :) I can use getModule and have the target of the mini module be a inMemory created target, which will be used by the big modules when appending content to their templates!

Collectives™ on Stack Overflow

Deeper separation in Module Sandbox Core Javascript Pattern

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related