coffeescript - what's good
DESCRIPTION
JSTRANSCRIPT
CoffeeScript
2010.10.10Outsider����������� ������������������ at����������� ������������������ FRENDS
What’s good?
“CoffeeScript����������� ������������������ is����������� ������������������ Beautiful&����������� ������������������ I����������� ������������������ Never����������� ������������������ Want����������� ������������������ to����������� ������������������ Write����������� ������������������ Plain����������� ������������������
JavaScript����������� ������������������ Again
”Sam����������� ������������������ Stephenson
(prototype.js����������� ������������������ creator)
좋은����������� ������������������ 것과익숙하지����������� ������������������ 않은����������� ������������������ 것을구별하기가쉽지����������� ������������������ 않다.
ComparingJavaScript����������� ������������������ &����������� ������������������ CoffeeScript
Function����������� ������������������ Syntax
$("a").click(function(event)����������� ������������������ {����������� ������������������ ����������� ������������������ $(this).addClass("busy");})
$("a").click(function(event)����������� ������������������ {����������� ������������������ ����������� ������������������ $(this).addClass����������� ������������������ "busy"})
$("a").click(function(event)����������� ������������������ {����������� ������������������ ����������� ������������������ $(@).addClass����������� ������������������ "busy"})
$("a").click����������� ������������������ (event)����������� ������������������ ->����������� ������������������ ����������� ������������������ $(@).addClass����������� ������������������ "busy"
Loop����������� ������������������ Syntax
var����������� ������������������ data����������� ������������������ =����������� ������������������ [];for����������� ������������������ (var����������� ������������������ i����������� ������������������ =����������� ������������������ 0;����������� ������������������ i����������� ������������������ <����������� ������������������ 84;����������� ������������������ i++)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ data.push(i����������� ������������������ *����������� ������������������ 10����������� ������������������ /����������� ������������������ 84);}
data����������� ������������������ =����������� ������������������ []for����������� ������������������ i����������� ������������������ in����������� ������������������ [0..83]����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ data.push(i����������� ������������������ *����������� ������������������ 10����������� ������������������ /����������� ������������������ 84)
data����������� ������������������ =����������� ������������������ []data����������� ������������������ =����������� ������������������ i����������� ������������������ *����������� ������������������ 10����������� ������������������ /����������� ������������������ 84����������� ������������������ for����������� ������������������ i����������� ������������������ in����������� ������������������ [0..83]
data����������� ������������������ =����������� ������������������ i����������� ������������������ *����������� ������������������ 10����������� ������������������ /����������� ������������������ 84����������� ������������������ for����������� ������������������ i����������� ������������������ in����������� ������������������ [0..83]
List����������� ������������������ Comprehensions
init_board:����������� ������������������ function()����������� ������������������ {����������� ������������������ ����������� ������������������ this.board����������� ������������������ =����������� ������������������ new����������� ������������������ Array(WIDTH);����������� ������������������ ����������� ������������������ for����������� ������������������ (var����������� ������������������ x����������� ������������������ =����������� ������������������ 0;����������� ������������������ x����������� ������������������ <����������� ������������������ this.board.length;����������� ������������������ x++)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x]����������� ������������������ =����������� ������������������ new����������� ������������������ Array(HEIGHT)����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ for����������� ������������������ (var����������� ������������������ y����������� ������������������ =����������� ������������������ 0;����������� ������������������ y����������� ������������������ <����������� ������������������ this.board[x].length;����������� ������������������ y++)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x][y]����������� ������������������ =����������� ������������������ false;����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ }}
init_board:����������� ������������������ ->����������� ������������������ ����������� ������������������ this.board����������� ������������������ =����������� ������������������ new����������� ������������������ Array(WIDTH)����������� ������������������ ����������� ������������������ for����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ x����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ in����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x]����������� ������������������ =����������� ������������������ new����������� ������������������ Array(HEIGHT)����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ for����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ y����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ in����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x]����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x][y]����������� ������������������ =����������� ������������������ false����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
init_board:����������� ������������������ ->����������� ������������������ ����������� ������������������ @board����������� ������������������ =����������� ������������������ for����������� ������������������ x����������� ������������������ in����������� ������������������ [0...WIDTH]
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x]����������� ������������������ =����������� ������������������ new����������� ������������������ Array(HEIGHT)����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ for����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ y����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ in����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x]����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ this.board[x][y]����������� ������������������ =����������� ������������������ false����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
init_board:����������� ������������������ ->����������� ������������������ ����������� ������������������ @board����������� ������������������ =����������� ������������������ for����������� ������������������ x����������� ������������������ in����������� ������������������ [0...WIDTH]
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ for����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ y����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ in����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [0...HEIGHT]����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ false����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
init_board:����������� ������������������ ->����������� ������������������ ����������� ������������������ @board����������� ������������������ =����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (false����������� ������������������ for����������� ������������������ y����������� ������������������ in����������� ������������������ [0...����������� ������������������ HEIGHT]����������� ������������������ for����������� ������������������ x����������� ������������������ in����������� ������������������ [0...WIDTH])
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
Setting����������� ������������������ Fields
constructor:����������� ������������������ function(keys,����������� ������������������ tokens)����������� ������������������ {����������� ������������������ ����������� ������������������ this.keys����������� ������������������ =����������� ������������������ keys;����������� ������������������ ����������� ������������������ this.tokens����������� ������������������ =����������� ������������������ tokens;}
constructor:����������� ������������������ (keys,����������� ������������������ tokens)����������� ������������������ ->����������� ������������������ ����������� ������������������ this.keys����������� ������������������ =����������� ������������������ keys����������� ������������������ ����������� ������������������ this.tokens����������� ������������������ =����������� ������������������ tokens
constructor:����������� ������������������ (keys,����������� ������������������ tokens)����������� ������������������ ->����������� ������������������ ����������� ������������������ @keys����������� ������������������ =����������� ������������������ keys����������� ������������������ ����������� ������������������ @tokens����������� ������������������ =����������� ������������������ tokens
constructor:����������� ������������������ (@keys,����������� ������������������ @tokens)����������� ������������������ ->
Defensive����������� ������������������ Programming
var����������� ������������������ country����������� ������������������ =����������� ������������������ null;if����������� ������������������ (typeof����������� ������������������ model����������� ������������������ !==����������� ������������������ ����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ typeof����������� ������������������ model.profile����������� ������������������ ===����������� ������������������ 'function')����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile();
����������� ������������������ ����������� ������������������ if����������� ������������������ (profile����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ profile.location����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ profile.location.country)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile.location.country.toString();����������� ������������������ ����������� ������������������ }}
country����������� ������������������ =����������� ������������������ nullif����������� ������������������ ����������� ������������������ typeof����������� ������������������ model����������� ������������������ isnt����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ typeof����������� ������������������ model.profile����������� ������������������ is����������� ������������������ ����������� ������������������ 'function'����������� ������������������ ����������� ������������������ ����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile()
����������� ������������������ ����������� ������������������ if����������� ������������������ ����������� ������������������ profile����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ profile.location����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ profile.location.country����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile.location.country.toString()����������� ������������������ ����������� ������������������
country����������� ������������������ =����������� ������������������ nullif����������� ������������������ ����������� ������������������ typeof����������� ������������������ model����������� ������������������ isnt����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ typeof����������� ������������������ model.profile����������� ������������������ is����������� ������������������ ����������� ������������������ 'function'����������� ������������������ ����������� ������������������ ����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile()
����������� ������������������ ����������� ������������������ if����������� ������������������ ����������� ������������������ profile����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ profile.location
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile.location.country?.toString()����������� ������������������ ����������� ������������������
country����������� ������������������ =����������� ������������������ nullif����������� ������������������ ����������� ������������������ typeof����������� ������������������ model����������� ������������������ isnt����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ typeof����������� ������������������ model.profile����������� ������������������ is����������� ������������������ ����������� ������������������ 'function'����������� ������������������ ����������� ������������������ ����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile()
����������� ������������������ ����������� ������������������ if����������� ������������������ ����������� ������������������ profile����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile.location?.country?.toString()����������� ������������������ ����������� ������������������
country����������� ������������������ =����������� ������������������ nullif����������� ������������������ ����������� ������������������ typeof����������� ������������������ model����������� ������������������ isnt����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ typeof����������� ������������������ model.profile����������� ������������������ is����������� ������������������ ����������� ������������������ 'function'����������� ������������������ ����������� ������������������ ����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile()
����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile?.location?.country?.toString()����������� ������������������ ����������� ������������������
country����������� ������������������ =����������� ������������������ nullif����������� ������������������ ����������� ������������������ typeof����������� ������������������ model����������� ������������������ isnt����������� ������������������ 'undefined'����������� ������������������ &&����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ model����������� ������������������ &&����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ profile����������� ������������������ =����������� ������������������ model.profile?()?
����������� ������������������ ����������� ������������������ country����������� ������������������ =����������� ������������������ profile?.location?.country?.toString()����������� ������������������ ����������� ������������������
country����������� ������������������ =����������� ������������������ null
����������� ������������������ profile����������� ������������������ =����������� ������������������ model?.profile?()?
country����������� ������������������ =����������� ������������������ profile?.location?.country?.toString()����������� ������������������ ����������� ������������������
����������� ������������������ profile����������� ������������������ =����������� ������������������ model?.profile?()?
country����������� ������������������ =����������� ������������������ profile?.location?.country?.toString()����������� ������������������ ����������� ������������������
����������� ������������������ profile����������� ������������������ =����������� ������������������ model?.profile?()?
country����������� ������������������ =����������� ������������������ profile����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ?.location?.country?.toString()
����������� ������������������
country����������� ������������������ =����������� ������������������ model?.profile?()����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ?.location?.country?.toString()
Bare����������� ������������������ Objects
$.ajax({����������� ������������������ ����������� ������������������ url:����������� ������������������ path,����������� ������������������ ����������� ������������������ timeout:����������� ������������������ 5,����������� ������������������ ����������� ������������������ data:����������� ������������������ {from:����������� ������������������ "workspace"},
����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "html",����������� ������������������ ����������� ������������������ success:����������� ������������������ function(data)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ $("#result").html(data);����������� ������������������ ����������� ������������������ }});
$.ajax({����������� ������������������ ����������� ������������������ url:����������� ������������������ path,����������� ������������������ ����������� ������������������ timeout:����������� ������������������ 5,����������� ������������������ ����������� ������������������ data:����������� ������������������ {from:����������� ������������������ "workspace"},
����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "html",����������� ������������������ ����������� ������������������ success:����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ ->����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ $("#result").html(data)����������� ������������������ ����������� ������������������ })
$.ajax����������� ������������������ {����������� ������������������ ����������� ������������������ url:����������� ������������������ path����������� ������������������ ����������� ������������������ timeout:����������� ������������������ 5����������� ������������������ ����������� ������������������ data:����������� ������������������ {from:����������� ������������������ "workspace"}
����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "html"����������� ������������������ ����������� ������������������ success:����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ ->����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $("#result").html����������� ������������������ data����������� ������������������ ����������� ������������������ }
$.ajax����������� ������������������ ����������� ������������������ ����������� ������������������ url:����������� ������������������ path����������� ������������������ ����������� ������������������ timeout:����������� ������������������ 5����������� ������������������ ����������� ������������������ data:����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ from:����������� ������������������ "workspace"����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "html"����������� ������������������ ����������� ������������������ success:����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ ->����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $("#result").html����������� ������������������ data����������� ������������������ ����������� ������������������
Function����������� ������������������ Binding
function����������� ������������������ request����������� ������������������ ()����������� ������������������ {����������� ������������������ ����������� ������������������ $.get(this.person.url,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (function(data)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(this.el).html(data);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }).bind(this)����������� ������������������ ����������� ������������������ )}
request����������� ������������������ =����������� ������������������ ()����������� ������������������ ->����������� ������������������ ����������� ������������������ $.get(this.person.url,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ ->����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(this.el).html(data);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ).bind(this)����������� ������������������ ����������� ������������������ )
request����������� ������������������ =����������� ������������������ ()����������� ������������������ ->����������� ������������������ ����������� ������������������ $.get(this.person.url,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ ->����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ @el).html����������� ������������������ data����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ).bind(@)����������� ������������������ ����������� ������������������ )
request����������� ������������������ =����������� ������������������ ()����������� ������������������ ->����������� ������������������ ����������� ������������������ $.get(this.person.url,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ =>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(@el).html����������� ������������������ data����������� ������������������ ����������� ������������������ ����������� ������������������ )
request����������� ������������������ =����������� ������������������ ()����������� ������������������ ->����������� ������������������ ����������� ������������������ $.get����������� ������������������ this.person.url,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (data)����������� ������������������ =>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(@el).html����������� ������������������ data����������� ������������������ ����������� ������������������ ����������� ������������������
Bad����������� ������������������ Things
Compileis����������� ������������������
inconvenience
Debuggingis
hard
ButIt’s����������� ������������������ Coming
Short����������� ������������������ SourceMap����������� ������������������ Demo
http://www.youtube.com/watch?v=UAGAB-yT0lQ
Tools����������� ������������������ for����������� ������������������ CoffeeScript
js2coffeeconvert����������� ������������������ JavaScript����������� ������������������ to����������� ������������������ CoffeeScript
http://js2coffee.org/
CoffeeTableBookmarklet����������� ������������������ for����������� ������������������ CoffeeScript����������� ������������������ Console
http://code.alecperkins.net/coffeetable/
cakeSimple����������� ������������������ Build����������� ������������������ System����������� ������������������ like����������� ������������������ Make
https://github.com/jashkenas/coffee-script/wiki/[HowTo]-Compiling-and-Setting-Up-Build-Tools
CoffeeKupMarkup����������� ������������������ as����������� ������������������ CoffeeScript
http://coffeekup.org/
Resources
http://www.flickr.com/photos/41754875@N00/5942994577
http://www.flickr.com/photos/61172365@N00/481680379