Beutiful javascript with coffeescript

Amir Barylko Advanced Design Patterns

Beautiful Javascript with

Coffeescriptwith Amir Barylko

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!


RESOURCES

• Email: [email protected]

• Twitter : @abarylko

• Blog: http://www.orthocoders.com

•Materials: http://www.orthocoders.com/presentations


COFFEESCRIPT


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


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/


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


FUNCTIONS

•The arrow/lambda defines functionssquare = (x) -> x * x

•Parenthesis are optional when passing parameters storageDelete movieId, true


FUNCTIONS II

• Implicit return(the last expression is the return value)

•Multiple lines, indentation is importantdeleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)


OBJECTS AS HASHES

•Declared using indentation

config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"


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]


DESTRUCTURING ASSIGNMENT

•Multiple assignments

[firstName, nick, last] = ['D\'Arcy', 'Baconator', 'Lussier']

•Splat

reviews = [45, 29, 21, 10, 8, 4]

[best, secondBest, theRest...] = reviews


CONDITIONALS

•Classic if does not need parenthesisif isJson callIndex() display()else showMessage()

•Or use unless for the negated form


MODIFIERS

•The conditionals can be use as modifiers

callIndex() if isJson

exit() unless validated and inContext


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


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))


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


CLASSES

class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data


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


COMPLAINS(Go ahead, say it)


I ALREADY KNOW JS

•Continuous learning

•Benefits outweigh effort

•Generates way better code

•Do your duty as developer!


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


DEBUGGING IS HARD

•Same variable names

• Just set a breakpoint in the code

•and add watches, etc....


TESTING & 3RD PARTY

• Is just Javascript

•so use Jasmine

•or Qunit

•any other....

Amir Barylko Advanced Design Patterns

QUESTIONS?


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/


RESOURCES II

Beutiful javascript with coffeescript

Documents

Transcript of Beutiful javascript with coffeescript