• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Coffee Script
 

Coffee Script

on

  • 4,917 views

 

Statistics

Views

Total Views
4,917
Views on SlideShare
4,825
Embed Views
92

Actions

Likes
5
Downloads
83
Comments
0

4 Embeds 92

http://devguru.pl 89
http://www.tumblr.com 1
http://twitter.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Coffee Script Coffee Script Presentation Transcript

    • Coffee Script an easy way to do JavaScript M ich ał Ta be rs k ipiątek, 3 grudnia 2010
    • Agenda What is it? How it can help us? Overview (a bunch of examples) Using CoffeeScript with Rails Demo Discussionpiątek, 3 grudnia 2010
    • What is CoffeeScript ? General idea != !=piątek, 3 grudnia 2010
    • 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 code compiles one-to-one into the equivalent JSpiątek, 3 grudnia 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • Examplespiątek, 3 grudnia 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Using CoffeeScript with Ruby on Rails assumptions: installed Node.js with packed manager npmpiątek, 3 grudnia 2010
    • 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
    • Using CoffeeScript with Ruby on Rails add gem Barista Gemfile gem barista, >= 0.5.0piątek, 3 grudnia 2010
    • 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
    • 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
    • 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
    • It`s nice, isn`t it ? DEMO & discussion timepiątek, 3 grudnia 2010
    • 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