1. Amir Barylko MavenThought Inc.
AMIR BARYLKO
BEAUTIFUL JS
WITH
COFFEESCRIPT

2. 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!

3. Amir Barylko Beautiful JS with CS
RESOURCES
• Email: amir@barylko.com
• Twitter: @abarylko
• Blog: http://www.orthocoders.com
• Materials: http://www.orthocoders.com/presentations

4. Amir Barylko Beautiful JS with CS
COFFEESCRIPT

5. Amir Barylko Beautiful JS with CS
WHAT’S WRONG WITH JS
• Too verbose (too many { and } )
• GlobalVariables
• 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

6. 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/

7. 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}"

8. Amir Barylko Beautiful JS with CS
FUNCTIONS
•The arrow/lambda defines functions
square = (x) -> x * x
•Parenthesis are optional when passing
parameters
storageDelete movieId, true

9. Amir Barylko Beautiful JS with CS
FUNCTIONS II
•Implicit return
(the last expression is the return value)
•Multiple lines, indentation is important
deleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)

10. Amir Barylko Beautiful JS with CS
OBJECTS AS HASHES
•Declared using indentation
config =
local:
user: 'dev'
pwd: 'dev123'
remote:
user: 'superdev'
pwd: "impossibleToGuess"

11. 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]

12. 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

13. Amir Barylko Beautiful JS with CS
CONDITIONALS
•Classic if does not need parenthesis
if isJson
callIndex()
display()
else
showMessage()
•Or use unless for the negated form

14. Amir Barylko Beautiful JS with CS
MODIFIERS
•The conditionals can be use as modifiers
callIndex() if isJson
exit() unless validated and inContext

15. 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!')

16. Amir Barylko Beautiful JS with CS
LIST COMPREHENSION
•Iterate and call a function over each element
deploy env for env in ['local', 'uat', 'prod']
•Or filter over a collection
nums = (num for num in [1..960] when isInteger(960 / num))

17. 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 avoidTypeError exception
extension = secondaryAddress?().phone?.extension

18. Amir Barylko Beautiful JS with CS
CLASSES
class MovieRepository
constructor: (@baseUrl) ->
newMovie: ->
$.ajax
url: "#{@baseUrl}/movies/create"
success: (data) -> $(id).append data

19. 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

20. Amir Barylko Beautiful JS with CS
COMPLAINS
(Go ahead, say it)

21. Amir Barylko Beautiful JS with CS
I ALREADY KNOW JS
•Continuous learning
•Benefits outweigh effort
•Generates way better code
•Do your duty as developer!

22. 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

23. Amir Barylko Beautiful JS with CS
DEBUGGING IS HARD
•Same variable names
•Just set a breakpoint in the code
•and add watches, etc....

24. Amir Barylko Beautiful JS with CS
TESTING & 3RD PARTY
•Is just Javascript
•so use Jasmine
•or Qunit
•any other....

25. Amir Barylko Advanced Design Patterns
QUESTIONS?

26. Amir Barylko Beautiful JS with CS
RESOURCES
• Email: amir@barylko.com, @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/

27. Amir Barylko Beautiful JS with CS
RESOURCES II