Forums

Hello,

Are you using YUI Builder? If you are using builder, you actually have two directory structures to deal with, the source and the built application. By default builder expects your source folders to be set up a specific way and it will dump its output into a build folder. The output format of builder makes it pretty easy to make a custom combo service on your server so loader can optimize the loading of your code. The cool thing is that all of that is customizable, so you can really organize your project how you want.

There are detailed instructions for creating gallery modules. Gallery modules use builder so they require a specific directory structure. You might want to start by following those instructions, but then adapt the process to what ever suits your needs.

I would start by logically separating your code out into individual YUI modules. Each module generally gets its own folder and within that folder is the module code and possibly an assets folder that contains any other files related to that module. That's as far as YUI organizes their code. Something sort of like this:

[yui3]
-[build]
--[module0]
---module0.js
---module0-debug.js
---module0-min.js
--[module1]
---[assets]
----someFile.file
---module1.js
---module1-debug.js
---module1-min.js
-[src]
--[module0]
---[js]
----module0.js
---build.properties
---build.xml
--[module1]
---[assets]
----someFile.file
---[js]
----module1.js
---build.properties
---build.xml

You can certainly nest your module folders deeper I you'd like. In that case, I would recommend creating separate module groups in the loader config for each base path. It might be nice to split up widgets, views, utilities etc. but I would not nest folders too much deeper. Eventually you're spending more time organizing a project than you are developing it. Also, having longer paths can quickly increase the length of a combo url causing it to make more than one request. The API docs for loader can be a bit confusing sometimes, but with a bit of work loader should be able to handle any directory structure you have.

Knowing how to split your functionality up into modules is something that should get easier over time. If you already have something resembling an object oriented application, start by making each class its own module. Extending Y.Base is a good practice for most general bits of functionality.

As far as your namespaces go, same thing do whatever works for you, but I would advise you to hang everything off of the Y instance. For example Y.MyApp.MyWidget is a good name for your widget. To make sure you're not clobbering your own namespace, do something like this when you create the widget:

Y.namespace('MyApp').MyWidget = Y.Base.create( ... );

You could have longer namespaces like Y.MyApp.views.product.List, it would work. It just doesn't feel right to me. In older browsers there's a small performance penalty for every . in a variable reference. Also, these names can't be minified. So while it works just fine, you are adding some minor disadvantages and causing yourself extra typing.

You could also do without a namespace. Y.MyWidget or Y.MyAppMyWidget could also work.

Hopefully this was helpful, it's kind of up to you to manage your project the best way for you. YUI 3 has taken a rather minimal approach to namespaces and file organization.