Your SlideShare is downloading. ×
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
Coffee Script
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

Coffee Script

4,656

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,656
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
92
Comments
0
Likes
5
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. Coffee Script an easy way to do JavaScript M ich ał Ta be rs k ipiątek, 3 grudnia 2010
  • 2. Agenda What is it? How it can help us? Overview (a bunch of examples) Using CoffeeScript with Rails Demo Discussionpiątek, 3 grudnia 2010
  • 3. What is CoffeeScript ? General idea != !=piątek, 3 grudnia 2010
  • 4. What is CoffeeScript ? language designed to be compiled into JavaScriptpiątek, 3 grudnia 2010
  • 5. What is CoffeeScript ? - 2 language designed to be a compiled into JavaScript code compiles one-to-one into the equivalent JSpiątek, 3 grudnia 2010
  • 6. What is CoffeeScript ? - 3 language designed to be a compiled into JavaScript code compiles one-to-one into the equivalent JS syntax take advantages of modern OO languages like Ruby, or Pythonpiątek, 3 grudnia 2010
  • 7. What is CoffeeScript ? - 4 language designed to be a compiled into JavaScript code compiles one-to-one into the equivalent JS syntax take advantages of modern OO languages like Ruby, or Python cooperate with already existing JS libraries (like jQuery, Facebook JS SDK, Google API etc.)piątek, 3 grudnia 2010
  • 8. What is CoffeeScript ? - 5 language designed to be a compiled into JavaScript code compiles one-to-one into the equivalent JS syntax take advantages of modern OO languages like Ruby, or Python cooperate with already existing JS libraries (like jQuery, Facebook JS SDK, Google API etc.) pass through JSLint without warnings =)piątek, 3 grudnia 2010
  • 9. How it can help us ? less lines of code with better readability, code easy to understand, and maintain standard code encapsulation and variables protection (no var anymore) but...piątek, 3 grudnia 2010
  • 10. How it can help us ? less lines of code with better readability, code easy to understand, and maintains standard code encapsulation and variables protection (no var anymore) but... even if you are writing code in CoffeeScript you should know how JavaScript`s concepts workpiątek, 3 grudnia 2010
  • 11. Examplespiątek, 3 grudnia 2010
  • 12. Examples Functions CoffeeScript CoffeeScript square = (x) -> x * x fill = (container, liquid = "coffee") -> cube = (x) -> square(x) * x "Filling the #{container} with #{liquid}..." source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 13. Examples - 2 Functions CoffeeScript CoffeeScript square = (x) -> x * x fill = (container, liquid = "coffee") -> cube = (x) -> square(x) * x "Filling the #{container} with #{liquid}..." JavaScript JavaScript var cube, square; var fill; square = function(x) { fill = function(container, liquid) { return x * x; if (liquid == null) { }; liquid = "coffee"; cube = function(x) { } return square(x) * x; return "Filling the " + container + " with " + liquid + "..."; }; }; source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 14. Examples - 3 JSON CoffeeScript JavaScript song = ["do", "re", "mi", "fa", "so"] var kids, matrix, singers, song; song = ["do", "re", "mi", "fa", "so"]; singers = {Jagger: "Rock", Elvis: "Roll"} singers = { Jagger: "Rock", matrix = [ Elvis: "Roll" 1, 0, 1 }; 0, 0, 1 matrix = [1, 0, 1, 0, 0, 1, 1, 1, 0]; 1, 1, 0 kids = { ] brother: { name: "Max", kids = age: 11 brother: }, name: "Max" sister: { age: 11 name: "Ida", sister: age: 9 name: "Ida" } age: 9 }; source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 15. Examples - 4 Conditional Assigment JavaScript CoffeeScript var date, mood; mood = greatlyImproved if singing if (singing) { mood = greatlyImproved; if happy and knowsIt } clapsHands() if (happy && knowsIt) { chaChaCha() clapsHands(); else chaChaCha(); showIt() } else { showIt(); date = if friday then sue else jill } date = friday ? sue : jill; options or= defaults options || (options = defaults); source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 16. Examples - 5 Classes (yeahh !!!) CoffeeScript JavaScript class Animal var Animal; constructor: (@name) -> Animal = function() { function Animal(name) { move: (meters) -> this.name = name; alert @name + " moved " + meters + "m." } Animal.prototype.move = function(meters) { return alert(this.name + " moved " + meters + "m."); }; return Animal; }(); source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 17. Examples - 6 JavaScript Classes inheritance var Animal, Dog; var __hasProp = Object.prototype.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; CoffeeScript child.prototype = new ctor; child.__super__ = parent.prototype; class Animal return child; constructor: (@name) -> }; Animal = function() { move: (meters) -> function Animal(name) { alert @name + " moved " + meters + "m." this.name = name; } class Dog extends Animal Animal.prototype.move = function(meters) { sound: woof woof return alert(this.name + " moved " + meters + "m."); }; return Animal; }(); Dog = function() { function Dog() { Dog.__super__.constructor.apply(this, arguments); } __extends(Dog, Animal); Dog.prototype.sound = woof woof; return Dog; }();piątek, 3 grudnia 2010
  • 18. Examples - 7 Binding CoffeeScript Account = (customer, cart) -> @customer = customer @cart = cart $(.shopping_cart).bind click, (event) -> @customer.purchase @cart JavaScript var Account; Account = function(customer, cart) { this.customer = customer; this.cart = cart; return $(.shopping_cart).bind(click, function(event) { return this.customer.purchase(this.cart); }); }; source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 19. Examples - 8 Binding CoffeeScript Account = (customer, cart) -> CoffeeScript @customer = customer @cart = cart Account = (customer, cart) -> @customer = customer $(.shopping_cart).bind click, (event) => @cart = cart @customer.purchase @cart $(.shopping_cart).bind click, (event) -> @customer.purchase @cart JavaScript JavaScript var Account; var __bind = function(fn, me){ return function(){ return fn.apply var Account; (me, arguments); }; }; Account = function(customer, cart) { Account = function(customer, cart) { this.customer = customer; this.customer = customer; this.cart = cart; this.cart = cart; return $(.shopping_cart).bind(click, return $(.shopping_cart).bind(click, __bind(function(event) function(event) { { return this.customer.purchase(this.cart); return this.customer.purchase(this.cart); }); }, this)); }; }; source: http://jashkenas.github.com/coffee-script/piątek, 3 grudnia 2010
  • 20. Using CoffeeScript with Ruby on Rails assumptions: installed Node.js with packed manager npmpiątek, 3 grudnia 2010
  • 21. Using CoffeeScript with Ruby on Rails assumptions: installed Node.js with packed manager npm installation CoffeeScript compiler Gemfile npm install coffee-scriptpiątek, 3 grudnia 2010
  • 22. Using CoffeeScript with Ruby on Rails add gem Barista Gemfile gem barista, >= 0.5.0piątek, 3 grudnia 2010
  • 23. Using CoffeeScript with Ruby on Rails add gem Barista Gemfile gem barista, >= 0.5.0 run rake task Console rails generate barista:installpiątek, 3 grudnia 2010
  • 24. Using CoffeeScript with Ruby on Rails add gem Barista Gemfile gem barista, >= 0.5.0 run rake task Console rails generate barista:install create folder app/ mkdir coffeescriptspiątek, 3 grudnia 2010
  • 25. Using CoffeeScript with Ruby on Rails store scripts in /app/coffeescripts/ use *.coffee extension run dev server (or trigger any request) JS files are generated dynamically you can preview those files in default JS folder /public/javascripts/piątek, 3 grudnia 2010
  • 26. It`s nice, isn`t it ? DEMO & discussion timepiątek, 3 grudnia 2010
  • 27. Resources: Official website of the project http://jashkenas.github.com/coffee-script/ Github repo with source code https://github.com/jashkenas/coffee-script underscore.js implemented in CoffeeScript (nice example of good CS code) http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html Barista gem website, and repo https://github.com/Sutto/baristapiątek, 3 grudnia 2010

×