My JavaScript patterns/practices stink. Where shou

Question

I've been working almost exclusively on back-end tasks for the past few years, and I've just noticed that most JavaScript (and CoffeeScript) projects have got a helluva lot prettier in my absence.

I work primarily in a rails environment, and almost all my JavaScript/jQuery 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;
})

Callbacks aside, that's pretty much been it.

Anyhow, was just browsing through some other folks' code and noticed many javascripters have been getting a lot prettier in my absence. This isn't complex, but it's typical of the newer/better approach to JavaScript I've been seeing:

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've been looking for resources on modern best practices/patterns for JavaScript (and/or CoffeeScript), but I haven't had much luck. So in short, where should I look to be brought up to speed re: best javascript/coffeescript modern patterns & practices?

Answer 1

I like the CoffeeScript Cookbook. It explains alot and contains many examples.

You probably like the 12th chapter called Design patterns

Answer 2

You need a good book like "JavaScript Patterns" accompanied by an equally good ide/environment like "Fiddle" for practicing.

Answer 3

JavaScript resources

Patterns For Large-Scale JavaScript Application Architecture

Essential JavaScript Design Patterns For Beginners, Volume 1.

JavaScript Patterns

jQuery specific

Tools For jQuery Application Architecture

CoffeeScript

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

Answer 4

I don't think that reading on common patterns will help you write really good code. Moderately good code, but not really good code. I'd login to irc.freenode.net and ask in ##javascript and #coffeescript for help - at least in #coffeescript, there are many people who will help you improve code you put in a gist.

Answer 5

Here are some links I've collected:

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 pattern

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's "new" keyword considered harmful? http://ejohn.org/blog/simple-class-instantiation

Closures

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

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

Pass by reference / value

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

Teaching JavaScript

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

This keyword

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

Object Literal

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 6

I don't see the problem with your older code. Or with the newer code. Basically, just follow the same principles you'd follow with Ruby: refactor mercilessly and let good architecture emerge from the refactoring.