Introduction to CoffeeScript

  • 389 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
389
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. … Bartosz Skorupski, Tomasz Szatkowski
  • 2. Who likes JavaScript? Rise your hand, please!
  • 3. JAVASCRIPT ● ● Runs in browser environment, Has AWESOME features
  • 4. UGLY!
  • 5. How to make it better? And preserve what’s best of it
  • 6. Let’s standardize it! ECMAScript Harmony
  • 7. Use a compiler! and get new features right now
  • 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. Installing CS npm install -g coffee-script coffee -v
  • 10. Command Line Usage coffee -w -o javascripts/ -c coffeescripts/ coffee -j javascripts/app.js -c coffeescripts/*.coffee
  • 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. 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. It has much to offer better switch, function binding, for in, for of, handy literals (@, ->), splats, classes, default arguments, destructuring assignment, ranges
  • 14. VARIABLES year = 2014 speed = 50
  • 15. STRINGS first_name = "Jan" full_name = first_name + " Kowalski" full_name = "#{first_name} Kowalski"
  • 16. FUNCTIONS square = (x = 2) -> x * x # square(x)
  • 17. Immediate functions for i in [0...3] do (i) -> setTimeout ( -> console.log(i) ), 1000 0 1 2
  • 18. Function binding ... # @prop <=> this.prop @prop = "Caller's scope" func = => console.log(@prop) func() ... Caller's scope
  • 19. ARRAYS names = ["Marty", "George", "Dave"]
  • 20. OBJECTS classicalNotation = { age: 11, name: 'Alice' }; simplifiedNotation = age: 11 name: 'Alice'
  • 21. RANGES days = [1..7] tuesday_to_friday = days[1..4] range = [1...4] # 1, 2, 3 # 2, 3, 4, 5
  • 22. SPLAT merge = (head, tail...) -> [head].concat(tail)
  • 23. Classes, Inheritance, Super
  • 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. Use cases
  • 26. CoffeeScript with Backbone define ["Backbone", "someModule"], (Backbone, someModule) -> class SomeClass extends Backbone.View initialize: -> @prop = 9 render: -> someModule.doSomething()
  • 27. Debugging CoffeeScript generates source mapping. Currently works under Google Chrome and Mozilla Firefox.
  • 28. Thank you Questions