![Page 1: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/1.jpg)
Amir Barylko Advanced Design Patterns
Beau%ful Javascriptwith Coffeescript
Amir Barylko
![Page 2: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/2.jpg)
Amir Barylko Beautiful JS with CS
WHO AM I?
• Software quality expert
• Architect
• Developer
• Mentor
• Great cook
• The one who’s entertaining you for the next hour!
![Page 3: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/3.jpg)
Amir Barylko Beautiful JS with CS
RESOURCES
• Email: [email protected]
• Twitter : @abarylko
• Blog: http://www.orthocoders.com
• Materials: http://www.orthocoders.com/presentations
![Page 4: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/4.jpg)
Amir Barylko Beautiful JS with CS
COFFEESCRIPT
![Page 5: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/5.jpg)
Amir Barylko Beautiful JS with CS
WHAT’S WRONG WITH JS
• Too verbose (too many { and } )
• Global Variables
• Lacks support for classes
• Hard to make inheritance
• Automatic type conversion between strings and numbers
• NaN is not a number, however it is a number
![Page 6: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/6.jpg)
Amir Barylko Beautiful JS with CS
WHAT IS IT?
“CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.”
http://coffeescript.org/
![Page 7: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/7.jpg)
Amir Barylko Beautiful JS with CS
STRING INTERPOLATION
•You can concatenate inside a double quote string using the “#” and “{ }”
"The result is #{3}" == "The result is 3"
•Or use any expression
"/movies/#{id}"
![Page 8: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/8.jpg)
Amir Barylko Beautiful JS with CS
FUNCTIONS
•The arrow/lambda defines functionssquare = (x) -> x * x
•Parenthesis are optional when passing parameters storageDelete movieId, true
![Page 9: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/9.jpg)
Amir Barylko Beautiful JS with CS
FUNCTIONS II
•Implicit return(the last expression is the return value)
•Multiple lines, indentation is importantdeleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)
![Page 10: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/10.jpg)
Amir Barylko Beautiful JS with CS
OBJECTS AS HASHES
•Declared using indentation
config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"
![Page 11: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/11.jpg)
Amir Barylko Beautiful JS with CS
ARRAYS
•Arrays are declared with “[ ]”
deploy = ['local', 'remote', 'uat']
fib = [1, 3, 5, 8, 13, 21]
•Slicing
first = fib[0..3]
noLast = fib[0..-2]
![Page 12: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/12.jpg)
Amir Barylko Beautiful JS with CS
DESTRUCTURING ASSIGNMENT
•Multiple assignments
[firstName, nick, last] = ['D\'Arcy', 'Baconator', 'Lussier']
•Splat
reviews = [45, 29, 21, 10, 8, 4]
[best, secondBest, theRest...] = reviews
![Page 13: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/13.jpg)
Amir Barylko Beautiful JS with CS
CONDITIONALS
•Classic if does not need parenthesisif isJson callIndex() display()else showMessage()
•Or use unless for the negated form
![Page 14: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/14.jpg)
Amir Barylko Beautiful JS with CS
MODIFIERS
•The conditionals can be use as modifiers
callIndex() if isJson
exit() unless validated and inContext
![Page 15: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/15.jpg)
Amir Barylko Beautiful JS with CS
SWITCH
• Selects between multiple conditions
movieReview = (critic, movie) -> switch critic when 'Jay' 'It Stinks!' when 'Darcy' if movie.match(/Bacon/) then... else throw new Error('Invalid critic name!')
![Page 16: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/16.jpg)
Amir Barylko Beautiful JS with CS
LIST COMPREHENSION
•Iterate and call a function over each elementdeploy env for env in ['local', 'uat', 'prod']
•Or filter over a collectionnums = (num for num in [1..960] when isInteger(960 / num))
![Page 17: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/17.jpg)
Amir Barylko Beautiful JS with CS
EXISTENTIAL OPERATOR
• Checks if a variable is null or undefined
question = paragraph? and not createdDate?
defaultValue ?= 5
precendence = first ? 5
• It can be used to avoid TypeError exceptionextension = secondaryAddress?().phone?.extension
![Page 18: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/18.jpg)
Amir Barylko Beautiful JS with CS
CLASSES
class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data
![Page 19: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/19.jpg)
Amir Barylko Beautiful JS with CS
INHERITANCE
• One class can extend another
class Shape
constructor: (@width) ->
class Square extends Shape computeArea: -> Math.pow @width, 2
class Circle extends Shape radius: -> @width / 2 computeArea: -> Math.PI * Math.pow @radius(), 2
![Page 20: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/20.jpg)
Amir Barylko Beautiful JS with CS
COMPLAINS(Go ahead, say it)
![Page 21: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/21.jpg)
Amir Barylko Beautiful JS with CS
I ALREADY KNOW JS
•Continuous learning
•Benefits outweigh effort
•Generates way better code
•Do your duty as developer!
![Page 22: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/22.jpg)
Amir Barylko Beautiful JS with CS
EXTRA COMPILATION STEP
•.NET and Java frameworks will do it for you
•Or tools will watch your folder and generate it for you
•Hardly notice the extra work
![Page 23: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/23.jpg)
Amir Barylko Beautiful JS with CS
DEBUGGING IS HARD
•Same variable names
•Just set a breakpoint in the code
•and add watches, etc....
![Page 24: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/24.jpg)
Amir Barylko Beautiful JS with CS
TESTING & 3RD PARTY
•Is just Javascript
•so use Jasmine
•or Qunit
•any other....
![Page 25: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/25.jpg)
Amir Barylko Advanced Design Patterns
QUESTIONS?
![Page 26: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/26.jpg)
Amir Barylko Beautiful JS with CS
RESOURCES
• Email: [email protected], @abarylko
• Slides & Source: http://www.orthocoders.com/presentations
• http://coffeescript.org
• https://github.com/sleepyfox/coffeescript-koans
• http://pivotal.github.com/jasmine/
• http://qunitjs.com/
• http://nodejs.org/
![Page 27: SDEC12 Beautiful javascript with coffeescript](https://reader033.vdocuments.net/reader033/viewer/2022042713/54540bbfaf79597c338b4a8f/html5/thumbnails/27.jpg)
Amir Barylko Beautiful JS with CS
RESOURCES II