Coffee Script                                    an easy way to do JavaScript                         M ich ał Ta be rs k ...
Agenda                         What is it?                         How it can help us?                         Overview (a...
What is CoffeeScript ?                              General idea                                !=     !=piątek, 3 grudnia...
What is CoffeeScript ?                         language designed to be compiled into JavaScriptpiątek, 3 grudnia 2010
What is CoffeeScript ? - 2                         language designed to be a compiled into JavaScript                     ...
What is CoffeeScript ? - 3                         language designed to be a compiled into JavaScript                     ...
What is CoffeeScript ? - 4                         language designed to be a compiled into JavaScript                     ...
What is CoffeeScript ? - 5                         language designed to be a compiled into JavaScript                     ...
How it can help us ?                         less lines of code with better readability,                         code easy...
How it can help us ?                         less lines of code with better readability,                         code easy...
Examplespiątek, 3 grudnia 2010
Examples                         Functions                     CoffeeScript                     CoffeeScript              ...
Examples - 2                         Functions                     CoffeeScript                    CoffeeScript           ...
Examples - 3                         JSON                         CoffeeScript                                JavaScript  ...
Examples - 4                         Conditional Assigment                                                               J...
Examples - 5                         Classes (yeahh !!!)                   CoffeeScript                                   ...
Examples - 6                                                          JavaScript       Classes inheritance                ...
Examples - 7                     Binding      CoffeeScript      Account = (customer, cart) ->        @customer = customer ...
Examples - 8                     Binding                            CoffeeScript                                          ...
Using CoffeeScript                              with Ruby on Rails                         assumptions:                   ...
Using CoffeeScript                               with Ruby on Rails                         assumptions:                  ...
Using CoffeeScript                         with Ruby on Rails                 add gem Barista                             ...
Using CoffeeScript                         with Ruby on Rails                 add gem Barista                             ...
Using CoffeeScript                         with Ruby on Rails                 add gem Barista                             ...
Using CoffeeScript                          with Ruby on Rails                  store scripts in /app/coffeescripts/      ...
It`s nice, isn`t it ?                               DEMO                                 &                          discus...
Resources:                         Official website of the project                         http://jashkenas.github.com/cof...
Upcoming SlideShare
Loading in...5
×

Coffee Script

4,716

Published on

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

No Downloads
Views
Total Views
4,716
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
92
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Coffee Script

  1. 1. Coffee Script an easy way to do JavaScript M ich ał Ta be rs k ipiątek, 3 grudnia 2010
  2. 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. 3. What is CoffeeScript ? General idea != !=piątek, 3 grudnia 2010
  4. 4. What is CoffeeScript ? language designed to be compiled into JavaScriptpiątek, 3 grudnia 2010
  5. 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. 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. 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. 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. 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. 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. 11. Examplespiątek, 3 grudnia 2010
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. Using CoffeeScript with Ruby on Rails assumptions: installed Node.js with packed manager npmpiątek, 3 grudnia 2010
  21. 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. 22. Using CoffeeScript with Ruby on Rails add gem Barista Gemfile gem barista, >= 0.5.0piątek, 3 grudnia 2010
  23. 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. 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. 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. 26. It`s nice, isn`t it ? DEMO & discussion timepiątek, 3 grudnia 2010
  27. 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
  1. A particular slide catching your eye?

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

×