javascript code architecture question
<p>I'm about to make a web app which will have a pretty heavy client end. I'm not sure about the way to organize my javascript code, but here is a basic idea :</p>

<pre><code>// the namespace for the application
var app = {}; 

// ajax middle layer
app.products = {
  add : function(){
    // send ajax request 
    // if response is successful
       // do some ui manipulation
       app.ui.products.add( json.data );
  },
  remove : function(){},
  ... 
};
app.categories = {
  add : function(){},
  ....
};

// the ui interface which will be called based on ajax responses
app.ui = {};
app.ui.products = {
  add : function( product_obj ){
     $('#products').append( "&lt;div id='"+product_obj.id+"'&gt;"+product_obj.title+"&lt;/div&gt;" );
  }
};
app.ui.categories = {};
</code></pre>

<p>Anybody got similar experiences to tell me the pros and cons of this approach? What's your way of designing client side javascript code architecture? Thanks. </p>

<p>[update] : This web app, as you see from the above, deals with products CRUD, categories CRUD only in a ajax fashion. I'm only showing an snippet here, so you guys know what I'm trying to achieve and what my question is. Again, I'm asking for inputs for my approach to organize the code of this app. </p>
