Upload
joe-fleming
View
1.786
Download
4
Tags:
Embed Size (px)
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=pXZ7hGzDOF0
Citation preview
COFFEESCRIPT!A OPINIONATED INTRODUCTION
by: | twitter: | github: joe fleming @w33ble w33ble
If I'm wrong, call me on itIf you have a question, ask
WHAT ISCOFFEESCRIPT?
"A little language that compiles into javascript"
Takes the pain out of javascript
BASIC RULESWhitespace mattersFunctions have a different syntaxEverything is an expressionScope is handled automatically
RESOURCESGreat docs with table of contentsInteractive live shell
Easy way to see it in action
Coffeescript.org
Coffeescript meet Backbone
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));
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));
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));
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));
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))
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
WHY'S IT GREAT?
READS LIKE ENGLISHauthenticated = true unless account is false
if num is 13 alert "winner!"
winner = true if pick in [ 12, 37, 88 ]
EASY TO UNDERSTANDSHORTCUTS
nums = [1..10]
alert "My favorite number is #{nums[3]}"
class Person constructor: (@name) -> getName: -> @name
CLEAN SYNTAXWell formatted code
Easier to readEasier to maintain
Less typing, less errorsFun to write
MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION
MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"
MY FAVORITE SUGARTHE EXISTENTIAL OPERATOR
MY FAVORITE SUGARCLASS SYNTAX
ECMASCRIPT 6WITHOUT THE WAIT
Still generates ES5 codeWorks like an ES6 shim
MANY "WEIRD" PARTSARE OPTIONAL
Omitting returnUsing is, is not, or, and, etcRemoving commas in arraysRemoving commas and brackets in objectsDropping parens on function calls
LET'S SEE SOMEEXAMPLES
EXPRESS (NODE.JS)
BACKBONE
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
COFFEESCRIPT ISGREAT
NO DOWNSIDES TO USING IT
ANOTHER SYNTAX TOLEARN
Not pure JSCould complicate hiring/consultingPretty easy if you know JSMaybe you should hire better
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
DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this
DON'T STOP WITHJAVASCRIPT
HTML pretty much started it
made it cleaner brought it to JS
coffeescript as markup
HamlSlimJadeCoffeekup
JADEFull template library
Variables, conditionals, inheritance, etcClient-side or server-side
CSS/SCSS/Sassy CSS started this made it universal
brought it to JS
SassLessStylus
STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace)
Mix and match freely
THANKS!
twitter: | github:
joe fleming
@w33ble w33ble