47

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?

PlankTon
  • 12,443
  • 16
  • 84
  • 153

7 Answers7

29

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/

Yahel
  • 37,023
  • 22
  • 103
  • 153
pradeek
  • 21,445
  • 2
  • 31
  • 32
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/

Community
  • 1
  • 1
retro
  • 600
  • 7
  • 8
4

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

You probably like the 12th chapter called Design patterns

Manuel van Rijn
  • 10,170
  • 1
  • 29
  • 52
2

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

Pawan Mishra
  • 7,212
  • 5
  • 29
  • 39
0

If you need to play with a complete implementation of a large scale javascript reference architecture, have a look at:

http://boilerplatejs.org

It is a collection of patterns and integration of some good libraries with readymade sample application to start with. I wrote it to share my experience after working on couple of large JS projects.

Hasith
  • 1,749
  • 20
  • 26
0

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.

thejh
  • 44,854
  • 16
  • 96
  • 107
0

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.

Marnen Laibow-Koser
  • 5,959
  • 1
  • 28
  • 33
  • 2
    The problem emerges when the code base becomes larger & larger. Good architecture doesn't emerge if you have no idea what it looks like or when you have it. If you can't see any advantage in the class-based code over the older code provided, especially considering how each will become when it grows large & how hard it would be to maintain and find & understand stuff, then we have a problem – PandaWood Nov 18 '11 at 00:08
  • I see advantages in the "good" pattern, but only when the JS codebase gets above a certain size. For apps that don't use much JS, I'd use the "bad" pattern until the code told me that it wanted to be refactored. – Marnen Laibow-Koser Nov 18 '11 at 01:57
  • Also, I'm not convinced that class-based code is necessarily right for JS. I think a lot of developers flock to "classical" OO in JS without really learning how to use the native prototype OO. The latter is certainly problematic sometimes, but in some cases it's the right thing. – Marnen Laibow-Koser Nov 18 '11 at 02:02