Develop Reference

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

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this 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 ;)

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.

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.

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.

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

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;
};

Coincidentally, today on SlashDot there is a review of the 6th edition of Javascript: The Definitive Guide, which the reviewer there says "retains its crown as the ultimate reference resource for JavaScript programmers." It's 1,100 pages.
Yes, this isn't the sample app you were seeking, but the book does have a lot of examples and advice about best practices.

There are several ways to learn how to write good JS code.
You can read books. The best one about organization of JS code and about common patterns including inheritance is JavaScript Patterns by Stoyan Stefanov.
Another good way to learn is just look through the excellent code of other developers and using it. The best library I've seen from the point of code organization and using of patterns is Google Closure Library. It is used internally by Google in the RIA like Gmail Google Docs.

A kind person in irc suggested this eBook and I found it verry helpful.
Learning JavaScript Design Patterns
A book by Addy Osmani
http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Advanced javascript guidance

I'm looking to improve the standard of my javascript as I'm moving beyond simple AJAX forms towards much richer interactions and it's quickly getting out of hand.
There's lots of resources about how to write proper javascript, many of the best are from Douglas Crockford, but very little about relevant design patterns and how to implement them.
Do you know of any resource, books or blogs, on how to produce and manage non-trivial javascript applications?

I plan to read Pro JavaScript Techniques by John Resig as well as his upcoming Secrets of the JavaScript Ninja.
Also, in my mind, "advanced" and "JavaScript" are often associated with Dean Edwards.
EDIT: it's not strictly devoted to JavaScript, though I'm also learning a lot from 24ways.org
EDIT2: from time to time, gems also pop up from Simon Willison's feed: today Dean's getElementsByTagName() implementation and John's jQuery.require().

As mentioned :
Pro JavaScript Techniques by John Resig is an excellent book.
If you're intention is to use Javascript for more than just everyday form validation etc then I personally think understanding OO principles is important.
With Javascript being such a flexible language I would reccommend reading up on discipline and approaches to coding Javascript, not just the syntaxy stuff.
This book Pro Javascript design patterns should help there.
You're halfway there already with Douglas Crockford, but there are plenty of others writing great articles on the web.
UPDATED:
I'm finding that over and above most languanges and tech there is a real buzz about Javascript right now and it's difficult to keep up with new stuff so I tend to check out relevant news sites like Ajaxian for posts with content linking to good authors for up to to date advances with libraries, frameworks and the like.
I recently visited the fullfrontal09 Javascript conference, all the speakers there gave excellent talks on Javascript so read anything they have written!
Read up on Closures and Scope, sugaring and currying! Robert Nyman's slides from FullFontal09 should get you started

If you can stomach the tone of some of the regulars, the comp.lang.javascript newsgroup is an excellent resource. I have learned a great deal there.
Regarding design patterns, there is a book called "Pro JavaScript Design Patterns" by Ross Harmes and Dustin Diaz, although having read it I wouldn't recommend several of the practices it suggests.

Make sure to also have a look at free web toolkits that are available, such as: Google Web Toolkit and Dojo or Jquery. These will help your application development efforts go much faster.
Also check out the Javascript tutorials at:
http://www.w3schools.com/ajax/ajax_intro.asp
Hope that helps. :)

Apart from books, i would say start hacking the existing JS libraries (like amazing JQuery). Its a better way to look around the power of javascript..

Lynda.com has an introduction to jQuery (and other Javascript classes). It provides a decent introduction as you go deeper and read the excellent books already recommended.
Here's the link:
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=48370

This was only published recently (8th Dec.) but I've already found it extremely useful as a refresher of common JS practices.
http://stevej.name/js_executable_guide.html

What to learn before using a JavaScript library / framework?

It seems that many of the JavaScript questions are answered by the simple use of pushing a library, without taking into account the person asking the question. I think libraries are great myself, but sometimes I think that we're too quick to throw a library down someone's throat.
Imagine a person asks a question and it's apparent that they barely know JavaScript. They're just using code they found and piecing it together with other code, and really have no firm foundation to work on. To add a library on top of that flimsy foundation seems like a disaster waiting to happen.
With that in mind, what JavaScript / programming / web browser concepts do you think are necessary to understand before a library/framework is introduced to a person? Should a framework / library be part of the learning process?
I don't think someone has to grasp absolutely everything to use a library, I just think some people would be better served with a "Library X might help solve your problems, but before you do that, you might want to read up on the following concepts", rather than just a "use library x" answer.

What you should learn are some fundamental programming techniques:
closures
continuations
function objects / what a "first class" function is
JavaScript object oriented design
difference between "prototype" languages and traditional Object Oriented languages
Absolutely firm grounding in HTML and CSS: standards, tricks, and various browser compatibility issues
UI Design Principals
With that in mind, today its practically impossible to develop without a library. I recommend Dojo but others use jQuery, YUI, etc...
When choosing a library, you need to have a firm understanding of what problem you are trying to solve. Is it browser abstraction? dealing with communication? charting? animations? graphics? UI toolkits?
Each library has its "niche", so you need to really know what you're specific problem domain is and in turn choose a library accordingly.

I would suggest using the brick and mortar kind of library and find a good book on JavaScript.

I think that one reflex reaction to a "how do implement X" is "don't reinvent then wheel", and this is generally good advice. I think that if you have to ask how to do something reasonably complex, and it's already in a library then you're going to waste massive time trying to piece together something from a few answers on SO.
So barring the obvious: learn the syntax of the language, learn how to debug etc., by and large a library is the right answer. And that's not just to say "Use the library, disengage brain" it also means "Study the library, look at the issues it's solving - you didn't realise your problem was so complex? Well the folks who put hours and days into the library studied the problem in some detail and probably developed the library by using it extendsively. Study the implementation and learen how."
I think that studying good code is a very good way to learn.

Libraries bring similarities to browsers where so much is different from browser to browser. This is why, I'd suspect, people suggest their usage in various answers. Nothing is stoping anyone from reading a good js book if they want to actually understand what is going on, but we surely cannot shove books and tutorials down anyone's throat. You need to want to learn before that would be worth anything.

They should read this http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb
And check out some of the links here http://www.crockford.com/

Are design patterns in JavaScript helpful? And what exactly are they?

I have been learning more and more javascript; it's a necessity at my job. We have a web application that uses a lot of javascript and I will be doing more and more every day. I have read bits and pieces about design patterns, but was wondering if someone could just give me a cut and dry example and definition. Are they something that would benefit me? Or is it more high level?

Design patterns are generic and usually elegant solutions to well-known programming problems. Without knowing what problem you're working in, I would say "Yes" they can help make your code more manageable.
This link and this link make some reference to design patterns in Javascript. They may be worth reviewing.

One of the most practical and easy to use JavaScript-specific design pattern I've encountered is the Module Pattern, which is a modified Singleton pattern that "namespaces" related code and prevents the global scope from getting cluttered with variables and functions that might conflict with each other in a complicated page.

Also there is a book about classic design patterns in javascript. You can download examples from it's site.
But from my experience its obviuosly harder to implement projects with great amount of javascript.

As design patterns are language agnostic, I would recommend reading one of the classic books on the subject. My favourites are:
Patterns of Enterprise Application
Architecture by Martin Fowler
(http://www.amazon.com/Enterprise-Application-Architecture-Addison-Wesley-Signature/dp/0321127420)
Design Patterns: Elements of
Reusable Object-Oriented Software by
the "Gang of Four"
(http://www.amazon.com/Design-Patterns-Object-Oriented-Addison-Wesley-Professional/dp/0201633612/ref=sr_1_1?ie=UTF8&s=books&qid=1229278937&sr=1-1). This is a bit of a classic.
However, these aren't beginner books by any means and you might get more value out of some of the many web resources and tutorials out there (Wikipedia has some reasonable explanations).
My own experience is that the object model in javascript is a bit trickier to understand than others such as PHP or Ruby and hence, applying design patterns isn't always that easy. Libraries such as Prototype provide functions for making inheritance easier to work with and this makes programming Javascript in an OO way much easier.
I recently used Javascript to implement the Active Record pattern using Prototype, which you can read about more about here if you want:
http://codeinthehole.com/archives/6-Active-record-javascript-objects-using-cookies.html

Should I learn/become proficient in Javascript?

I am a .NET webdev using ASP.NET, C# etc... I "learned" javascript in college 5+ years ago and can do basic jobs with it. But I wonder if it is useful to become proficient in it.
Why should I learn Javascript?
Is it more advantageous then learning JQuery or a different library?

Yes, definitely learn Javascript before you learn one of the libraries about. It's the whole walk-before-you-can-run thing.

Make sure you add these sites to your bookmarks:
Mozilla's developer site: This contains the reference to the Javascript API in Mozilla. This will help you make sure you're writing code that Firefox understands.
IE's site in Microsoft Developer Network: The same, for IE.
W3's reference of DOM for HTML: In most web applications today, the Javascript code manipulates the DOM, which is an internal keeping track of the objects displayed on screen (but you already knew that, right ?) This is the reference to the DOM API. It is language neutral, which means it does not target Javascript, but these methods exist in Javascript too.
Douglas Crockford' site: Doug Crockford is THE MAN when it comes down to Javascript. The articles in his page are a must read. Because Javascript has closures and first-class functions, he believes it is closer to Lisp and Scheme than to other languages. And he teaches you how to greatly improve your code with these language features.
Yahoo Developer network: You may also want to check this. I'm not a regular visitor to this site, though, so I can't really say much about it.

Yes, absolutely you should learn JavaScript if you are doing web development. I highly recommend JavaScript: The Good Parts, by Doug Crockford. And, JQuery is a great framework to use (this site uses it) -- it kind of depends on what you are trying to do -- YUI and ExtJS are also very nice.

The answer is simple.

Hands down yes. There's a reason that Google have made such a big fuss about the V8 JS engine for Chrome, why Mozilla are working on TraceMonkey for Firefox and why Webkit have been working on Squirrelfish for a while (now Squirrelfish extreme). It's because JS is becoming more popular by the day.

Javascript is one of those languages that spending a few hours learning will probably teach you 99% of what you will ever really use. I would imagine you are at the point in your learning of javascript that you know more than enough now and just learn one or more of the frameworks now.

I would recommend brushing up on your non-frameworked javascript first. Refreshing/learning basic concepts of dom manipulation and what not. Like learning how to build a linked list, stack or queue in C++ before learning how to use the STL (standard template libraries).
In addition to brushing up on straight javascript, it might be good to get into a framework that doesn't abstract and change the way things work so much, for instance Prototype. You code with it very much the same way you code with straight javascript. Read through the Prototype code, learn how to make classes, and do some fancy stuff. From experience, I can say reading through the Prototype.js helped me learn alot.
After messing around a bit, then I'd say go for jQuery. If jQuery didn't, literally, change the way you write code I'd say go for it first, but learning how to build classes and js inheritance and what not can be a very important lesson for someone who wants to become fluent in JS.

Learning javascript is recommended for any web application developer. Why?
You will better understand the possibilities, limitations and dangers related to developing a web application
It is a boost for your career, if you are working on a web application that has a user interface.
However, learning javascript is usually a trade-off between a programming language and another. You should consider whether javascript is relevant for your career or project.

Unless you want to really get into javascript, I think you'd be better off learning enough JS to leverage one of the tried and tested javascript libraries out there.

One thing nice about JavaScript is that it is quite different from mainstream languages such as C#, VB.NET or Java. Learning it, especially if you have occasions to use it, will give you another insight on programming, and that's always good. I think it's worth learning it.

If you are doing web development then at some point you are going to get exposed to Javascript or ECMAScript at some point in your career for any one of a number of reasons. At a minimum you should know enough Javascript to be able to be able to validate user input; however, the web is moving in the direction of using more an more Ajax so you should also know enough Javascript to properly leverage one of the major libraries out there such as jQuery.
As some of the other users have noted, you can learn most of what you need of Javascript on a day to day basis in a single day or a couple of afternoons. If you want to get more advanced with Javascript then you are going to have to invest much more time in learning the language but odds are that unless you seek out this type of work that you are not going to encounter something that a preexisting library doesn't already exist for.

If all you want is to do some simple UI-effects and the like, I suggest you just pick a library and go for it!
Using libraries eliminates all the flawed implementations of JavaScript and provides you with an API which is the same across all browsers. And if you're working together with others it is also a great way of implementing code-standards and best practices.

Learning a second programming language is always good.
By the sound of it, JavaScript is a language that you use, to it will be of practical use too. As a web dev, it has been recommended to me in a review that i learn at least basic JavaScript.
A library such as jQuery is essential for web development thse days, so you could learn that too.

I don't think a lot of deliberate learning makes sense (but of course you need some basic knowledge), but I also think after some years of web development you'll become pretty proficient in the language anyway :)

If you are a webdev then yes, you should be proficient with Javascript. Javascript is a major part of making web apps as interactive as desktop apps.
With that being said, learn to use one of the cross-browser compatible libraries like JQuery, Prototype, etc. We do not need to have any more single browser crud created using Javascript, just because any real man/woman rolls their own.
A few things to learn in Javascript:
1. Basic syntax
2. The various flavours of function declaration.
3. Passing functions around and how to use passed in functions.

I recommend Jeremy Keith's books: DOM Scripting and Bulletproof Ajax. After you become more fluent in JS I would recommend a JS library(I use jQuery, but that is not important).
JS is important to learn. You cannot use a framework without the proper understanding of how it works. That is doing things backwards.

i thing you should have a good knoloedge base of language specification and DOM (Document Object Model). it means,you shoud know how find/create "page object" an edit properties. Also you should have an idea of "object oriented" javascript tecniques, which the starting point of a lot of framework. you don't need learn specific framework if you don't use it. simple keep in mind generic base concept!

I'll go with the opposite answer most are putting out there. Learning javascript as a developer these days is almost pointless. The language is similar enough to java/C# that it's syntax and semantics shouldn't be lost on you.
What you should learn is jQuery.
As you use jQuery you'll pick up the most common things you'll ever need from javascript anyway.

If you're involved with the Web in anyway then the answer is "Yes, always". Maybe an embedded or system's programmer could get by without JavaScript, but not a webdev.
Most of the libraries are designed to alleviate some of the pain of interacting with a multitude of browsers. They will not abstract away core JavaScript functionality.

Yes, you should learn JavaScript. Sooner or later you will need to use it!