|Page 1 of 1||[ 3 posts ]|
I have a web application that manages Products, Orders, Clients and I would like to use YUI to improve the usability. The application is pretty large and I need to organize the YUI code in separate files and keep them somehow grouped in folders to be easily mentioned. I've been reading the docs, user guides & forums but I didn't find any clear example on how to organize your YUI code in files and folders.
My application is a regular MVC application.
To manage the Products:
For example the Products List page might contain something like this:
Is this a good practice in the YUI world?
And the other question is: how to organize the code in modules?
The widgets to be part of a module calles 'myapp-widgets' and the views to be part of different modules depending on the business object, e.g.: 'myapp-product', 'myapp-order', 'myapp-client'? What is the best practice regarding modules?
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:
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.
Thanks Steven for your detailed reply.
I'm starting to get comfortable with YUI3. Now I'm at my 3rd version of code organization and probably it wont be the last but I'm moving forward. I dont want to spend more time organizing code than developing
I'm not using YUI Builder. I'll have a look.
|Page 1 of 1||[ 3 posts ]|
|You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum