Javascript programming model to organize Web Applications [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 9 months ago.

开发者_如何学运维 Improve this 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.

---

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/

---

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

---

JavaScript: The Good Parts

http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742

Plus any Crockford videos from YUI Theater.

http://yuilibrary.com/theater/

---

Not sure if a library suggestion is what you're after, but we started using Mootools as our base js library. Mootools' Class system is amazing for creating a class hierarchy. It's helped our team out immensely in keeping all our code organized.

If you're looking for simpler object-oriented solutions and need inheritance there are many, many libraries offering this. Two of my favorite are klass and selfish.js.

---

Here is an excellent reference. It is difficult to avoid spaghetti in Javascript at times. Also be aware that Javascript does NOT support Polymorphism.

http://dev.opera.com/articles/view/javascript-best-practices/

---

Alex MacCaw wrote a book just out, JavaScript Web Applications that covers some of the JavaScript frameworks available. MacCaw is the creator of Spine, another MVC JavaScript framework (like backbone.js is). There are tutorials on the Spine site covering how to use it. Additionally, if you're interested in backbone.js, Peepcode currently has two screencasts (not free) that cover using it.

---

Check these articles out and you will get good ideas on how to use OOP in JavaScript:

http://www.cyberminds.co.uk/blog/articles/polymorphism-in-javascript.aspx

http://www.cyberminds.co.uk/blog/articles/how-to-implement-javascript-inheritance.aspx

Regards,

Joe