-
-
Save joannecheng/1350697 to your computer and use it in GitHub Desktop.
# 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. | |
Oh yes, of course - mostly because it's a little inconsistent (I'll update this with some examples after work).
Also - you guys are using rails, right? Rails 3.1 comes with coffeescript support.
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?
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?
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.
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?
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. :)
No problem! I enjoy talking about javascript more than normal human beings. :X
Best of luck!
Man this was extensive, thanks.
Anything you don't like about coffeescript?