Your SlideShare is downloading. ×
0
…

Bartosz Skorupski, Tomasz Szatkowski
Who likes JavaScript?
Rise your hand, please!
JAVASCRIPT
●
●

Runs in browser environment,
Has AWESOME features
UGLY!
How to make it better?
And preserve what’s best of it
Let’s standardize it!
ECMAScript Harmony
Use a compiler!
and get new features right now
CoffeeScript!
●
●
●
●

Expose the good parts of JS in a simple way
Compiles one-to-one into the equivalent JS, no interpre...
Installing CS
npm install -g coffee-script
coffee -v
Command Line Usage
coffee -w -o javascripts/ -c coffeescripts/
coffee -j javascripts/app.js -c coffeescripts/*.coffee
date = if friday then weekend else weekday
# eat lunch
eat = (what) -> "om nom noming #{what}"
eat food for food in ['toas...
var Animal, date, eat, food, _i, _len, _ref;
date = friday ? weekend : weekday;
eat = function(what) {
return "om nom nomi...
It has much to offer
better switch, function binding,
for in, for of, handy literals (@, ->),
splats, classes, default arg...
VARIABLES
year = 2014
speed = 50
STRINGS
first_name = "Jan"
full_name = first_name + " Kowalski"
full_name = "#{first_name} Kowalski"
FUNCTIONS
square = (x = 2) -> x * x

# square(x)
Immediate functions
for i in [0...3]
do (i) ->
setTimeout ( -> console.log(i) ), 1000
0
1
2
Function binding
...
# @prop <=> this.prop
@prop = "Caller's scope"
func = => console.log(@prop)
func()
...
Caller's scope
ARRAYS
names = ["Marty", "George", "Dave"]
OBJECTS
classicalNotation = {
age: 11,
name: 'Alice'
};

simplifiedNotation =
age: 11
name: 'Alice'
RANGES
days = [1..7]
tuesday_to_friday = days[1..4]
range = [1...4] # 1, 2, 3

# 2, 3, 4, 5
SPLAT
merge = (head, tail...) -> [head].concat(tail)
Classes, Inheritance, Super
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move:...
Use cases
CoffeeScript with Backbone
define ["Backbone", "someModule"], (Backbone, someModule) ->
class SomeClass extends Backbone.V...
Debugging
CoffeeScript generates source mapping. Currently
works under Google Chrome and Mozilla Firefox.
Thank you
Questions
Upcoming SlideShare
Loading in...5
×

Introduction to CoffeeScript

451

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
451
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to CoffeeScript"

  1. 1. … Bartosz Skorupski, Tomasz Szatkowski
  2. 2. Who likes JavaScript? Rise your hand, please!
  3. 3. JAVASCRIPT ● ● Runs in browser environment, Has AWESOME features
  4. 4. UGLY!
  5. 5. How to make it better? And preserve what’s best of it
  6. 6. Let’s standardize it! ECMAScript Harmony
  7. 7. Use a compiler! and get new features right now
  8. 8. CoffeeScript! ● ● ● ● Expose the good parts of JS in a simple way Compiles one-to-one into the equivalent JS, no interpretation at runtime You can use any existing JS library seamlessly from CS (and vice-versa) Output is readable and pretty-printed, will work in every JS runtime and tends to run as fast or faster than the equivalent handwritten JS
  9. 9. Installing CS npm install -g coffee-script coffee -v
  10. 10. Command Line Usage coffee -w -o javascripts/ -c coffeescripts/ coffee -j javascripts/app.js -c coffeescripts/*.coffee
  11. 11. date = if friday then weekend else weekday # eat lunch eat = (what) -> "om nom noming #{what}" eat food for food in ['toast', 'cheese', 'wine'] class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." new Animal('dog').move 3
  12. 12. var Animal, date, eat, food, _i, _len, _ref; date = friday ? weekend : weekday; eat = function(what) { return "om nom noming " + what; }; _ref = ['toast', 'cheese', 'wine']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food); } Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); new Animal('dog').move(3);
  13. 13. It has much to offer better switch, function binding, for in, for of, handy literals (@, ->), splats, classes, default arguments, destructuring assignment, ranges
  14. 14. VARIABLES year = 2014 speed = 50
  15. 15. STRINGS first_name = "Jan" full_name = first_name + " Kowalski" full_name = "#{first_name} Kowalski"
  16. 16. FUNCTIONS square = (x = 2) -> x * x # square(x)
  17. 17. Immediate functions for i in [0...3] do (i) -> setTimeout ( -> console.log(i) ), 1000 0 1 2
  18. 18. Function binding ... # @prop <=> this.prop @prop = "Caller's scope" func = => console.log(@prop) func() ... Caller's scope
  19. 19. ARRAYS names = ["Marty", "George", "Dave"]
  20. 20. OBJECTS classicalNotation = { age: 11, name: 'Alice' }; simplifiedNotation = age: 11 name: 'Alice'
  21. 21. RANGES days = [1..7] tuesday_to_friday = days[1..4] range = [1...4] # 1, 2, 3 # 2, 3, 4, 5
  22. 22. SPLAT merge = (head, tail...) -> [head].concat(tail)
  23. 23. Classes, Inheritance, Super
  24. 24. 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()
  25. 25. Use cases
  26. 26. CoffeeScript with Backbone define ["Backbone", "someModule"], (Backbone, someModule) -> class SomeClass extends Backbone.View initialize: -> @prop = 9 render: -> someModule.doSomething()
  27. 27. Debugging CoffeeScript generates source mapping. Currently works under Google Chrome and Mozilla Firefox.
  28. 28. Thank you Questions
  1. A particular slide catching your eye?

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

×