Skip to content

Instantly share code, notes, and snippets.

@joannecheng
Last active September 27, 2015 23:47
Show Gist options
  • Save joannecheng/1350697 to your computer and use it in GitHub Desktop.
Save joannecheng/1350697 to your computer and use it in GitHub Desktop.
why I use coffeescript.
# For one, it's just nicer to look at.
# No more excessive brackets and semi colons
## js
function foo(bar){
if (bar == 0){
return "zero!";
} else {
return "Not zero!";
}
}
## coffee
foo = (bar) ->
if bar == 0 then "zero!" else "Not zero!"
# Notice the implicit returns!
# Declaring objects is much less painful.
# Missed commas/brackets are no fun.
## js
cities= {
NYC: {
population: "8 million",
location: "40.77, 73.98"
},
Denver: {
population: "7 million. maybe",
location: "39.75 104.87"
}
}
## coffee
cities =
NYC:
population: "8 million"
location: "40.77, 73.98"
Denver:
population: "7 million. maybe"
location: "39.75 104.87"
# I also like the fact that coffee takes care of scope for you.
# No more missing var statements and unintentional global declarations (if you forget var);
## js
var five = "5";
function setValue(){
five = "6";
return five;
}
console.log("The value of 'five' before setValue(): " + five ); #five = "5"
setValue(); #returns "6"
console.log("The value of 'five' after setValue(): " + five); #five = "6"
## coffee
five = "5"
setValue = () -> five = "6"
console.log "The value of 'five' before setValue(): #{five}" #five = "5"
setValue() #returns "6"
console.log "The value of 'five' after setValue(): #{five}" #five = "5"
# notice how it's easier to deal with strings in coffeescript! Multiline
# strings are allowed too.
## js
str = "Look! \nMultiline strings have to be typed out like this. \nKind of annoying, no?";
## coffee
str = '''
Look!
A multiline string!
THIS IS TOTALLY VALID.
'''
# Also, rather than using javascript's really awkward prototyping, you can use
# classes in coffeescript.
# I'm really tired, so I'm just going to link to
# http://jashkenas.github.com/coffee-script/
###
This might have been excessive for a twitter question that could be
covered by a simple link to this page (once again):
http://jashkenas.github.com/coffee-script/
but I wanted an excuse to explain something myself. I'm not very good at that.
After working in javascript for two years in an awful IDE, it's awesome to use
something like coffeescript. I found it pretty easy to pick up once I was able
to translate basic javascript concepts into coffeescript. It also works really well
with jquery, because I don't have to search through };);)}s all day.
Anyway, I hope you found it the least bit helpful. Best of luck!
###
########################################
# Some minor annoyances...
########################################
# The rules for parentheses are a little inconsistent.
# This is a valid way to call a function:
myFunction()
# This is also a valid way to call a function:
myFunction "Param"
# This is not how you call a function:
myFunction
# Objects vs Arrays...
obj =
name: "Joanne"
gender: "female"
height: "5' 3"
location: "Boulder, CO"
arr = ["Joanne", "female", "5' 3", "Boulder, CO"]
# works
for a in arr
console.log a
# works
for k, v of obj
console.log "Property: #{k}, Value: #{v}"
# NOPE. Even thought this would output the object key in regular js.
for o in obj
console.log o
# To call another function in a class/prototype, one uses
# "this", or just "@". So...
class LoadStuff:
constructor: () ->
@load_data()
load_data: () ->
...
@get_stuff(params)
get_stuff: (params) ->
....
# but if I throw something with a callback in load_data,
# like a jquery statement, I can't use @function_name anymore.
# The context of "@"/"this" is changed.
....
load_data: () ->
$.get(url, (data) ->
LoadStuff.prototype.get_stuff(data)
)
# But the wonderful fat arrow (=>) solves that issue.
@joannecheng
Copy link
Author

Also - you guys are using rails, right? Rails 3.1 comes with coffeescript support.

@reneruiz
Copy link

Yeah but we're using Rails 3.0.3. I've thought of using Coffeescript, but my JS or dev skills in general aren't very good to begin with. Figured it's something I need to learn linearly. That's probably true, right?

@joannecheng
Copy link
Author

Yeah, I would suggest learning JS first (and correctly), but keeping coffeescript syntax in mind. There are a good amount of concepts in javascript to grasp.
Are you still doing a lot of design and front end work?

@reneruiz
Copy link

Yeah I'm mostly a Photoshop, HTML, CSS guy. I really really want to learn JS because I want to do more Interaction Design, but I can't cross this certain gap in any programming language, where I don't know how to properly break down a problem small enough.

I've done a lot of reading (e.g. The Good Parts by Crockford or JS articles on mozdocs), and I always feel like I can take things on because of my better understanding from reading. But when I do try something, it always feels like I'm missing something that prevents me from moving forward, it's a frustrating process.

@joannecheng
Copy link
Author

I had that problem for years (in regards to browser/visual javascript), until I had an idea early this year for a project that I stubbornly pursued. Earlier this year, I found a dataset (http://ostpxweb.dot.gov/aviation/domfares/web20101.htm) that I wanted to visualize using a mapping library called polymaps (also a javascript library). I mapped out the first couple of steps that I knew I wanted to do - after parsing the data and importing into a database, I wanted to get all the available cities via an autocomplete.. so I researched how to do that using javascript and a controller (I used app engine). Then after I selected a city, I wanted a list of cities that you can fly to from that city. So after a long time and lots of console.log statements, I figured out the route and javascript needed to do that. Then after that, I knew I wanted to write the cost of the flight somewhere and draw a line on the map, and so forth.
Eventually I came out with this:
http://airline-data.appspot.com/
It's nothing spectacular, a little slow, and the code is horrendously ugly, but i learned a ton about javascript and ajax requests and callbacks. Is there one feature you really want to implement on the front end? Maybe search results that don't require a page refresh?

@reneruiz
Copy link

Hey, that's pretty cool, and probably really rewarding when you finally got it.

I don't have any particular questions right now, I usually let my frustrations discourage me, so I'm just starting up again. So I may be bothering you soon. :)

@joannecheng
Copy link
Author

No problem! I enjoy talking about javascript more than normal human beings. :X

Best of luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment