SK Manvendra

*CoffeeScriptAn Introduction

*Aroma of Coffee…

*Getting and running it

*Variables

*“Interpolation” and “““Heredocs”””

*Statements

*Functions and Splats…

*Collections, Iterations and Comprehensions

*Classes

*Example app

*What is this all about???

*CoffeeScript is just compiled down JavaScript.

*We can write JS the way it should be…

*CS is just Syntactical Sugar for JS.

*If you love JS, you’ll love CS…

*Let’s get to know this…

This is becoming BUZZ WORD these days…

However, CS is more than

Syntactical Sugar

CS = -> CoffeeScript

JS = -> JavaScript

*Where can I find this?

*CS depends on Node.js environment to get installed. However CS doesn’t need Node.js to run on the machine.

*How can I install the Node.js?

*After node is installed, use NPM

to install the CS.

*npm install –g coffee-script

Perhaps, SUROOR’s blog may rescue you

here…

Node Package Manager

Pay attention to “-g”

*Let’s sip the Coffee…

*On command prompt type coffee. It will drop you in REPL mode.

*Compile a file.

*Compile a folder.

*Putting output in

different folder.

Read Eval Print Loop

coffee –c file.coffee

coffee –c src/

coffee –c src/ -o lib/

*Magic compile…

*You can get compile your Coffee files to JavaScript whenever you change them, automatically!

*The –w switch makes it happen.coffee –cw src/ -o lib/

-w switch also watches for subdirectories

*Watch out that SPACE!!!

*White space considerations.

*Indent your code properly.

*No need to use special cartoon

like characters in the code.

*Freedom from that semicolon.

CS is very sensitive towards it

Why would I need to do so?

Those are really obstructive

Though I’m optional in JS

You’ll need me when writing multiple lines of

code in a single shot

Variable and Scope…

*Use of the var keyword is strictly prohibited.

*CoffeeScript saves us from creating global variables.

*What if I need to create one/more?

We can attach them to the global window object.

But be cautious!!!

Then how would I create one?

*Interpolation, Heredocs and

RegEx…

*“Hope if it prints the value of #{interest}.”

*A multiline string which may have

interpolation inside it.

*var regEx = /\d{3}-\d{8}/

#{} can contain any valid

CoffeeScript inside the string

This RegEx could be worse.

regEx = ///\d{3}-\d{8}

///

Use ””” quotes that’ll even

preserve the space

*Comments…

*# I’ll not be visible in compiled JavaScript.

*###

I think I may put the license and the

information here, and it’ll be visible in the

compiled JavaScript.

###

*Operators

*== or ===

*!= or !==

*?

Equal or Identical (equal and of the same

type)?

Not equal or Not identical?

Existential operator3 Usage• Variable declarations check

?• Object existence

?.• Is member a method

?()

*Aliases

CoffeeScript JavaScript

*is ===

*isnt !==

*not !

*and &&

*or ||

*true, yes, no true

*false, no, off false

*@, this this

*:: prototype

*of in

*in N/A

Word of caution!!!isnt and is not are

not same

*If/Unless…

*if var then alert “true”

*if var then alert “true” else alert “false”

*unless var then alert “false” else alert “true”

alert “true” if var

That’s ternary ?:

If the condition is false

*Switch…

*switch var

when “val1”, “val2”

when “val3”

else

We don’t need the break keyword anymore

*Functions and parameters…

*->

*do ->

*funcName = (param1, param2) -> alert “Hi”

*someFunc = (param = val) ->

*I’ll always return the last statement.

I’ll be parsed to (function() {});

Though I’m Anonymous

Instant function calling

However if you need, you can return

explicitly always

If you really don’t want to return anything at the end of ->, use

return null or return undefined

Functions can take default arguments

Hope if I could call the

-> without params

*Splats… …

*Variable number of arguments to the function.

*someFunc = (etc…) ->

Believe me it’s one of the best

aroma of CoffeeScript

*Arrays…

*Arrays in CoffeeScript are no different than in JavaScript.

*Searching.

*Swapping.

*Ranges.

*Slicing arrays.

*Splicing/Replacing array values.

[x, y] = [y, x]Maximum size is 21

*Objects/Hashes…

*Creating objects with literal syntax.

*Creating objects from variables.

*Getting and setting attributes.

JSON is breeze here

*Loops and Iterations…

*for val in array

*for key, val of object

*while condition

You may append by and when

You may append when

own may come here

Remember the hasOwnProperty

method?

It’s our old and only

friend here

until is not bad option either.

*Comprehensions…

*What these are?

Comprehensions are, essentially, loops and

their code blocks on the same line.

*Classes…

*class Employee

*The constructor function

*Inheritance

*Class level functions

*Prototype

You’ll start to love

CoffeeScript

You know how the constructor

works

But there’s some hack here

Mmm… not exactlyBut it’s

Also known as non-instance

functions

Don’t dare to forget me

*CoffeeScript in Browser…

*<script type=“text/coffeescript”>

// Some CoffeeScript here

</script>

Before it include a reference to the url http://jashkenas.github.com/coffee-script/

extras/coffee-script.js

*jQuery & Example app…

*How can I write jQuery using CoffeeScript?

Please see the example app

*Where it may fit???

*As a JavaScript replacement.

*Writing jQuery in your projects.

*Writing of JavaScript library easily.

*Writing of jQuery plugins easily too.

*At last: The things you expect from JavaScript you can do in CoffeeScript very easily.

*Questions???

*Thank you for sipping the Coffee

with ME…

*Now it’s your turn to make some for yourself.

*Bibliography

*O’Reilly The Little Book on CoffeeScript By Alex MacCaw

*PacktPub CoffeeScript Programming with jQuery, Rails and Node.js By Michael Erasmus

*The Pragmatic Programmers CoffeeScript Accelerated JavaScript Development By Trevor Burnham

*O’Reilly Programming in CoffeeScript By Mark Bates