Underneath  that  awkward  Java-­‐‑esque  patina,  
JavaScript  has  always  had  a  gorgeous  heart!
h<ps://github.com/ja...
Intro
static  analysis  by  design
CoffeeScript  code  compiles  one-­‐‑to-­‐‑one  to  JavaScript
no  runtime  checking  (i...
Compile *.coffee
coffee  -­‐‑o  lib/  -­‐‑cw  src/  (and  sub-­‐‑directories)
in  the  alphabetical  order  of  the  files  ...
Serve *.coffee
write
main.coffee

(1)  compile  *.coffee  file  in  runtime  when  it  is  
requested  (and  if  there  is  ...
Serve *.coffee
write
main.coffee

(2)  compile  during  development,  
generate  *.js  files  and  serve  those,  
include ...
Serve *.coffee
django-­‐‑compressor
<script  type="ʺtext/coffeescript"ʺ  src="ʺ{%  static  'ʹrewards.coffee'ʹ  %}"ʺ></script...
CoffeeScript
whitespace  is  significant
no  semicolons
it  removes  global  variables
need  to  be  careful  with  functio...
CoffeeScript
aliases  for  this  is  @  and  for  accessing  the  prototype  is  ::
solves  the  issues  with  “with”  sta...
CoffeeScript
function  definitions,  CoffeeScript  uses  only  function  
expressions  and  discards  completely  declarativ...
CoffeeScript
{ functions, use of parens }

Console:
27

10
CoffeeScript
{ objects, arrays, splash..., string interpolation }

Console:
Gold: Michael Phelps in 9.68
Silver: Liu Xiang...
CoffeeScript
{ loops, comprehensions, slicing, when, isnt, unless }

Console:
PY

12

:)
CoffeeScript
{ iterate over object properties }

Console:
max is 10,ida is 9,tim is 11

13
CoffeeScript
{ while, conditional assignment }

Console:
5 little
4 little
3 little
2 little
1 little

monkeys, jumping on...
CoffeeScript
{ do, loop to generate functions }

Console:
Reading file: file-1 compiled as <file-1, ...file contents...>
R...
CoffeeScript
{ existential operator }

Console:
9715 ZM
16
CoffeeScript
{ classes, inheritance, destructuring assignment }

Console:
char0: firstName -> Tom
char0: lastName -> and J...
CoffeeScript
{ instead of typeof, we can use a trick }

18
CoffeeScript
{ another example of destructuring assignment }

Console:
City: Groningen, NL

Temp: -10 Forecast: Mostly Sno...
CoffeeScript
{ using the window to create top level variables }

20
CoffeeScript
{ function binding with the fat arrow => }

Console:
Purchase for customer 345 and cart cart_45654
21
CoffeeScript
{ switch statements, chained comparisons }

Console:
Grade: D+
22
CoffeeScript
{ exceptions }

Console:
Ops exception ReferenceError: Undefined is not defined
finally...

23
CoffeeScript
{ use of mixins when inheritance is not suited }

24
CoffeeScript
{ use of mixins when inheritance is not suited }

Console:
Finding id 1
Creating...
Saving...
(when the butto...
CoffeeScript
{ or= }

Console:
empty something

26
Share Objects
exports  =  this
exports.variable  =  "ʺtest"ʺ
or  if  Node.js,  or  Stitch  is  used  with  CommonJS  which...
JS vs CS
less  code  to  write!  the  example  with  the  fictional  character  
class  was:
100  loc  in  JS,  50  loc  in...
CoffeeScript
&

AngularJS

29
Testing
unit  testing  and  Behaviour-­‐‑driven  Development  (BDD)  with  
the  popular  framework  Jasmine
assaf'ʹs  Zom...
Performance
test  of  operations  on  a  million  floating  point  numbers
CoffeeScript  -­‐‑>  0.164s
CPython  -­‐‑>  0.603...
Performance
test  on  the  8  queens  problem,  more  info  can  be  found  in  [4]
CoffeeScript  -­‐‑>  0.034s
CPython  -­...
Used on...
several  open-­‐‑source  projects
brunch:  HTML5  applications  made  easy
h<ps://github.com/brunch/brunch

zom...
What does the
future hold?
new  features  are  coming  with  the  new  EcmaScript6  [5]
(define  block-­‐‑local  vars),  de...
Little Book on
CoffeeScript
“ CoffeeScript  is  ge<ing  much  wider  use  and  integration,  such  
as  being  a  default  ...
Let’s write some
CoffeeScript
References
[1]  h<p://bonsaiden.github.io/JavaScript-­‐‑Garden/#types.equality
[2]  CoffeeScript  recipes  for  the  commun...
Upcoming SlideShare
Loading in...5
×

CoffeeScript - TechTalk 21/10/2013

402

Published on

CoffeeScript is a simple and elegant language that keeps the "good" parts of Javascript and discards those that cause confusion and consequently bugs. Going through this presentation, you can get a quick introduction to CoffeeScript. I hope you enjoy it!

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
402
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "CoffeeScript - TechTalk 21/10/2013"

  1. 1. Underneath  that  awkward  Java-­‐‑esque  patina,   JavaScript  has  always  had  a  gorgeous  heart! h<ps://github.com/jashkenas/coffee-­‐‑script Spyros Ioakeimidis | TechTalk 21/10/2013
  2. 2. Intro static  analysis  by  design CoffeeScript  code  compiles  one-­‐‑to-­‐‑one  to  JavaScript no  runtime  checking  (interpretation  at  runtime) literate  mode,  you  can  write  markdown  document,  which   can  contain  executable  CoffeeScript  code 2
  3. 3. Compile *.coffee coffee  -­‐‑o  lib/  -­‐‑cw  src/  (and  sub-­‐‑directories) in  the  alphabetical  order  of  the  files  (as  they  are  found  in  the  file  system) coffee  -­‐‑j  lib/main.js  -­‐‑cw  src/ merge  *.coffee  files  into  one  merged.js  file,  again  in  the  alphabetical  order   the  compiler  finds  them  in  the  file  system it  can  also  be  used  in  strict  mode  (DEBUG  =  True) 3
  4. 4. Serve *.coffee write main.coffee (1)  compile  *.coffee  file  in  runtime  when  it  is   requested  (and  if  there  is  a  newer  version),   cache  does  not  work  as  usual  (gets  the   same  file  again,  though  it  is  not  slower) use main.coffee in html client requests main.coffee compile to main.js main.js is served 4
  5. 5. Serve *.coffee write main.coffee (2)  compile  during  development,   generate  *.js  files  and  serve  those,   include  them  in  templates  (precompile   phase) compile main.coffee use main.js file in index.html client requests main.js serve main.js file 5
  6. 6. Serve *.coffee django-­‐‑compressor <script  type="ʺtext/coffeescript"ʺ  src="ʺ{%  static  'ʹrewards.coffee'ʹ  %}"ʺ></script> when  a  file  is  requested,  it  is  compiled,  a  CACHE  directory  is  created  (if  it   does  not  exist)  and  the  *.js  files  are  stored  and  served  from  in  there Stitch,  NodeJS,  or  Rails automatic  runtime  compile  is  included,  and  it  is  transparent in  production,  Rails  will  write  the  compiled  output  to  disk,  ensuring  it'ʹs   cached  and  fast  to  serve 6
  7. 7. CoffeeScript whitespace  is  significant no  semicolons it  removes  global  variables need  to  be  careful  with  functions  and  parens,  e.g. alert  inspect  a alert  inspect            #  gives  error,  is  it  a  function  or  an  argument? alert  inspect(a)  #  this  is  beKer 7
  8. 8. CoffeeScript aliases  for  this  is  @  and  for  accessing  the  prototype  is  :: solves  the  issues  with  “with”  statements,  reserved   keywords,  Number  property  lookups fixes  the  equality  comparisons  ambiguity,  by  using  the  (===)   strict  equality  operator,  e.g.      "ʺ"ʺ                ==      "ʺ0"ʺ                      //  false        0                  ==      "ʺ"ʺ                          //  true        0                  ==      "ʺ0"ʺ                      //  true        false      ==      "ʺfalse"ʺ          //  false      ... *example  taken  from  [1] 8
  9. 9. CoffeeScript function  definitions,  CoffeeScript  uses  only  function   expressions  and  discards  completely  declarative  functions        e.g.  expression  =  function()  {  }  instead  of  function  declaration()  {  } offers  cross-­‐‑browser  compatibility but  there  are  other  things  that  CoffeeScript  can'ʹt  fix eval typeof same  for  instanceof delete,  parseInt() 9
  10. 10. CoffeeScript { functions, use of parens } Console: 27 10
  11. 11. CoffeeScript { objects, arrays, splash..., string interpolation } Console: Gold: Michael Phelps in 9.68 Silver: Liu Xiang in 10.56 Rest: Yao Ming,Allyson Felix,... 11
  12. 12. CoffeeScript { loops, comprehensions, slicing, when, isnt, unless } Console: PY 12 :)
  13. 13. CoffeeScript { iterate over object properties } Console: max is 10,ida is 9,tim is 11 13
  14. 14. CoffeeScript { while, conditional assignment } Console: 5 little 4 little 3 little 2 little 1 little monkeys, jumping on the bed. One fell out and bumped his head. monkeys, jumping on the bed. One fell out and bumped his head. monkeys, jumping on the bed. One fell out and bumped his head. monkeys, jumping on the bed. One fell out and bumped his head. monkey, jumping on the bed. One fell out and bumped his head. 14
  15. 15. CoffeeScript { do, loop to generate functions } Console: Reading file: file-1 compiled as <file-1, ...file contents...> Reading file: file-2 compiled as <file-2, ...file contents...> 15
  16. 16. CoffeeScript { existential operator } Console: 9715 ZM 16
  17. 17. CoffeeScript { classes, inheritance, destructuring assignment } Console: char0: firstName -> Tom char0: lastName -> and Jerry Cartoon Report: Tom and Jerry received 10! char1: firstName -> Amazing char1: lastName -> Spiderman Superhero Report: Amazing Spiderman received 1000! 17
  18. 18. CoffeeScript { instead of typeof, we can use a trick } 18
  19. 19. CoffeeScript { another example of destructuring assignment } Console: City: Groningen, NL Temp: -10 Forecast: Mostly Snow 19
  20. 20. CoffeeScript { using the window to create top level variables } 20
  21. 21. CoffeeScript { function binding with the fat arrow => } Console: Purchase for customer 345 and cart cart_45654 21
  22. 22. CoffeeScript { switch statements, chained comparisons } Console: Grade: D+ 22
  23. 23. CoffeeScript { exceptions } Console: Ops exception ReferenceError: Undefined is not defined finally... 23
  24. 24. CoffeeScript { use of mixins when inheritance is not suited } 24
  25. 25. CoffeeScript { use of mixins when inheritance is not suited } Console: Finding id 1 Creating... Saving... (when the button with class ‘.show’ is pressed) Showing user with id 1 25
  26. 26. CoffeeScript { or= } Console: empty something 26
  27. 27. Share Objects exports  =  this exports.variable  =  "ʺtest"ʺ or  if  Node.js,  or  Stitch  is  used  with  CommonJS  which   provides  modules,  e.g. #  app/models/user.coffee module.exports  =  class  User        constructor:  (@name)  -­‐‑> #  app/app.coffee User  =  require("ʺmodels/user"ʺ) 27
  28. 28. JS vs CS less  code  to  write!  the  example  with  the  fictional  character   class  was: 100  loc  in  JS,  50  loc  in  CS far  more  readable,  less  complex,  and  more  maintainable CoffeeScript  tends  to  run  as  fast,  or  faster  than  hand-­‐‑wri<en   JavaScript however,  CoffeeScript  introduces  another  layer.. no  big  community  yet..  but  it  is  ge<ing  bigger  :) 28
  29. 29. CoffeeScript & AngularJS 29
  30. 30. Testing unit  testing  and  Behaviour-­‐‑driven  Development  (BDD)  with   the  popular  framework  Jasmine assaf'ʹs  Zombie.js,  a  headless,  full-­‐‑stack,  faux-­‐‑browser   testing  library  for  Node.js Testing  with  CoffeeScript:  h<p://goo.gl/U67oKU 30
  31. 31. Performance test  of  operations  on  a  million  floating  point  numbers CoffeeScript  -­‐‑>  0.164s CPython  -­‐‑>  0.603s more  than  3.5x  faster of  course  C++  is  10x  to  30x  faster  :) *algorithms  taken  from  [3] 31
  32. 32. Performance test  on  the  8  queens  problem,  more  info  can  be  found  in  [4] CoffeeScript  -­‐‑>  0.034s CPython  -­‐‑>  0.455s more  than  13x  faster *algorithms  taken  from  [3] 32
  33. 33. Used on... several  open-­‐‑source  projects brunch:  HTML5  applications  made  easy h<ps://github.com/brunch/brunch zombie:  a  headless,  full-­‐‑stack,  faux-­‐‑browser  testing  library   for  Node.js h<ps://github.com/assaf/zombie underscore.coffee:  a  port  of  the  Underscore.js  library  of   helper  functions h<p://coffeescript.org/documentation/docs/underscore.html 33
  34. 34. What does the future hold? new  features  are  coming  with  the  new  EcmaScript6  [5] (define  block-­‐‑local  vars),  destructuring,  parameter  default  values,  rest   (splash...),  spread,  proxies,  weak  map,  generators,  iterators,  array  and   generator  comprehension,  binary  data,  class  syntax,  with  extends,   prototype,  and  super,  modules,  quasis:  multiline,  substitution-­‐‑ready   strings  with  extensibility experimental  javascript  can  be  tried  in  Chrome  by  enabling   the  Experimental  JavaScript  flag  on chrome://flags/#enable-­‐‑javascript-­‐‑harmony *you  can  read  more  in  [6] 34
  35. 35. Little Book on CoffeeScript “ CoffeeScript  is  ge<ing  much  wider  use  and  integration,  such   as  being  a  default  in  Rails  3.1.  Now  is  definitely  the  time  to   jump  on  the  CoffeeScript  train.  The  time  you  invest  in   learning  about  the  language  now  will  be  repaid  by  major   time  savings  later. 35
  36. 36. Let’s write some CoffeeScript
  37. 37. References [1]  h<p://bonsaiden.github.io/JavaScript-­‐‑Garden/#types.equality [2]  CoffeeScript  recipes  for  the  community  by  the  community,   h<p://coffeescriptcookbook.com/ [3]  Smooth  CoffeeScript,  h<p://goo.gl/RjT74k [4]  Eight  Queens  Puzzle,  h<p://en.wikipedia.org/wiki/Eight_queens_puzzle [5]  h<p://espadrine.github.io/New-­‐‑In-­‐‑A-­‐‑Spec/es6/ [6]  h<p://gaslight.co/blog/does-­‐‑coffeescript-­‐‑have-­‐‑a-­‐‑future [7]  Li<le  Book  on  CoffeeScript,  h<p://arcturo.github.io/library/coffeescript/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×