Examples of good JavaScript code in open source web apps [closed]

Question

I'm struggling to find a way of writing good JavaScript code that would be efficient, widely accepted by other developers and not very ugly.

Until recently, what I used were just literal objects and bits of jQuery but after reading Douglas Crockford's "JavaScript: The Good Parts" I now fully realize that there's more to JavaScript than AJAX, DOM modifications and simple animation.

The problem is that JavaScript seems not much standarized. The amount of OOP/inheritance patterns available overwhelms me. I'm not used to every framework/library providing its own impementation of inheritance. I also don't want to make a wrong decision regarding such things because this would mean rewriting all the code in case of some problems.

So what I'm looking for are existing open source web applications that use JavaScript heavily, if possible on the client side, to see what patterns are used in real projects. I would like to see the code of web applications, not frameworks or libraries. I don't mind though if those web apps are based on some framework (and if it's Dojo or RequireJS it'll be even better because I'm using them ;)

Answer 1

What I always recommend to anyone who is interested in this kind of thing is: STICK TO WHAT YOUR TEAM DOES. If they use camelCase for methods, you use it. If they use snake_case for variables, you do it. If your team prefers spaces over tabs; use them.

Never go into a stablished team with standardized style changing things because it looks better unless it's causing heavy problems.

If you're not working on a team and you're interested on using a coding style; then use the style of the libraries you use the most.

• If you use jQuery stick to jQuery Coding Style Guidelines
• If you use Closure Library use JavaScript Google Coding Style
• If you use MooTools Library use MooTools Coding Style Guideline

Organization wise, Closure is the best.. but to me somehow it feels like I'm reading JAVA instead of javascript. Go figure.

Answer 2

Yep. There are a few JavaScript gurus that have written alot about how to write JavaScript, about prototype based OOP with JavaScript, even about how indenting and naming variables should be done.

However, if you are looking for a large implementation of JavaScript to study as an example, I would look for HTML5 game implementations. It's practically guaranteed that you will find a large enough, well written example that is not minified.

Answer 3

If you are interested in JavaScript standards I would check out commonJS. They have a lot of good ideas about how JavaScript should be done.

BravoJS is a good module implementation for the browser.

As for examples jQuery's source code was mentioned in the comments. jQuery does a good job but it is I would also check out Narwhal JS for examples of how things should be done.

Here is a good free design patterns book that I found helpful Essential JavaScript And jQuery Design Patterns.

You wont find one solution to your problem and that is how JavaScript is designed. I would recommended experimenting. I find that Douglas Crockford has a lot of great ideas but that does not mean you have to follow him to the letter.

Answer 4

A good project is : http://impactjs.com/ A good reading is : http://addyosmani.com/blog/essentialjsdesignpatterns/

Answer 5

Great question. I couldn't find one example of a well written object oriented open source application. Tiny MCE was so-so, but I wouldn't consider it well written: http://www.tinymce.com/

However, I have written clean, well factored object oriented javascript at work. It's proprietary so I can't share it, but I can explain what worked for me to learn how to do that:

1) Read the mozilla javascript object oriented programming tutorial. Their explanation of javascript inheritance is exactly what google closure uses. Personally I think what Crockford calls pseudo classical is easiest to read and maintain since 4 of the 5 other programming languages I know use classes (java, c#, python, and php. perl's the oddball here with no classes either).

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

2) Read the book 'Object Oriented Javascript' by Stoyan Stefanov.

3) Take an existing procedural javascript code base and refactor it to objects. Use the tips in 'Clean Code' by Robert C. Martin as they apply to any programming language.

4) Structure your code so it has many different files similar to how you'd use classes in a language with classes.

5) Implement dependency injection without an IOC container by creating all your objects at a top level and feeding them down into the objects that depend on them.

There's a lot more, but hopefully this is a helpful start.

Here is what I feel is the correct way to implement inheritance in javascript. this is from the google closure library:

goog.inherits = function(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  childCtor.prototype.constructor = childCtor;
};