Post on 10-May-2015
description
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