Your SlideShare is downloading. ×
Introduction to CoffeeScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to CoffeeScript

425
views

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
425
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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