Date post: | 10-May-2015 |
Category: |
Documents |
Upload: | michal-taberski |
View: | 4,653 times |
Download: | 0 times |
Michał Taberski
Coffee Scriptan easy way to do JavaScript
piątek, 3 grudnia 2010
Agenda
What is it?
How it can help us?
Overview (a bunch of examples)
Using CoffeeScript with Rails
Demo
Discussion
piątek, 3 grudnia 2010
What is CoffeeScript ?
!= !=
General idea
piątek, 3 grudnia 2010
What is CoffeeScript ?
language designed to be compiled into JavaScript
piątek, 3 grudnia 2010
What is CoffeeScript ? - 2
language designed to be a compiled into JavaScript
code compiles one-to-one into the equivalent JS
pią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 Python
pią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 work
piątek, 3 grudnia 2010
Examples
piątek, 3 grudnia 2010
Examples
CoffeeScript
square = (x) -> x * xcube = (x) -> square(x) * x
Functions
CoffeeScript
fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..."
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010
Examples - 2
CoffeeScript
square = (x) -> x * xcube = (x) -> square(x) * x
JavaScript
var cube, square;square = function(x) { return x * x;};cube = function(x) { return square(x) * x;};
Functions
CoffeeScript
fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..."
JavaScript
var fill;fill = function(container, liquid) { if (liquid == null) { liquid = "coffee"; } return "Filling the " + container + " with " + liquid + "...";};
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010
Examples - 3
CoffeeScript
song = ["do", "re", "mi", "fa", "so"]
singers = {Jagger: "Rock", Elvis: "Roll"}
matrix = [ 1, 0, 1 0, 0, 1 1, 1, 0]
kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9
JSON
JavaScript
var kids, matrix, singers, song;song = ["do", "re", "mi", "fa", "so"];singers = { Jagger: "Rock", Elvis: "Roll"};matrix = [1, 0, 1, 0, 0, 1, 1, 1, 0];kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 }};
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010
Examples - 4
CoffeeScript
mood = greatlyImproved if singing
if happy and knowsIt clapsHands() chaChaCha()else showIt()
date = if friday then sue else jill
options or= defaults
Conditional Assigment
JavaScript
var date, mood;if (singing) { mood = greatlyImproved;}if (happy && knowsIt) { clapsHands(); chaChaCha();} else { showIt();}date = friday ? sue : jill;options || (options = defaults);
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010
Examples - 5
CoffeeScript
class Animal constructor: (@name) ->
move: (meters) -> alert @name + " moved " + meters + "m."
Classes (yeahh !!!)
source: http://jashkenas.github.com/coffee-script/
JavaScript
var Animal;Animal = function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + " moved " + meters + "m."); }; return Animal;}();
piątek, 3 grudnia 2010
Examples - 6
CoffeeScript
class Animal constructor: (@name) ->
move: (meters) -> alert @name + " moved " + meters + "m."
class Dog extends Animal sound: 'woof woof'
Classes inheritanceJavaScriptvar 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; child.prototype = new ctor; child.__super__ = parent.prototype; return child;};Animal = function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { 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
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); });};
Binding
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010
Examples - 8
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); });};
BindingCoffeeScript
Account = (customer, cart) -> @customer = customer @cart = cart
$('.shopping_cart').bind 'click', (event) => @customer.purchase @cart
JavaScript
var Account;var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };Account = function(customer, cart) { this.customer = customer; this.cart = cart; return $('.shopping_cart').bind('click', __bind(function(event) { 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 npm
piątek, 3 grudnia 2010
Using CoffeeScript with Ruby on Rails
assumptions:
installed Node.js with packed manager npm
installation CoffeeScript compiler
Gemfilenpm install coffee-script
piątek, 3 grudnia 2010
Using CoffeeScript with Ruby on Rails
add gem Barista
Gemfilegem 'barista', '>= 0.5.0'
piątek, 3 grudnia 2010
Using CoffeeScript with Ruby on Rails
add gem Barista
Gemfilegem 'barista', '>= 0.5.0'
run rake task
Consolerails generate barista:install
piątek, 3 grudnia 2010
Using CoffeeScript with Ruby on Rails
add gem Barista
Gemfilegem 'barista', '>= 0.5.0'
run rake task
Consolerails generate barista:install
create folder
app/mkdir coffeescripts
pią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 time
piątek, 3 grudnia 2010
Resources:
Official website of the projecthttp://jashkenas.github.com/coffee-script/
Github repo with source codehttps://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 repohttps://github.com/Sutto/barista
piątek, 3 grudnia 2010