0
Intro to CoffeeScript
A beginner’s presentation for beginners
Don’t I have to be a JSWiz?
Not even close. (But it does help)
Developer/Designer/Unicorn
Little Experience required
Simpl...
What is CoffeeScript?
CoffeeScript is an alternate syntax that compiles into Javascript. According to
the author, it is an...
# Assignments
num = -5
isPositive = true
# Objects
Setup = ->
num: num
add: (i) ->
num + i
# Conditionals
num = 5 if isPos...
# Assignments
num = -5
isPositive = true
# Objects
Setup = ->
num: num
add: (i) ->
num + i
# Conditionals
num = 5 if isPos...
Installation
CoffeeScript requires Node.js and the NPM Package Manager or Ruby, which are
installed thusly:
Node.js --
htt...
Installation, Continued
Now we can actually install CoffeeScript! YAY!!
Global :
$ sudo npm install -g coffee-script
Proje...
Now what?
Let’s play around with some ideas.
JavaScript, as of EC5, doesn’t have defined class structures and is mostly a
...
Classes
class Car
constructor: (@name) ->
engine: (valves) ->
console.log(@name + “ is a V-#{valves}.”
class Ford extends ...
And? In JavaScript?
var Car, Ford, Honda, fastCar, slowCar, _ref, _ref1,
__hasProp = {}.hasOwnProperty,
__extends = functi...
So that's cool...
What other neat things can be done this
easily?
JSON:
teachers =
teacher:
name: "Patrick D."
company: "Rightleaf, LLC"
teacher:
name: "Phil P."
company: "Rightleaf, LLC"
...
One last
"Pretty Cool Thing"
"Pretty Cool Thing"
Modules!!!!
module.exports = (engine, options = {}) ->
options.blacklist ...
Arg(h)s!!
(The good ones)
-o Output Directory
-c Compile Directory
-w Watch this Directory
-m Map JS to CS files for Debug...
Resources
CoffeeScript Home Page:
http://coffeescript.org
Using CoffeeScript with Node and such:
http://ristrettolo.gy (on...
Upcoming SlideShare
Loading in...5
×

CoffeeScript: A beginner's presentation for beginners copy

868

Published on

A short presentation on CoffeeScript for people who may not have much, or any, experience with it. It is a great way to learn JavaScript, as well as a fantastic syntactic sugar fro those who already know JavaScript.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "CoffeeScript: A beginner's presentation for beginners copy"

  1. 1. Intro to CoffeeScript A beginner’s presentation for beginners
  2. 2. Don’t I have to be a JSWiz? Not even close. (But it does help) Developer/Designer/Unicorn Little Experience required Simple syntax Better transition from other language patterns Some cool points - Classes - No semicolons (YAY!) - Commas optional - Arrow function notation
  3. 3. What is CoffeeScript? CoffeeScript is an alternate syntax that compiles into Javascript. According to the author, it is an ‘attempt to expose the good parts of JavaScript in a simple way. Popularity CoffeeScript has gained much popularity since it’s inception as a GitHub gist in 2009. It has become the ‘x’-script of choice for some projects you might have heard of, including Dropbox and GitHub, as well as many other projects you’ve never heard of. Usage The widespread usage across many web apps makes this language a ‘should do’ for any designer or developer. Even if you don’t decide to use it, you will most likely come across it in a future project. So, DTRT and learn a thing-or- two.
  4. 4. # Assignments num = -5 isPositive = true # Objects Setup = -> num: num add: (i) -> num + i # Conditionals num = 5 if isPositive # Arrays arr = [1,2,3,4,5] var num, isPositive, Setup, arr, plusOne; num = -5; isPositive = true; Setup = function() { num: num, add: function(i) { return num + i } }; if(isPositive) { num = 5; } arr = [1,2,3,4,5]; So, what does it look like?
  5. 5. # Assignments num = -5 isPositive = true # Objects Setup = -> num: num add: (i) -> num + i # Conditionals num = 5 if isPositive # Arrays arr = [1,2,3,4,5] - # -- for Comments and - ### words -- for Block Comments ### - Semicolons not required! (W00t!! 11!) - Commas are not required, but can be helpful. - Indentation/syntax depended. (Similar in nature to Ruby or Python) - Concise syntax. - Parentheses and Curlies are not required, but can be helpful. - Fun to type! - Easier to read! Example examined.
  6. 6. Installation CoffeeScript requires Node.js and the NPM Package Manager or Ruby, which are installed thusly: Node.js -- https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager -- OR -- Mac OS X : brew install node Ubuntu? : apt-get install node Everything : http://nodejs.org/download/ for Installer ackages NPM -- curl https://npmjs.org/install.sh | sh Ruby -- Mac OS X : comes preinstalled Linux : may come preinstalled Windows : http://rubyinstaller.org/
  7. 7. Installation, Continued Now we can actually install CoffeeScript! YAY!! Global : $ sudo npm install -g coffee-script Project : $ npm install coffee-script Alternatively, through GitHub (I’ve never done this one) $ npm install -g http://github.com/jashkenas/coffee-script/tarball/master and then, go to the coffee-script directory and type: $ sudo bin/cake install
  8. 8. Now what? Let’s play around with some ideas. JavaScript, as of EC5, doesn’t have defined class structures and is mostly a functional, object-oriented language. “But,” I can hear some protest, “you can use things like Traceur and the EC6 Module Transpiler to write JavaScript with classes and other new constructs available in Ecmascript 6.” Well. If you’re using those things, awesome. Even you can benefit from CS!
  9. 9. Classes class Car constructor: (@name) -> engine: (valves) -> console.log(@name + “ is a V-#{valves}.” class Ford extends Car engine: -> super 6 class Honda extends Car engine: -> super 4 slowCar = new Honda “Prius” fastCar = new Ford “Cobra” slowCar.engine()
  10. 10. And? In JavaScript? var Car, Ford, Honda, fastCar, slowCar, _ref, _ref1, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Car = (function() { function Car(name) { this.name = name; ({ engine: function(valves) { return console.log(this.name + ' is a V#{valves}.'); } }); } return Car; })(); (etc...) [ http://coffeescript.org/#try:class%20Car%0A%20%20constructor%3A%20(%40name)%20-%3E%0A%20%20%20%20engine%3 ]
  11. 11. So that's cool... What other neat things can be done this easily?
  12. 12. JSON: teachers = teacher: name: "Patrick D." company: "Rightleaf, LLC" teacher: name: "Phil P." company: "Rightleaf, LLC" Ranges: days = [1..7] Existential Operator: login() if not user? This and This! Splats: giveShips = (one, two, three, rest...) -> addOnesToShip one, 10 addOnesToShip two, 6 addOnesToShip three, 2 for ship in rest addOnesToShip ship, 1 ships = ['rat', 'dog', 'cat', 'bull', 'horse'] giveShips ships... (need ... to ensure assignment)
  13. 13. One last "Pretty Cool Thing" "Pretty Cool Thing" Modules!!!! module.exports = (engine, options = {}) -> options.blacklist ?= [] engine = require(engine) if typeof engine is 'string' compile: (template, data) -> template = engine.compile(template, data) (data) -> for k, v of data.params if typeof data[k] is 'undefined' and k not in options.blacklist data[k] = v template(data) (sample taken and modified from https://github.com/mauricemach/zappa/blob/master/src/zappa.coffee for effect)
  14. 14. Arg(h)s!! (The good ones) -o Output Directory -c Compile Directory -w Watch this Directory -m Map JS to CS files for Debugging -b Remove safety wrapper (a good thing IMHO) It'll look something like this: v--Command v---to here v--- In all these CS files coffee -mj -o /javascripts/allYourJase.js -cw /coffeescripts/*.coffee ^^--^--Map, Join and Output ^---Compile and Watch for saves Arguments for 'coffee', or Compiling like a pirate
  15. 15. Resources CoffeeScript Home Page: http://coffeescript.org Using CoffeeScript with Node and such: http://ristrettolo.gy (online book) Examples: http://en.wikipedia.org/wiki/CoffeeScript http://amix.dk/blog/post/19612 (neet post about CoffeeScript stuff, in general) Cool Tuts: http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript This guy hates it, just in case you want the other point of view. CoffeeScript: less typing, bad readability… http://ceronman.com/2012/09/17/coffeescript-less-typing-bad-readability/
  1. A particular slide catching your eye?

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

×