CoffeeScript: A beginner's presentation for beginners copy
Download as PPT, PDF1 like1,683 views
CoffeeScript is an alternative syntax that compiles into JavaScript, aiming to simplify its complex parts. It has gained significant popularity since 2009, being the language of choice for projects like Dropbox and GitHub, making it essential for developers and designers to learn. The syntax of CoffeeScript promotes concise coding without requiring semicolons, optional commas, and easy-to-read constructs similar to Ruby or Python.
![# 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?](https://image.slidesharecdn.com/coffeescriptabeginnerspresentationforbeginnerscopy-130927065512-phpapp01/85/CoffeeScript-A-beginner-s-presentation-for-beginners-copy-4-320.jpg)
![# 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.](https://image.slidesharecdn.com/coffeescriptabeginnerspresentationforbeginnerscopy-130927065512-phpapp01/85/CoffeeScript-A-beginner-s-presentation-for-beginners-copy-5-320.jpg)
![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
]](https://image.slidesharecdn.com/coffeescriptabeginnerspresentationforbeginnerscopy-130927065512-phpapp01/85/CoffeeScript-A-beginner-s-presentation-for-beginners-copy-10-320.jpg)
![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)](https://image.slidesharecdn.com/coffeescriptabeginnerspresentationforbeginnerscopy-130927065512-phpapp01/85/CoffeeScript-A-beginner-s-presentation-for-beginners-copy-12-320.jpg)
![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)](https://image.slidesharecdn.com/coffeescriptabeginnerspresentationforbeginnerscopy-130927065512-phpapp01/85/CoffeeScript-A-beginner-s-presentation-for-beginners-copy-13-320.jpg)
CoffeeScript: A beginner's presentation for beginners copy
- 1. Intro to CoffeeScript A beginner’s presentation for beginners
- 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. 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. # 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. # 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. 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. 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. 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. 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. 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. So that's cool... What other neat things can be done this easily?
- 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. 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. 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. 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/