Code organization/architecture

[ccarneiro]

Hi,

I've been looking into the documentation and here in the forums for advises about how I can organize better my frontend code with SmartClient and I didn't find anything, so I'd like to ask what others developers are doing on their projects to have a better architecture with protected scope with SmartClient

SmartClient framework does a excellent job managing many visual components in the view as described in the documentation:

"By default, component IDs are created in the global namespace, so your client-side code may reference helloWorldLabel to manipulate the Label instance created above. You should assign unique IDs that are as descriptive as possible of the component’s type or purpose"

If you want to manage the components not in the global scope you can do:

"You can alternatively manage your components by saving the internal reference that is returned from the create() call. For example,
var helloWorldLabel = isc.Label.create({ contents: "Hello World" });"

More from documentation: "In a SmartClient-enabled application, you may load hundreds of user interface components in the bootstrap page, and then navigate between views on the client by hiding and showing these components."

Although SmartClient manages the situation well and keep the best performance while executing the application in the browser, maintaining a project's code with many global vars and functions isn't the easiest task.
I am looking for a solution to isolate the components per file or namespace, for example:

1 - With a namespace approach similar to this:

https://gist.github.com/giuliandrimba/4221198

lets suppose I have a namespace global function to control namespaces:

function ns( ns )
{
    var n, b = DPT, r = /[^\.]+/g; 
    while( (n = r.exec( ns ) ) != null )
    b = b[n[0]] || (b[n[0]] = {});
    return b;
}

With this I could manage the global scope like this:

ns( 'user.screen' ).main = isc.HLayout.create({autoDraw: false, members:[myComponentList]});
// then use it like this
detailPane.addChild(ns( 'user.screen' ).main);

I like this namespace approach but it would bring extra effort to keep everything making reference to/from the namespace global function.

2 - Another approach that I see with better eyes is to use Browserify (http://browserify.org). It brings the "common js module pattern" used by NodeJS to browser apps.
With this, the .js file code would be protected from global scope with a solution similar to this:

(function () {
module.exports = isc.HLayout.create({autoDraw: false, members:[myComponentList]});
}());

// then using it
var userScreen = require('userScreen');
detailPane.addChild(userScreen);

So, is anyone interested in sharing how the frontend architecture of his project looks like? or point me some link to an article or documentation with SmartClient that I am missing?

[Isomorphic]

Reading about creating custom classes in the QuickStart Guide, and follow this through to the various samples, including checking out AutoChildren. It's common to make a class for the entire application, typically this is the top-level layout. With this approach, you don't end up using global variables except one for the app as a whole, yet everything has a predictable ID for Automated Testing purposes, since everything is an AutoChild.