Coffeescript: No really, it's just Javascript

Slide 1

Slide 1 text

@be_mann Brian Mann Atlanta, GA S Coﬀe Scrip No really, it’s just Javascript

Slide 2

Slide 2 text

• Exposes the good parts • Transpiles directly to JS • Removes / Adds new syntax • Enhances readability, and productivity • Clearly expresses intents What is CoffeeScript?

Slide 3

Slide 3 text

• An Emotional Assessment • Dive Into Features • Real World Experiences • Challenges / Critiques Agenda

Slide 4

Slide 4 text

I am Biased.

Slide 5

Slide 5 text

CoffeeScript BEAUTIFUL UGLY / LOVED HATED / EMBRACED FEARED / / / SYNTAX. TOOLS. LANGUAGES. is one of the most

Slide 6

Slide 6 text

Javascript Landscape.

Slide 7

Slide 7 text

Golden Age

Slide 8

Slide 8 text

Golden Age S Coﬀe Scrip

Slide 9

Slide 9 text

• CoffeeScript looks different • CoffeeScript acts different Why the hate?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

FUD. Fear. Uncertainty. Doubt.

Slide 12

Slide 12 text

Crutch.

Slide 13

Slide 13 text

Absolutely NOT.

Slide 14

Slide 14 text

Nothing To Fear. S

Slide 15

Slide 15 text

Its just Javascript.

Slide 16

Slide 16 text

Okay thx. Code plz.

Slide 17

Slide 17 text

• No more semi-colons • No more commas • Optional parenthesis • Optional curly braces • White space sensitive Before we begin ; , {} ()

Slide 18

Slide 18 text

Vars. var is, no, more;

Slide 19

Slide 19 text

Vars are long gone count = 0 increment = -> count += 1 total = "The total is: " + count COFFEESCRIPT var count, increment; count = 0; increment = function() { var total; count += 1; return total = "The total is: " + count; }; JAVASCRIPT

Slide 20

Slide 20 text

Rule: 99 / 100

Slide 21

Slide 21 text

Object Literals.

Slide 22

Slide 22 text

Objects Simplified person = name: "Toby Ho" language: "javascript" likes: ["node", "testem", "jazz"] COFFEESCRIPT var person = { name: "Toby Ho", language: "javascript", likes: ["node", "testem", "jazz"] }; JAVASCRIPT

Slide 23

Slide 23 text

Functions.

Slide 24

Slide 24 text

Functions in JS function eat(){ console.log("eating"); }; DECLARATION var eat = function(){ console.log("eating"); }; EXPRESSION

Slide 25

Slide 25 text

Functions in CS eat = -> console.log "eating" COFFEESCRIPT var eat; eat = function() { return console.log("eating"); }; JAVASCRIPT

Slide 26

Slide 26 text

Function Arguments eat = (options = {}) -> COFFEESCRIPT var eat; eat = function(options) { if (options == null) { options = {}; } }; JAVASCRIPT

Slide 27

Slide 27 text

Function Context person = name: "Toby Ho" energy: 0 eat: -> @energy += 10 COFFEESCRIPT var person; person = { name: "Toby Ho", energy: 0, eat: function() { return this.energy += 10; } }; JAVASCRIPT > person.eat(); # 10

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Function Binding var person; person = { name: "Toby Ho", energy: 0, work: function() { var _this = this; $("#stop").click(function() { return _this.energy -= 20; }); } }; JAVASCRIPT person = name: "Toby Ho" energy: 0 work: -> $("#stop").click => @energy -= 20 COFFEESCRIPT var person; person = { name: "Toby Ho", energy: 0, work: function() { return $("#stop").click((function(_this) { return function() { return _this.energy -= 20; }; })(this)); } };

Slide 30

Slide 30 text

Function Splats var person; person = { name: "Toby Ho", dislikes: [], addDislikes: function() { var args = [].slice.call(arguments); return [].push.apply(this.dislikes, args); } }; JAVASCRIPT person = name: "Toby Ho" dislikes: [] addDislikes: (args...) -> @dislikes.push args... COFFEESCRIPT > person.addDislikes(“frameworks”, “long plane rides”);

Slide 31

Slide 31 text

Ranges / Slicing

Slide 32

Slide 32 text

Array + String Slicing nums = [1..10] COFFEESCRIPT JAVASCRIPT nums[0...5] nums[2..3] = [-3, -4] "Toby Ho"[0..3] [1,2,3,4,5] nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; "Toby Ho".slice(0, 4); [].splice.apply(nums, [2,2].concat([-3, -4]) ); nums.slice(0, 5); [1,2,-3,-4,5, 6,7,8,9,10] Toby

Slide 33

Slide 33 text

If, Else, Unless.

Slide 34

Slide 34 text

Flow Control var person; person = { name: "Toby Ho", tired: true, work: function() { if (this.tired) { return; } return this.program("javascript"); }, relax: function() { moment.hour() > 10 ? this.read() : this.tv(); }, sleep: function() { if (!this.tired) { return this.relax(); } } }; JAVASCRIPT person = name: "Toby Ho" tired: true work: -> return if @tired @program "javascript" relax: -> if moment.hour() > 10 then @read() else @tv() sleep: -> @relax() unless @tired COFFEESCRIPT

Slide 35

Slide 35 text

Operators.

Slide 36

Slide 36 text

Operator Comparison COFFEESCRIPT JAVASCRIPT yes true on true no false oﬀ false and && exercise() unless @tired and @sleepy or || happy() if @happy or @energy > 50 not ! relax() if not working() isnt !== @name isnt "randall" is === true is true

Slide 37

Slide 37 text

Existential Operator.

Slide 38

Slide 38 text

Do You Really Exist? person = name: "Toby Ho" energy: 0 address: city: "Alpharetta" state: "GA" zip: 30307 phone: null mail: -> "mailing..." > person.address?.city Alpharetta => > person.phone?.cell undefined => > person.call?( ) undefined => > person.call?( ) ? person.mail( ) mailing... => if (typeof person.call === "function") { person.call(); } var _ref; if ((_ref = person.address) != null) { _ref.city; }

Slide 39

Slide 39 text

String Interpolation.

Slide 40

Slide 40 text

No more awkward ‘+’ "Hey, " + person.name + " is " + person.age + " years young."; JAVASCRIPT "Hey, #{person.name} is #{person.age} years young." COFFEESCRIPT

Slide 41

Slide 41 text

Destructuring Assignment.

Slide 42

Slide 42 text

Easy var extraction person = name: "Toby Ho" energy: 0 address: city: "Alpharetta" state: "GA" zip: 30307 {name, energy, address} = person COFFEESCRIPT JAVASCRIPT var address, energy, name; name = person.name; energy = person.energy; address = person.address;

Slide 43

Slide 43 text

IIFE’s.

Slide 44

Slide 44 text

Module Pattern App = do -> privateVar = "can't get to me!" privateFn = -> "can't invoke me either" obj = data: [] props: {} publicFn: -> return obj COFFEESCRIPT JAVASCRIPT App = (function() { var privateVar = "can't get to me!"; var privateFn = function() { return "can't invoke me either"; }; var obj = { data: [], props: {}, publicFn: function() {} }; return obj; })();

Slide 45

Slide 45 text

Local Dependencies do ($ = jQuery, BB = Backbone) -> #reference jQuery as $ #reference Backbone as BB COFFEESCRIPT JAVASCRIPT (function($, BB) { //reference jQuery as $ //reference Backbone as BB })(jQuery, Backbone);

Slide 46

Slide 46 text

Switch / Case.

Slide 47

Slide 47 text

...minus the case switch state when "GA" then "humid" when "WA" then "rainy" when "AZ", "UT", "NV" then "dry" else "moderate" COFFEESCRIPT JAVASCRIPT switch (state) { case "GA": "humid"; break; case "WA": "rainy"; break; case "AZ": case "UT": case "NV": "dry"; break; default: "moderate"; }

Slide 48

Slide 48 text

No Control Expression energyLevel = switch when @energy < 10 then "exhausted" when @energy < 20 then "okay" when @energy < 40 then "caffeinated" else "bouncing off walls" COFFEESCRIPT JAVASCRIPT var energyLevel; energyLevel = (function() { switch (false) { case !(this.energy < 10): return "exhausted"; case !(this.energy < 20): return "okay"; case !(this.energy < 40): return "caffeinated"; default: return "bouncing off walls"; } }).call(this);

Slide 49

Slide 49 text

Loops / Comprehensions.

Slide 50

Slide 50 text

For Loops person = name: "Toby Ho" language: "javascript" likes: ["node", "testem", "jazz"] COFFEESCRIPT for like, num in person.likes console.log "#{num + 1}. #{like}" 1. node 2. testem 3. jazz => var like, num, _i, _len, _ref; _ref = person.likes; for (num = _i = 0, _len = _ref.length; _i < _len; num = ++_i) { like = _ref[num]; console.log("" + (num + 1) + ". " + like); } JAVASCRIPT

Slide 51

Slide 51 text

Property Iteration heros = { john: "resig", ryan: "dahl" }; COFFEESCRIPT for first, last of heros console.log first, last john resig ryan dahl => var first, last; for (first in heros) { last = heros[first]; console.log(first, last); } JAVASCRIPT

Slide 52

Slide 52 text

Array ‘in’ checking COFFEESCRIPT if "coffeescript" in person.dislikes then "hater" else "friend :-)" var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; if (__indexOf.call(this.dislikes, "coffeescript") >= 0) { "hater"; } else { "friend :-)"; } JAVASCRIPT person = name: "Toby Ho" dislikes: ["frameworks", "long plane rides"]

Slide 53

Slide 53 text

Comprehensions var i, nums; nums = (function() { var _i, _results; _results = []; for (i = _i = 1; _i <= 100; i = ++_i) { _results.push({ num: i }); } return _results; })(); JAVASCRIPT COFFEESCRIPT nums = (num: i for i in [1..100]) {100 Objects} -------------------------- [{ num: 1 },{ num: 2 }] =>

Slide 54

Slide 54 text

• Block Strings • Block Regular Expressions • Some Operators • Chained Comparisons • Trailing Commas • Reserved Words • Literate Coffeescript • Classes, Inheritance, & Super What was missed?

Slide 55

Slide 55 text

Debugging.

Slide 56

Slide 56 text

Syntax Errors @PE.module "HeaderApp", +> SUBLIME TEXT

Slide 57

Slide 57 text

Source Maps

Slide 58

Slide 58 text

CoffeeConsole

Slide 59

Slide 59 text

Literal CoffeeScript

Slide 60

Slide 60 text

Criticisms.

Slide 61

Slide 61 text

Dispelling the Myths • Compiler Errors (WAT?) • Performance • Restrictions* • Harder to Debug • Less Readability • You can skip learning JS

Slide 62

Slide 62 text

Lies, Damned Lies, & Statistics.

Slide 63

Slide 63 text

Productivity Gains CHARS 1,198,518 2,704,135 2.25X 34,014 84,681 2.49X LINES OF CODE

Slide 64

Slide 64 text

The End @be_mann Brian Mann S Coﬀe Scrip