-
-
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. | |
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!
Also - you guys are using rails, right? Rails 3.1 comes with coffeescript support.