Tweet
Tweet

Slide 1

Slide 1 text

CoffeeScript a better way to write javascrip ৷ԈᎲ photo by SixRevisions

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

You can get this slide on www.eddie.com.tw/slides

Slide 5

Slide 5 text

Who am I ?

Slide 6

Slide 6 text

I’m a Flash guy. photo by JD Hancock

Slide 7

Slide 7 text

a.k.a Eddie or Aquarianboy Live and work in Taipei, Taiwan. Serving in my own little tiny company. Flash / AS3 / Ruby / Rails / Python programming for living. A little bit Objective-C for personal inerests. Technical Education and Consulant. PTT Flash BM (since 2007/4). Adobe Certificaed Flash Developer (Since 2006/7). Linux Professional Institue Certification (Since 2005/3). ৷ԈᎲ photo by Eddie

Slide 8

Slide 8 text

or just google me with keyword "৷ԈᎲ"

Slide 9

Slide 9 text

JavaScript becomes hugely popular. 9th on TIOBE, Nov 2011 photo by gr3m

Slide 10

Slide 10 text

JavaScript seems easy.. photo by apple apple

Slide 11

Slide 11 text

But it’s not easy o wrie good JavaScript code. photo by Marcus Q

Slide 12

Slide 12 text

Today, I won't ell you.. You should give up the way you did

Slide 13

Slide 13 text

I am going o ell you.. Maybe you have a better way to do with this

Slide 14

Slide 14 text

CoffeeScript

Slide 15

Slide 15 text

photo by Nick Humphries We’re not alking about this kind of coffee.

Slide 16

Slide 16 text

WTF?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CoffeeScript

Slide 19

Slide 19 text

CoffeeScript just written with different syntax is JavaScript

Slide 20

Slide 20 text

..exposes the good parats of JavaScript in a simple way.

Slide 21

Slide 21 text

Synax borrowed from Python and Ruby.

Slide 22

Slide 22 text

Synax borrowed from Python and Ruby. I love Python & Ruby

Slide 23

Slide 23 text

..and will be compiled ino JavaScript code.

Slide 24

Slide 24 text

..that doesn’t mean you can have no knowledge about JavaScript.

Slide 25

Slide 25 text

CoffeeScript is not used o replace JavaScript.

Slide 26

Slide 26 text

Let’s get our feet wet! photo by jlhopes

Slide 27

Slide 27 text

Insall photo by Daniel Dionne

Slide 28

Slide 28 text

Requirements You need o insall some software first.. Node.js > git clone git://github.com/joyent/node.git > cd node > ./configure > make > sudo make insall

Slide 29

Slide 29 text

Requirements You need o insall some software first.. NPM, the “node package manager” > curl http://npmjs.org/insall.sh | sh

Slide 30

Slide 30 text

Insall CoffeeScript CoffeeScript > npm insall coffee-script > coffee -v CoffeeScript version 1.1.3 http://blog.eddie.com.w/2011/08/03/install-coffeescrip/

Slide 31

Slide 31 text

How o use photo by roboppy

Slide 32

Slide 32 text

Usage Compile *.coffee ino *.js > coffee --wach --compile app.coffee Compile http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/

Slide 33

Slide 33 text

Synax photo by zigazou76

Slide 34

Slide 34 text

} } } }

Slide 35

Slide 35 text

No { } indenations rule! whitespace matters!

Slide 36

Slide 36 text

( ) is not necessary.

Slide 37

Slide 37 text

No trailing semicolon.

Slide 38

Slide 38 text

Return is not necessary. everything is an expression

Slide 39

Slide 39 text

No { }, (), and ; // javascript # coffeescript

Slide 40

Slide 40 text

No { }, (), and ; // javascript if(age > 20){ voe(); } # coffeescript

Slide 41

Slide 41 text

No { }, (), and ; // javascript if(age > 20){ voe(); } # coffeescript if age > 20 voe()

Slide 42

Slide 42 text

Variable & Function

Slide 43

Slide 43 text

Variable You don’t have o declare it before using it. // javascript # coffeescript

Slide 44

Slide 44 text

Variable You don’t have o declare it before using it. // javascript # coffeescript lang = ["php", "python", "perl", "ruby"] name = "Eddie"

Slide 45

Slide 45 text

Variable You don’t have o declare it before using it. // javascript # coffeescript lang = ["php", "python", "perl", "ruby"] name = "Eddie" var lang, name; lang = ["php", "python", "perl", "ruby"]; name = "Eddie";

Slide 46

Slide 46 text

Function // javascript # coffeescript

Slide 47

Slide 47 text

Function // javascript # coffeescript say_hello = (guest1, guest2 = "Nayumi") -> "Hello #{guest1} and #{guest2}" say_hello "Eddie"

Slide 48

Slide 48 text

Function // javascript # coffeescript say_hello = (guest1, guest2 = "Nayumi") -> "Hello #{guest1} and #{guest2}" say_hello "Eddie" var say_hello; say_hello = function(guest1, guest2) { if (guest2 == null) { guest2 = "Nayumi"; } return "Hello " + guest1 + " and " + guest2; }; say_hello("Eddie");

Slide 49

Slide 49 text

Array

Slide 50

Slide 50 text

Array // javascript # coffeescript

Slide 51

Slide 51 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ]

Slide 52

Slide 52 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];

Slide 53

Slide 53 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man']; students = [1..10]

Slide 54

Slide 54 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man']; students = [1..10] students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Slide 55

Slide 55 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man']; students = [1..10] eachers = [1...10] students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Slide 56

Slide 56 text

Array // javascript # coffeescript heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man']; students = [1..10] eachers = [1...10] eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Slide 57

Slide 57 text

Array # coffeescript // javascript

Slide 58

Slide 58 text

Array # coffeescript // javascript heroes[0..2]

Slide 59

Slide 59 text

Array # coffeescript // javascript heroes[0..2] heroes.slice(0, 3);

Slide 60

Slide 60 text

Array # coffeescript // javascript heroes[0..2] heroes[1..2] = ["Batman", "ThunderCat"] heroes.slice(0, 3);

Slide 61

Slide 61 text

Array # coffeescript // javascript heroes[0..2] heroes[1..2] = ["Batman", "ThunderCat"] var _ref; [].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref; heroes.slice(0, 3);

Slide 62

Slide 62 text

Object

Slide 63

Slide 63 text

Object // javascript # coffeescript

Slide 64

Slide 64 text

Object // javascript # coffeescript eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }

Slide 65

Slide 65 text

Object // javascript # coffeescript eddie = { name: "Eddie Kao", age: 18, speciality: "eat" } var eddie; eddie = { name: "Eddie Kao", age: 18, speciality: "eat" };

Slide 66

Slide 66 text

Object # coffeescript // javascript

Slide 67

Slide 67 text

Object # coffeescript // javascript eddie = name: "Eddie Kao" age: 18 lovers: nayumi: name: "Nayumi Hung" age: 18 mary: name: "Mary Bloody" age: 20

Slide 68

Slide 68 text

Object # coffeescript // javascript eddie = name: "Eddie Kao" age: 18 lovers: nayumi: name: "Nayumi Hung" age: 18 mary: name: "Mary Bloody" age: 20 var eddie; eddie = { name: "Eddie Kao", age: 18, lovers: { nayumi: { name: "Nayumi Hung", age: 18 }, mary: { name: "Mary Bloody", age: 20 } } };

Slide 69

Slide 69 text

Loop

Slide 70

Slide 70 text

Loop # coffeescript // javascript

Slide 71

Slide 71 text

Loop # coffeescript // javascript alert i for i in [1..10]

Slide 72

Slide 72 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); }

Slide 73

Slide 73 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0

Slide 74

Slide 74 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0 for (i = 1; i <= 10; i++) { if (i % 2 === 0) { alert(i); } }

Slide 75

Slide 75 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0 alert i for i in [1..10] by 2 for (i = 1; i <= 10; i++) { if (i % 2 === 0) { alert(i); } }

Slide 76

Slide 76 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0 alert i for i in [1..10] by 2 for (i = 1; i <= 10; i++) { if (i % 2 === 0) { alert(i); } } for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); }

Slide 77

Slide 77 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0 alert i for i in [1..10] by 2 alert i * 2 for i in [1..10] for (i = 1; i <= 10; i++) { if (i % 2 === 0) { alert(i); } } for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); }

Slide 78

Slide 78 text

Loop # coffeescript // javascript alert i for i in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i % 2 == 0 alert i for i in [1..10] by 2 alert i * 2 for i in [1..10] for (i = 1; i <= 10; i++) { if (i % 2 === 0) { alert(i); } } for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); } for (i = 1; i <= 10; i++) { alert(i * 2); }

Slide 79

Slide 79 text

Modifier

Slide 80

Slide 80 text

Modifier // javascript You can put "if", "unless", "while", "until" behind # coffeescript

Slide 81

Slide 81 text

Modifier // javascript You can put "if", "unless", "while", "until" behind # coffeescript if (age > 20) { voe(); }

Slide 82

Slide 82 text

Modifier // javascript You can put "if", "unless", "while", "until" behind # coffeescript voe() if age > 20 if (age > 20) { voe(); }

Slide 83

Slide 83 text

Synactic Sugar

Slide 84

Slide 84 text

Synactic Sugar # coffeescript // javascript wrie more readable code by using synactic sugar.

Slide 85

Slide 85 text

Synactic Sugar # coffeescript // javascript wrie more readable code by using synactic sugar. is === isnt !== true, on, yes true false, off, no false not ! and && or || unless if not until while not of in

Slide 86

Slide 86 text

// javascript # coffeescript Synactic Sugar

Slide 87

Slide 87 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off

Slide 88

Slide 88 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off if (light === false) { alert("I can't see anything"); }

Slide 89

Slide 89 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off if (light === false) { alert("I can't see anything"); } alert "It's impossible!" if eddie isnt handsome

Slide 90

Slide 90 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off if (light === false) { alert("I can't see anything"); } alert "It's impossible!" if eddie isnt handsome if (eddie !== handsome) { alert("It's impossible!"); }

Slide 91

Slide 91 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off if (light === false) { alert("I can't see anything"); } alert "It's impossible!" if eddie isnt handsome if girl is not single alert "Don't Touch! Be Careful!" if (eddie !== handsome) { alert("It's impossible!"); }

Slide 92

Slide 92 text

// javascript # coffeescript Synactic Sugar alert "I can't see anything" if light is off if (light === false) { alert("I can't see anything"); } alert "It's impossible!" if eddie isnt handsome if girl is not single alert "Don't Touch! Be Careful!" if (eddie !== handsome) { alert("It's impossible!"); } if (girl === !single) { alert("Don't Touch! Be Careful!"); }

Slide 93

Slide 93 text

// javascript Synactic Sugar

Slide 94

Slide 94 text

// javascript Synactic Sugar if (Answer === true) { alert("I'll marry you!"); }

Slide 95

Slide 95 text

alert "I'll marry you!" if Answer is yes // javascript Synactic Sugar if (Answer === true) { alert("I'll marry you!"); }

Slide 96

Slide 96 text

// javascript # coffeescript Synactic Sugar

Slide 97

Slide 97 text

// javascript # coffeescript Synactic Sugar age ?= 18

Slide 98

Slide 98 text

// javascript # coffeescript Synactic Sugar age ?= 18 if (typeof age !== "undefined" && age !== null) { age; } else { age = 18; };

Slide 99

Slide 99 text

Raw JavaScript If you still prefer the original way

Slide 100

Slide 100 text

Raw JavaScript // javascript # coffeescript

Slide 101

Slide 101 text

Raw JavaScript // javascript # coffeescript say_hello = `function(name){ return "Hello, " + name }`

Slide 102

Slide 102 text

Raw JavaScript // javascript # coffeescript say_hello = `function(name){ return "Hello, " + name }` var say_hello; say_hello = function(name){ return "Hello, " + name };

Slide 103

Slide 103 text

OOP

Slide 104

Slide 104 text

// javascript # coffeescript OOP - new

Slide 105

Slide 105 text

// javascript # coffeescript OOP - new class Animal construcor: (name, age) -> this.name = name this.age = age animal = new Animal("eddie", 18) alert animal

Slide 106

Slide 106 text

// javascript # coffeescript OOP - new class Animal construcor: (name, age) -> this.name = name this.age = age animal = new Animal("eddie", 18) alert animal var Animal, animal; Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } return Animal; })(); animal = new Animal("eddie", 18); alert(animal);

Slide 107

Slide 107 text

// javascript # coffeescript OOP - method

Slide 108

Slide 108 text

// javascript # coffeescript OOP - method class Animal construcor: (@name, @age) -> say_hello: (something) -> console.log "Hello, #{something}" animal = new Animal("eddie", 18) animal.say_hello("CoffeeScript")

Slide 109

Slide 109 text

// javascript # coffeescript OOP - method class Animal construcor: (@name, @age) -> say_hello: (something) -> console.log "Hello, #{something}" animal = new Animal("eddie", 18) animal.say_hello("CoffeeScript") var Animal, animal; Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } Animal.prootype.say_hello = function(something) { return console.log("Hello, " + something); }; return Animal; })(); animal = new Animal("eddie", 18); animal.say_hello("CoffeeScript");

Slide 110

Slide 110 text

// javascript OOP - inheriance # coffeescript

Slide 111

Slide 111 text

// javascript OOP - inheriance # coffeescript class Animal construcor: (@name, @age) -> say_hello: (something) -> alert "Hello, #{something}" class Human exends Animal walk: -> alert "I can walk with my foots!" eddie = new Human("eddie", 18) eddie.say_hello "CoffeeScript" eddie.walk()

Slide 112

Slide 112 text

// javascript OOP - inheriance # coffeescript class Animal construcor: (@name, @age) -> say_hello: (something) -> alert "Hello, #{something}" class Human exends Animal walk: -> alert "I can walk with my foots!" eddie = new Human("eddie", 18) eddie.say_hello "CoffeeScript" eddie.walk() TL; DR

Slide 113

Slide 113 text

References http://blog.eddie.com.w/category/coffeescrip/ http://jashkenas.github.com/coffee-scrip/ http://pragprog.com/book/tbcoffee/coffeescrip Websies: Book:

Slide 114

Slide 114 text

the good parts I love photo by Steve Ganz

Slide 115

Slide 115 text

Coding Style I Love.. I love Python & Ruby, of course :)

Slide 116

Slide 116 text

Indenation! I Love..

Slide 117

Slide 117 text

Anonymous function No global function and variable by default I Love..

Slide 118

Slide 118 text

String Inerpolation I Love.. sorry, but string building really sucks :)

Slide 119

Slide 119 text

List Comprehension I Love..

Slide 120

Slide 120 text

Synactic Sugar I Love..

Slide 121

Slide 121 text

English-like grammar I Love.. alert "of course it is!" if PHPConf is awesome

Slide 122

Slide 122 text

Comparison & Equality I Love.. "true" == true // true "true" === true // false

Slide 123

Slide 123 text

Works with other JS frameworks well. Because it’s just JavaScrip I Love..

Slide 124

Slide 124 text

Compilation I Love.. JSLint Approved

Slide 125

Slide 125 text

What else?

Slide 126

Slide 126 text

CoffeeScript compiler is writen in CoffeeScript.

Slide 127

Slide 127 text

Tianium Mobile http://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/

Slide 128

Slide 128 text

photo by Andrew

Slide 129

Slide 129 text

Immature? photo by theseanster93

Slide 130

Slide 130 text

Performance? photo by theseanster93 photo by chr1sl4i

Slide 131

Slide 131 text

CoffeeScript Means Giving Up on JavaScript?

Slide 132

Slide 132 text

Learn JavaScript, and Use CoffeeScript.

Slide 133

Slide 133 text

Any Question? photo by jamuraa

Slide 134

Slide 134 text

৷ԈᎲ Conacts photo by Eddie Websie Blog Plurk Facebook Google Plus Twiter Email Mobile http://www.eddie.com.tw http://blog.eddie.com.tw http://www.plurk.com/aquarianboy http://www.facebook.com/eddiekao http://www.eddie.com.tw/+ https://twiter.com/#!/eddiekao [email protected] +886-928-617-687