1. Beautiful Javascript
with
Coffeescript
with Amir Barylko
Amir Barylko Advanced Design Patterns

2. WHO AM I?
• Software quality expert
• Architect
• Developer
• Mentor
• Great cook
• The one who’s entertaining you for the next hour!
Amir Barylko Beautiful JS with CS

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

4. COFFEESCRIPT
Amir Barylko Beautiful JS with CS

5. 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
Amir Barylko Beautiful JS with CS

6. 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/
Amir Barylko Beautiful JS with CS

7. 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}"
Amir Barylko Beautiful JS with CS

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

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

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

11. 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]
Amir Barylko Beautiful JS with CS

12. DESTRUCTURING
ASSIGNMENT
• Multiple assignments
[firstName, nick, last] = ['D'Arcy', 'Baconator', 'Lussier']
• Splat
reviews = [45, 29, 21, 10, 8, 4]
[best, secondBest, theRest...] = reviews
Amir Barylko Beautiful JS with CS

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

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

15. 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!')
Amir Barylko Beautiful JS with CS

16. 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))
Amir Barylko Beautiful JS with CS

17. 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 exception
extension = secondaryAddress?().phone?.extension
Amir Barylko Beautiful JS with CS

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

19. 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
Amir Barylko Beautiful JS with CS

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

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

22. 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
Amir Barylko Beautiful JS with CS

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

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

25. QUESTIONS?
Amir Barylko Advanced Design Patterns

26. 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/
Amir Barylko Beautiful JS with CS

27. RESOURCES II
Amir Barylko Beautiful JS with CS