coffeescript: an opinionated introduction
DESCRIPTION
Slides from my intro to coffeescript talk, given at Phoenix Javascript Meetup on Dec. 5th, 2012 at UAT Video available at http://www.youtube.com/watch?v=pXZ7hGzDOF0TRANSCRIPT
![Page 1: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/1.jpg)
COFFEESCRIPT!A OPINIONATED INTRODUCTION
by: | twitter: | github: joe fleming @w33ble w33ble
![Page 2: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/2.jpg)
If I'm wrong, call me on itIf you have a question, ask
![Page 3: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/3.jpg)
WHAT ISCOFFEESCRIPT?
"A little language that compiles into javascript"
Takes the pain out of javascript
![Page 4: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/4.jpg)
BASIC RULESWhitespace mattersFunctions have a different syntaxEverything is an expressionScope is handled automatically
![Page 5: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/5.jpg)
RESOURCESGreat docs with table of contentsInteractive live shell
Easy way to see it in action
Coffeescript.org
Coffeescript meet Backbone
![Page 6: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/6.jpg)
WELL FORMATTED JAVASCRIPTvar person = { name: 'joe fleming', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};
function makeAwesome (obj) { obj.awesome = true;};
function getName (obj) { return obj.name;}
makeAwesome(person);
console.log(getName(person));
![Page 7: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/7.jpg)
SLIGHTLY MODIFIED JAVASCRIPTFunctions become closures assigned to variablesvar person = { name: 'joe fleming', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};
var makeAwesome = function (obj) { obj.awesome = true;};
var getName = function(obj) { return obj.name;}
makeAwesome(person);
console.log(getName(person));
![Page 8: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/8.jpg)
CONVERT TO COFFEESCRIPTStep 1: Remove var
person = { name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};
makeAwesome = function (obj) { obj.awesome = true;}
getName = function (obj) { return obj.name;}
makeAwesome(person);
console.log(getName(person));
![Page 9: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/9.jpg)
CONVERT TO COFFEESCRIPTStep 2: change function syntax & remove brackets
This compiles! But why stop here?
person = { name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};
makeAwesome = (obj) -> obj.awesome = true;
getName = (obj) -> return obj.name;
makeAwesome(person);
console.log(getName(person));
![Page 10: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/10.jpg)
CONVERT TO COFFEESCRIPTRemove some ugly bits; brackets and semi-colonsperson = name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]
makeAwesome = (obj) -> obj.awesome = true
getName = (obj) -> return obj.name
makeAwesome(person)
console.log(getName(person))
![Page 11: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/11.jpg)
CONVERT TO COFFEESCRIPTRemove parens, commas and returns
Aw yeah!
person = name: 'joe fleming' twitter: 'w33ble' github: 'w33ble' interests: [ 'coffeescript', 'sublime text', 'node.js' ]
makeAwesome = (obj) -> obj.awesome = true
getName = (obj) -> obj.name
makeAwesome person
console.log getName person
![Page 12: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/12.jpg)
WHY'S IT GREAT?
![Page 13: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/13.jpg)
READS LIKE ENGLISHauthenticated = true unless account is false
if num is 13 alert "winner!"
winner = true if pick in [ 12, 37, 88 ]
![Page 14: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/14.jpg)
EASY TO UNDERSTANDSHORTCUTS
nums = [1..10]
alert "My favorite number is #{nums[3]}"
class Person constructor: (@name) -> getName: -> @name
![Page 15: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/15.jpg)
CLEAN SYNTAXWell formatted code
Easier to readEasier to maintain
Less typing, less errorsFun to write
![Page 16: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/16.jpg)
MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION
![Page 17: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/17.jpg)
MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"
![Page 18: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/18.jpg)
MY FAVORITE SUGARTHE EXISTENTIAL OPERATOR
![Page 19: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/19.jpg)
MY FAVORITE SUGARCLASS SYNTAX
![Page 20: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/20.jpg)
ECMASCRIPT 6WITHOUT THE WAIT
Still generates ES5 codeWorks like an ES6 shim
![Page 21: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/21.jpg)
MANY "WEIRD" PARTSARE OPTIONAL
Omitting returnUsing is, is not, or, and, etcRemoving commas in arraysRemoving commas and brackets in objectsDropping parens on function calls
![Page 22: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/22.jpg)
LET'S SEE SOMEEXAMPLES
![Page 23: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/23.jpg)
EXPRESS (NODE.JS)
![Page 24: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/24.jpg)
![Page 25: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/25.jpg)
BACKBONE
![Page 26: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/26.jpg)
CLASS INHERITANCEES6 style class inheritanceMakes super very easy to use
Class like you're probably used toNo bind or extend required
Creates bind and extends methodsStill calls superWhole lotta mess
Coffeescript.org
Simpler class
Fair JS version
![Page 27: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/27.jpg)
COFFEESCRIPT ISGREAT
NO DOWNSIDES TO USING IT
![Page 28: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/28.jpg)
ANOTHER SYNTAX TOLEARN
Not pure JSCould complicate hiring/consultingPretty easy if you know JSMaybe you should hire better
![Page 29: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/29.jpg)
REQUIRES COMPILING(MOST OF THE TIME)
Adds another step to development and deploymentBuild process: coffee, grunt, make/jake, etcAsset pipeline: connect-assetsRuntimes: node-devHosting: heroku, nodester, nodejitsu
![Page 30: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/30.jpg)
DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this
![Page 31: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/31.jpg)
DON'T STOP WITHJAVASCRIPT
![Page 32: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/32.jpg)
HTML pretty much started it
made it cleaner brought it to JS
coffeescript as markup
HamlSlimJadeCoffeekup
![Page 33: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/33.jpg)
JADEFull template library
Variables, conditionals, inheritance, etcClient-side or server-side
![Page 34: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/34.jpg)
CSS/SCSS/Sassy CSS started this made it universal
brought it to JS
SassLessStylus
![Page 35: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/35.jpg)
STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace)
Mix and match freely
![Page 36: Coffeescript: An Opinionated Introduction](https://reader034.vdocuments.us/reader034/viewer/2022042714/5550fafbb4c90501448b4baa/html5/thumbnails/36.jpg)
THANKS!
twitter: | github:
joe fleming
@w33ble w33ble