Thursday, May 3, 2012

Javascript programming model to organize Web Applications


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.


Source: Tips4all
Post by On
Tags ,

7 comments:

  1. UserMay 3, 2012 at 12:27 AM

    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/

    ReplyDelete
  2. UserMay 3, 2012 at 12:27 AM

    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

    ReplyDelete
  3. UserMay 3, 2012 at 12:27 AM

    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/

    ReplyDelete
  4. UserMay 3, 2012 at 12:27 AM

    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.

    ReplyDelete
  5. UserMay 3, 2012 at 12:27 AM

    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.

    ReplyDelete
  6. UserMay 3, 2012 at 12:27 AM

    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/

    ReplyDelete
  7. UserMay 3, 2012 at 12:27 AM

    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

    ReplyDelete

Subscribe to: Post Comments (Atom)