Javascript programming model to organize Web Applications

Question

I have been programming in PHP and C# for a long time, but I have done very little Javascript. For server side programming I use MVC, which is very nice and my code is neatly organized.

Now, for Javascript, when I write code, I usually screw things up. It becomes something like spaghetti code. I don't know how to organize my code.

Can anyone please help me with any resource, book, or anything which might help with writing neat and organized Javascript code?

Thanks in advance.

Answer 1

You mention that you have been programming in PHP and C# for a long time. Take your code organization experience and apply it to your javascript.

Couple of frameworks

Google's Closure tools -

http://code.google.com/closure/

If Google uses it to organize Gmail and Google Docs, then it should work for most large applications.

Also, Yahoo! YUI is good too -

http://developer.yahoo.com/yui/

http://yuilibrary.com/

And backbone.js (not as "big" as Google or Yahoo) -

http://documentcloud.github.com/backbone/

https://github.com/documentcloud/backbone

Decent Book

For me, writing javascript unit test helps me stay organized -

Test-Driven JavaScript Development

http://www.amazon.com/Test-Driven-JavaScript-Development-Developers-Library/dp/0321683919/

Answer 2

Write modular code. It's not very hard.

Personally I recommend you write very many modules and user a building process and package manager to append them into one.

I use browserify for that.

// DOM-utils.js

module.exports = {
  // util methods
}

// some-UI-Widget.js
var utils = require("DOM-utils"),
  jQuery = require("jQuery");

// do ui logic

module.exports = someWidget

I would go further and recommend you use a mediator pattern (see mediator) to keep all your code loosely coupled.

See this example application