My JavaScript templates / practices stink. Where can I go for help?

Question

Over the past few years, I have been working almost exclusively on back-end tasks, and I just noticed that most JavaScript (and CoffeeScript) projects received my welcome in my absence.

I work mainly in a rail environment, and almost all of my JavaScript / jQuery is used to look like this:

$(an_element).an_event(function() { stuff_i_want_to_do; }) $(another_element).some_other_event(function() { some_other_stuff_i_want_to_do; }) 

Failures aside, it pretty much was.

In any case, I just looked at other people's code and noticed that in my absence many javascripters became much more beautiful. This is not complicated, but it is typical of the newer / better JavaScript approach I've seen:

 jQuery -> if $('#products').length new ProductsPager() class ProductsPager constructor: (@page = 1) -> $(window).scroll(@check) check: => if @nearBottom() @page++ $(window).unbind('scroll', @check) $.getJSON($('#products').data('json-url'), page: @page, @render) # nearBottom: => $(window).scrollTop() > $(document).height() - $(window).height() - 50 render: (products) => for product in products $('#products').append Mustache.to_html($('#product_template').html(), product) $(window).scroll(@check) if products.length > 0 

I was looking for resources for modern best practices / templates for JavaScript (and / or CoffeeScript), but I had no luck. So, in short, where should I look to be sure of success: the best javascript / coffeescript modern models and practices?

Answer 1

JavaScript Resources

Templates for large-scale JavaScript application architecture

Basic JavaScript Design Patterns for Beginners, Volume 1.

JavaScript Templates

jQuery specific

Tools for jQuery Application Architecture

CoffeeScript

http://coffeescriptcookbook.com/chapters/design_patterns/

Answer 2

Here are some links I put together:

General

http://eloquentjavascript.net/

http://jqfundamentals.com/

Patterns

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Inheritance

http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html

Module structure

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth http://ajaxian.com/archives/a-javascript-module-pattern http://edspencer.net/2009/ 10 / javascript-module-pattern-overused-dangerous-and-bloody-annoying.html

New keyword

Is JavaScript a “new” keyword considered harmful? http://ejohn.org/blog/simple-class-instantiation

Shutters

http://www.bennadel.com/blog/1482-A-Graphical-Explanation-Of-Javascript-Closures-In-A-jQuery-Context.htm

How do JavaScript locks work? http://skilldrick.co.uk/2011/04/closures-explained-with-javascript/

Pass by reference / value

http://snook.ca/archives/javascript/javascript_pass

JavaScript training

http://concisionandconcinnity.blogspot.com/2010/03/notes-on-teaching-javascript.html

This is a keyword.

http://alebelcor.blogspot.com/2011/07/this-keyword-in-javascript.html http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

Literal Object

http://blog.rebeccamurphey.com/2009/10/15/using-objects-to-organize-your-code

Prototype

http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

Answer 3

I like the Coffeebook Cookbook . This explains a lot and contains many examples.

You probably like the 12th chapter called Design patterns

Answer 4

You need a good book, such as “ JavaScript Templates, ” followed by an equally good idea / environment like Fiddle , for practice.

Answer 5

I don't think reading general patterns will help you write really good code. Moderately good code, but not very good code. I would go to irc.freenode.net and ask in ## javascript and #coffeescript for help - at least there are a lot of people in #coffeescript to help you improve the code you added to gist .

Answer 6

I do not see a problem with your old code. Or with a new code. Basically, just follow the same principles that you will follow with Ruby: mercilessly refactoring and let a good architecture emerge from refactoring.

Answer 7

If you need to play with the full implementation of the large-scale JavaScript link architecture, see:

http://boilerplatejs.org

This is a set of templates and the integration of some good libraries with a ready-made sample application for starters. I wrote it to share my experience after working on several major JS projects.