JS

1. CoffeeScript
What’s good?
2010.10.10
OutsideratFRENDS

2. “ CoffeeScriptisBeautiful
INeverWanttoWritePlain
”
JavaScriptAgain
SamStephenson
(prototype.jscreator)

3. 좋은것과
익숙하지
않은것을
구별하기가
쉽지않다.

4. Comparing
JavaScriptCoffeeScript

5. FunctionSyntax

6. $(a).click(function(event){
$(this).addClass(busy);
})

7. $(a).click(function(event){
$(this).addClassbusy
})

8. $(a).click(function(event){
$(@).addClassbusy
})

9. $(a).click(event)-
$(@).addClassbusy

10. LoopSyntax

11. vardata=[];
for(vari=0;i84;i++){
data.push(i*10/84);
}

12. data=[]
foriin[0..83]
data.push(i*10/84)

13. data=[]
data=i*10/84foriin[0..83]

14. data=i*10/84foriin[0..83]

15. List
Comprehensions

16. init_board:function(){
this.board=newArray(WIDTH);
for(varx=0;xthis.board.length;x++){
this.board[x]=newArray(HEIGHT)
for(vary=0;ythis.board[x].length;y++){
this.board[x][y]=false;
}
}
}

17. init_board:-
this.board=newArray(WIDTH)
forxinthis.board
this.board[x]=newArray(HEIGHT)
foryinthis.board[x]
this.board[x][y]=false

18. init_board:-
@board=forxin[0...WIDTH]
this.board[x]=newArray(HEIGHT)
foryinthis.board[x]
this.board[x][y]=false

19. init_board:-
@board=forxin[0...WIDTH]
foryin[0...HEIGHT]
false

20. init_board:-
@board=
(falseforyin[0...HEIGHT]forxin[0...WIDTH])

21. SettingFields

22. constructor:function(keys,tokens){
this.keys=keys;
this.tokens=tokens;
}

23. constructor:(keys,tokens)-
this.keys=keys
this.tokens=tokens

24. constructor:(keys,tokens)-
@keys=keys
@tokens=tokens

25. constructor:(@keys,@tokens)-

26. Defensive
Programming

27. varcountry=null;
if(typeofmodel!=='undefined'
model
typeofmodel.profile==='function'){
varprofile=model.profile();
if(profile
profile.location
profile.location.country){
country=profile.location.country.toString();
}
}

28. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
profile.location
profile.location.country
country=profile.location.country.toString()

29. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
profile.location
country=profile.location.country?.toString()

30. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
ifprofile
country=profile.location?.country?.toString()

31. country=null
iftypeofmodelisnt'undefined'
model
typeofmodel.profileis'function'
profile=model.profile()
country=profile?.location?.country?.toString()

32. country=null
iftypeofmodelisnt'undefined'
model
profile=model.profile?()?
country=profile?.location?.country?.toString()

33. country=null
profile=model?.profile?()?
country=profile?.location?.country?.toString()

34. profile=model?.profile?()?
country=profile?.location?.country?.toString()

35. profile=model?.profile?()?
country=profile
?.location?.country?.toString()

36. country=model?.profile?()
?.location?.country?.toString()

37. BareObjects

38. $.ajax({
url:path,
timeout:5,
data:{from:workspace},
dataType:html,
success:function(data){
return$(#result).html(data);
}
});

39. $.ajax({
url:path,
timeout:5,
data:{from:workspace},
dataType:html,
success:(data)-
return$(#result).html(data)
})

40. $.ajax{
url:path
timeout:5
data:{from:workspace}
dataType:html
success:(data)-
$(#result).htmldata
}

41. $.ajax
url:path
timeout:5
data:
from:workspace
dataType:html
success:(data)-
$(#result).htmldata

42. FunctionBinding

43. functionrequest(){
$.get(this.person.url,
(function(data){
$(this.el).html(data);
}).bind(this)
)
}

44. request=()-
$.get(this.person.url,
((data)-
$(this.el).html(data);
).bind(this)
)

45. request=()-
$.get(this.person.url,
((data)-
$(@el).htmldata
).bind(@)
)

46. request=()-
$.get(this.person.url,
(data)=
$(@el).htmldata
)

47. request=()-
$.getthis.person.url,
(data)=
$(@el).htmldata

48. BadThings

49. Compile
is
inconvenience

50. Debugging
is
hard

51. But
It’sComing

52. ShortSourceMap
Demo
http://www.youtube.com/watch?v=UAGAB-yT0lQ

53. ToolsforCoffeeScript

54. js2coffee
convertJavaScripttoCoffeeScript
http://js2coffee.org/

55. CoffeeTable
BookmarkletforCoffeeScriptConsole
http://code.alecperkins.net/coffeetable/

56. cake
SimpleBuildSystemlikeMake
https://github.com/jashkenas/coffee-script/wiki/[HowTo]-Compiling-and-Setting-Up-Build-Tools

57. CoffeeKup
MarkupasCoffeeScript
http://coffeekup.org/

58. Thankyou.
@Outsideris
outsideris@gmail.com
http://blog.outsider.ne.kr

59. Resources
http://www.flickr.com/photos/41754875@N00/5942994577
http://www.flickr.com/photos/61172365@N00/481680379