Slide 1

Slide 1 text

CoffeeScript JavaScript in a simple way Open Tech Talk – 22 Jan 2011 @HackerSpacePP @lchanmann

Slide 2

Slide 2 text

CoffeeScript CoffeeScript ● One-to-one with JavaScript ● Better functional syntax ● Compiles to the good parts

Slide 3

Slide 3 text

Why CoffeeScript? Why CoffeeScript? ● Less code ● Readability ● Easy to understand, and maintain ● But … you should know how JavaScript's concept work

Slide 4

Slide 4 text

JavaScript JavaScript

Slide 5

Slide 5 text

CoffeeScript CoffeeScript

Slide 6

Slide 6 text

JavaScript JavaScript

Slide 7

Slide 7 text

Coffee Coffee

Slide 8

Slide 8 text

JavaScript JavaScript

Slide 9

Slide 9 text

CoffeeScript CoffeeScript

Slide 10

Slide 10 text

square = (x) -> x * x area = (x, y) -> x * y cube = (x) -> x * square x Functions Functions

Slide 11

Slide 11 text

kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 Objects Objects kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } }; >>

Slide 12

Slide 12 text

outer = 1 change = -> inner = -1 outer = 10 inner = change() Lexical Scoping / Variable Safety Lexical Scoping / Variable Safety (function() { var change, inner, outer; outer = 1; change = function() { var inner; inner = -1; return (outer = 10); }; inner = change(); }).call(this); >>

Slide 13

Slide 13 text

gold = silver = rest = "unknown" awardMedals = (first, second, others...) -> gold = first silver = second rest = others Splats... Splats...

Slide 14

Slide 14 text

class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved " + meters + "m." class Snake extends Animal move: -> alert "Slithering..." super 5 sam = new Snake "Sammy the Python" sam.move() OOP OOP

Slide 15

Slide 15 text

The Rest... The Rest... ✔ Existential operator ✔ Pattern matching with object literals ✔ Switch/When/Else ✔ Chained comparison ✔ Array comprehension ✔ Array slicing and splicing with ranges ✔ Everything is an expression; always a return value ✔ Function binding syntactical sugar ✔ String and RegExp Interpolation ✔ Multiline Strings, Heredocs, and Block Comments ✔ "text/coffeescript" script tags with extras/coffee-script.js ✔ It's just JavaScript

Slide 16

Slide 16 text

Last but not lease Last but not lease ● http://ryan.mcgeary.org/talks/2010/10/21/coffeescript-novarug/ ● http://www.slideshare.net/mtaberski/coffee-script-6089214 ● http://jashkenas.github.com/coffee-script/

Slide 17

Slide 17 text

Lim Chanmann Lim Chanmann http://chanmannlim.wordpress.com/ @lchanmann [email protected] InSTEDD