CoffeeScript - TechTalk 21/10/2013
Upcoming SlideShare
Loading in...5
×
 

CoffeeScript - TechTalk 21/10/2013

on

  • 484 views

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 ...

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!

Statistics

Views

Total Views
484
Views on SlideShare
484
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CoffeeScript - TechTalk 21/10/2013 CoffeeScript - TechTalk 21/10/2013 Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • CoffeeScript { functions, use of parens } Console: 27 10
  • 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
  • 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 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
  • 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
  • CoffeeScript { existential operator } Console: 9715 ZM 16
  • 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
  • CoffeeScript { instead of typeof, we can use a trick } 18
  • CoffeeScript { another example of destructuring assignment } Console: City: Groningen, NL Temp: -10 Forecast: Mostly Snow 19
  • 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 button with class ‘.show’ is pressed) Showing user with id 1 25
  • CoffeeScript { or= } Console: empty something 26
  • 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
  • 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
  • CoffeeScript & AngularJS 29
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Let’s write some CoffeeScript
  • 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/