Ask HN: Learning to write good JavaScript

You can learn a ton about the language itself by reading. A good place to start is this collection of free online resources.<p><a href="http://jsbooks.revolunet.com/" rel="nofollow">http://jsbooks.revolunet.com/</a><p>My favorites from this site are as follows: <a href="http://eloquentjavascript.net/contents.html" rel="nofollow">http://eloquentjavascript.net/contents.html</a> <a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="nofollow">http://bonsaiden.github.com/JavaScript-Garden/</a> <a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="nofollow">http://www.addyosmani.com/resources/essentialjsdesignpattern...</a> <a href="http://jstherightway.com/" rel="nofollow">http://jstherightway.com/</a><p>Mozilla has excellent JavaScript material: <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide" rel="nofollow">https://developer.mozilla.org/en-US/docs/JavaScript/Guide</a> <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference" rel="nofollow">https://developer.mozilla.org/en-US/docs/JavaScript/Referenc...</a><p>As far as print goes, you'll want these books in your reading list:<p>JavaScript: The Good Parts by Douglas Crockford Secrets of the JavaScript Ninga by John Resig

These are some good resources that will teach you how to write good javascript. Having an understanding of the core language rather than using frameworks is a great start:<p>Eloquent JavaScript: <a href="http://eloquentjavascript.net/contents.html" rel="nofollow">http://eloquentjavascript.net/contents.html</a><p>Learning JavaScript Design Patterns: <a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="nofollow">http://www.addyosmani.com/resources/essentialjsdesignpattern...</a><p>JS The Right Way: <a href="http://jstherightway.com/" rel="nofollow">http://jstherightway.com/</a><p>Learning Advanced JavaScript: <a href="http://ejohn.org/apps/learn/" rel="nofollow">http://ejohn.org/apps/learn/</a><p>Ask HN: JavaScript Dev Tools: <a href="http://news.ycombinator.com/item?id=3550998" rel="nofollow">http://news.ycombinator.com/item?id=3550998</a><p>MVC Architecture for JS: <a href="http://michaux.ca/articles/mvc-architecture-for-javascript-applications" rel="nofollow">http://michaux.ca/articles/mvc-architecture-for-javascript-a...</a><p>Large-Scale JS Application Architecture: <a href="http://addyosmani.com/largescalejavascript/" rel="nofollow">http://addyosmani.com/largescalejavascript/</a><p>Mozilla Developer Network - Intro to OO JS: <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript" rel="nofollow">https://developer.mozilla.org/en-US/docs/JavaScript/Introduc...</a>

Check out the code in the open source project fabric.js <a href="http://fabricjs.com/" rel="nofollow">http://fabricjs.com/</a> . It's written by Juriy Zaytsev who was a maintainer for prototype.js. I find the code useful for learning advanced object oriented JavaScript because:<p>1) It's self contained. No dependencies on third party OO libraries or frameworks.<p>2) The code is very readable.<p>3) It's a canvas library, so it's fun to work with if you're into graphics and visualizations.<p>4) You'll learn a lot about how many JS projects are built, documented, and tested, if you get it to build and the tests running on node.js.<p>Here is what I would do:<p>1) Check out the project and get it building.<p>2) Read all the files in the util folder. You'll see a lot of methods added to Object and Array.<p>3) Take a look at lang_class.js: <a href="https://github.com/kangax/fabric.js/blob/master/src/util/lang_class.js" rel="nofollow">https://github.com/kangax/fabric.js/blob/master/src/util/lan...</a> This is how he does OO JS. It's very similar to John Resig's OO classes: <a href="http://ejohn.org/blog/simple-javascript-inheritance/" rel="nofollow">http://ejohn.org/blog/simple-javascript-inheritance/</a> and somewhat different to prototype's classes: <a href="https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/class.js" rel="nofollow">https://github.com/sstephenson/prototype/blob/master/src/pro...</a><p>4) Then take a look at the base class: <a href="https://github.com/kangax/fabric.js/blob/master/src/object.class.js" rel="nofollow">https://github.com/kangax/fabric.js/blob/master/src/object.c...</a> and an inherited class: <a href="https://github.com/kangax/fabric.js/blob/master/src/line.class.js" rel="nofollow">https://github.com/kangax/fabric.js/blob/master/src/line.cla...</a><p>5) Search for instances of the "bind" method, and see how they're used.<p>Of course, as you're doing all this, you'll need to experiment with simple language constructs in your browser's console to test what you think you know, and you'll want to read some chapters from a thorough JS book like, JavaScript the Definitive Guide <a href="http://shop.oreilly.com/product/9780596805531.do" rel="nofollow">http://shop.oreilly.com/product/9780596805531.do</a><p>Finally, this is just a personal opinion, but I don't like Crokford's chapter on OO JS. I just don't think it presents your options well. If you decide to write a large project in JS using OO techniques, I think you'd be better off utilizing an OO library, compiler, or framework like TypeScript, Google Closure, Prototype or CoffeeScript, than you would charging forward armed with Crokford's chapter on OO.

Read everything that Crockford has said about Javascript: <a href="http://javascript.crockford.com/" rel="nofollow">http://javascript.crockford.com/</a> and especially don't miss his videos.

JavasScript is an API language that allows you to write embedded programs to interact with the environment. The environment can be low level APIs such as browser DOM, WebKit library or Node.js process, or high level abstractions such as jQuery, Backbone, d3.js, etc.<p>GOOD JavaScript is the code that plays nicely with its environment. There is no strict best practice for every situation. You have to learn the language of your neighborhood.

Since you are familiar with .net, I recommend studying typescript <a href="http://www.typescriptlang.org/" rel="nofollow">http://www.typescriptlang.org/</a><p>You'll learn a lot from watching their tutorials and how the code is converted to javascript.

1. Always use jslint.<p>2. Read good JavaScript (as others have said). The jquery source is a good place to start. Underscore.js is good, too. Unfortunately there isn't consensus about what is and what isn't good JavaScript. Some people seem to be suggesting Prototype as an example of good js, which I would disagree with.

Learn Lisp. Realize that JavaScript is a lot like Lisp, but with better libraries and C-like syntax. Then write really good JavaScript.

A lot of people have listed a lot of different things. If I were in your shoes, I'd be pretty overwhelmed.<p>There is only 1 book you should start with, "Javascript, the Good Parts". It only talks about the language, not DOM apis. If I were teaching any student javascript, I would always start with that book.<p>As for the rest of it, learn <i>the</i> language. Avoid Coffeescript, Typescript, or any other DSL that purports to "compile" to javascript. You'll only be doing yourself a disservice. Just worry about learning the language first. This is vital to understand what's going on.

Do a side project that will require you to write a lot of javascript. Try not to use libraries like bootstrap that do a lot for you.<p>If you write a lot of js, you'll probably write messy js, but you'll understand how it can so easily get out of hand.<p>Then read a lot of code and the other resources people have linked to here. Having done a lot from scratch will motivate the solution a lot more.<p>You will have actually run into the problems they are telling you to solve and understand <i>why</i> it's good js rather than just taking their word for it.

Shameless plug I wrote an article called "OO JS in 15 minutes Or Less" that did really well hacker news in addition to others. Feel free to check it out :)<p><a href="http://beardedocto.tumblr.com/post/21920818233/oo-js-in-15mins-or-less" rel="nofollow">http://beardedocto.tumblr.com/post/21920818233/oo-js-in-15mi...</a>

This book by Mikito Takada (mixu) has been the single most important read in my JavaScript development: <a href="http://singlepageappbook.com/" rel="nofollow">http://singlepageappbook.com/</a><p>Very well written, well explained, and it points to many more best practices.

I didn't grok Javascript until I started using node.js. I soon realized jQuery is not Javascript, which is what many people think Javascript is just like many think Rails is Ruby.<p>Just do it! Google things as you learn. Try writing a RESTful todo app with Backbone on the client and node on the backend. You'll soon learn async patterns, closures, constructor functions and most importantly understand how `this` works. Those along with `apply` I think are the essentials to being an effective Javascript programmer.

Three simple steps.<p>1. Read Douglas Crockford's Javascript: The Good Parts (Alternatively you can watch his lectures on Yahoo Theater)<p>2. Read Nicholas Zakas' Maintainable Javascript and Scalable Javascript.<p>Trust be both these books will make a great difference to the way you write your javascript code.<p>The next step should be to contribute to some open source JS frameworks. I will suggest jQuery or YUI. You need not always write code, you can begin with improvements to the documentation and later move on to submitting actual code.

If you're okay with paying, John Resig (creator of jQuery) is in the process of writing a great book - "Secrets of the JavaScript Ninja" - which is available as an early access edition here : <a href="http://www.manning.com/resig/" rel="nofollow">http://www.manning.com/resig/</a><p>I assure you, its worth the money.<p>Note: I am in no way associated with the publishers or author apart from being a beneficiary of this awesome repository of knowledge. This is not even an affiliate link.

Id say just like with any language, you need to ensure that your objects do one(or a few) thing(s) well. Read this article about dependency injection with JS <a href="http://merrickchristensen.com/articles/javascript-dependency-injection.html" rel="nofollow">http://merrickchristensen.com/articles/javascript-dependency...</a> if you're able to model your code in a manor that fits that pattern, you'll be off to a great start

You may also want to take a look at SlickGrid <a href="https://github.com/mleibman/SlickGrid" rel="nofollow">https://github.com/mleibman/SlickGrid</a><p>It is a datagrid developed using pure javascript and jquery. The codebase is one of the best that I have seen in my life so far. Proper use of separation of concerns, responsibilities. Very neat use of oops, methods.<p>There are lot of examples which will teach you great stuff.

Apart from all the wonderful resources listed here, one thing that really thought me a lot was writing stuff without using a library like jQuery. Try writing browser-compatible event handlers (you'll find quirksmode.org an immensely helpful resource), an AJAX request, a simple pubsub/observer pattern, etcetera. This will learn you a lot about the language, and it'll be a lot of fun too!

Keep an eye on the up and coming <a href="http://effectivejs.com/" rel="nofollow">http://effectivejs.com/</a>

This is one of the best resources I've found that highlights all the silly things about javascript. It doesn't treat you like a beginner, it's just information about gotchas<p><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="nofollow">http://bonsaiden.github.com/JavaScript-Garden/</a>

I'm currently going through Javascript Enlightenment by Cody Lindley. I think in the end you have to re-read lots of the same topics cause one author's way of phrasing certain things will 'click', and then another author's will add on to the 'click'.

For OOP JavaScript, I suggest you check out this link: <a href="http://killdream.github.com/blog/2011/10/understanding-javascript-oop/" rel="nofollow">http://killdream.github.com/blog/2011/10/understanding-javas...</a>

<a href="http://dmitrysoshnikov.com/" rel="nofollow">http://dmitrysoshnikov.com/</a> top right hoover over "Menu"

I can also recommend Javascript Patterns and Javascript Web Applications by O'Reilly. They're both solid books.

The Definitive Guide to Javascript by David Flanagan is incredibly comprehensive (and only $5 on Android)

Consider using a framework that forces you to write orthogonal code...backbone, ember, spine, etc

Well, first things first, you must be aware that JavaScript is a <i>bad</i> language, broken in many ways and mostly executed in a random fashion (i.e. almost no platform follows 100% ECMA, and even some ECMA directives are retarded, like ECMA4 didn't force chrome to return object properties in creation order by default, whereas ECMA5 fixes that to the default behavior we've always seen and expected).<p>In that sense, writing <i>good</i> JavaScript is like writing <i>good</i> PHP or <i>good</i> C++, it's a lot about avoiding the broken features (for both those languages, there are a lot of features one shouldn't use, it's even more true with js).<p>That means you should only learn from people who recognize how broken js is, and thus of course js: the good parts sounds like the right direction, whereas I think Resig is a religious zealot and shouldn't be listened to (the guy actually thinks broken js as a first language is a <i>good</i> idea).<p>Lastly, js is broken in many ways, don't use it when you don't have to, that means avoid node.js and use a good server side language instead.<p>tl;dr js sucks, don't listen to people who don't ack that, learn to avoid the sucky parts instead.<p>And more downvotes from the zealots... HN is so predictable these days.

Javascript is simple , but it comes with 0 battery included. The most difficult thing is not javascript itself but it is to work with the DOM which is a strongly typed and inconsistant API written in C++ most of the time ( yes it is , you cant say it is not and still get those Node errors ...) The only book you need to read about javascript is "The Good Parts" by Douglas Crockford and read the available ECMASCRIPT specs, which is mandatory if you are serious about Javascript. The rest is mostly garbage.