Your SlideShare is downloading. ×
Amir Barylko MavenThought Inc.AMIR BARYLKOBEAUTIFUL JSWITHCOFFEESCRIPT
Amir Barylko Beautiful JS with CSWHO AM I?• Software quality expert• Architect• Developer• Mentor• Great cook• The one who...
Amir Barylko Beautiful JS with CSRESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com•...
Amir Barylko Beautiful JS with CSCOFFEESCRIPT
Amir Barylko Beautiful JS with CSWHAT’S WRONG WITH JS• Too verbose (too many { and } )• GlobalVariables• Lacks support for...
Amir Barylko Beautiful JS with CSWHAT IS IT?“CoffeeScript is a little language that compiles intoJavaScript. Underneath al...
Amir Barylko Beautiful JS with CSSTRING INTERPOLATION•You can concatenate inside a double quote stringusing the “#” and “{...
Amir Barylko Beautiful JS with CSFUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional...
Amir Barylko Beautiful JS with CSFUNCTIONS II•Implicit return(the last expression is the return value)•Multiple lines, ind...
Amir Barylko Beautiful JS with CSOBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user...
Amir Barylko Beautiful JS with CSARRAYS•Arrays are declared with “[ ]”deploy = [local, remote, uat]fib = [1, 3, 5, 8, 13, ...
Amir Barylko Beautiful JS with CSDESTRUCTURINGASSIGNMENT•Multiple assignments[firstName, nick, last] = [DArcy, Baconator, ...
Amir Barylko Beautiful JS with CSCONDITIONALS•Classic if does not need parenthesisif isJsoncallIndex()display()elseshowMes...
Amir Barylko Beautiful JS with CSMODIFIERS•The conditionals can be use as modifierscallIndex() if isJsonexit() unless valid...
Amir Barylko Beautiful JS with CSSWITCH• Selects between multiple conditionsmovieReview = (critic, movie) ->switch criticw...
Amir Barylko Beautiful JS with CSLIST COMPREHENSION•Iterate and call a function over each elementdeploy env for env in [lo...
Amir Barylko Beautiful JS with CSEXISTENTIAL OPERATOR• Checks if a variable is null or undefinedquestion = paragraph? and n...
Amir Barylko Beautiful JS with CSCLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}...
Amir Barylko Beautiful JS with CSINHERITANCE• One class can extend anotherclass Shapeconstructor: (@width) ->class Square ...
Amir Barylko Beautiful JS with CSCOMPLAINS(Go ahead, say it)
Amir Barylko Beautiful JS with CSI ALREADY KNOW JS•Continuous learning•Benefits outweigh effort•Generates way better code•D...
Amir Barylko Beautiful JS with CSEXTRA COMPILATION STEP•.NET and Java frameworks will do it for you•Or tools will watch yo...
Amir Barylko Beautiful JS with CSDEBUGGING IS HARD•Same variable names•Just set a breakpoint in the code•and add watches, ...
Amir Barylko Beautiful JS with CSTESTING & 3RD PARTY•Is just Javascript•so use Jasmine•or Qunit•any other....
Amir Barylko Advanced Design PatternsQUESTIONS?
Amir Barylko Beautiful JS with CSRESOURCES• Email: amir@barylko.com, @abarylko• Slides & Source: http://www.orthocoders.co...
Amir Barylko Beautiful JS with CSRESOURCES II
Upcoming SlideShare
Loading in...5
×

Beutiful javascript with coffeescript

318

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
318
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Beutiful javascript with coffeescript"

  1. 1. Amir Barylko MavenThought Inc.AMIR BARYLKOBEAUTIFUL JSWITHCOFFEESCRIPT
  2. 2. Amir Barylko Beautiful JS with CSWHO AM I?• Software quality expert• Architect• Developer• Mentor• Great cook• The one who’s entertaining you for the next hour!
  3. 3. Amir Barylko Beautiful JS with CSRESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  4. 4. Amir Barylko Beautiful JS with CSCOFFEESCRIPT
  5. 5. Amir Barylko Beautiful JS with CSWHAT’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. 6. Amir Barylko Beautiful JS with CSWHAT IS IT?“CoffeeScript is a little language that compiles intoJavaScript. Underneath all those awkward braces andsemicolons, JavaScript has always had a gorgeousobject model at its heart. CoffeeScript is an attemptto expose the good parts of JavaScript in a simpleway.”http://coffeescript.org/
  7. 7. Amir Barylko Beautiful JS with CSSTRING INTERPOLATION•You can concatenate inside a double quote stringusing the “#” and “{ }”"The result is #{3}" == "The result is 3"•Or use any expression"/movies/#{id}"
  8. 8. Amir Barylko Beautiful JS with CSFUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional when passingparametersstorageDelete movieId, true
  9. 9. Amir Barylko Beautiful JS with CSFUNCTIONS II•Implicit return(the last expression is the return value)•Multiple lines, indentation is importantdeleteMovie = (e) ->movieId = $(e.target)....storageDelete(movieId)
  10. 10. Amir Barylko Beautiful JS with CSOBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
  11. 11. Amir Barylko Beautiful JS with CSARRAYS•Arrays are declared with “[ ]”deploy = [local, remote, uat]fib = [1, 3, 5, 8, 13, 21]•Slicingfirst = fib[0..3]noLast = fib[0..-2]
  12. 12. Amir Barylko Beautiful JS with CSDESTRUCTURINGASSIGNMENT•Multiple assignments[firstName, nick, last] = [DArcy, Baconator, Lussier]•Splatreviews = [45, 29, 21, 10, 8, 4][best, secondBest, theRest...] = reviews
  13. 13. Amir Barylko Beautiful JS with CSCONDITIONALS•Classic if does not need parenthesisif isJsoncallIndex()display()elseshowMessage()•Or use unless for the negated form
  14. 14. Amir Barylko Beautiful JS with CSMODIFIERS•The conditionals can be use as modifierscallIndex() if isJsonexit() unless validated and inContext
  15. 15. Amir Barylko Beautiful JS with CSSWITCH• Selects between multiple conditionsmovieReview = (critic, movie) ->switch criticwhen JayIt Stinks!when Darcyif movie.match(/Bacon/) then...elsethrow new Error(Invalid critic name!)
  16. 16. Amir Barylko Beautiful JS with CSLIST 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))
  17. 17. Amir Barylko Beautiful JS with CSEXISTENTIAL OPERATOR• Checks if a variable is null or undefinedquestion = paragraph? and not createdDate?defaultValue ?= 5precendence = first ? 5• It can be used to avoidTypeError exceptionextension = secondaryAddress?().phone?.extension
  18. 18. Amir Barylko Beautiful JS with CSCLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
  19. 19. Amir Barylko Beautiful JS with CSINHERITANCE• One class can extend anotherclass Shapeconstructor: (@width) ->class Square extends ShapecomputeArea: -> Math.pow @width, 2class Circle extends Shaperadius: -> @width / 2computeArea: -> Math.PI * Math.pow @radius(), 2
  20. 20. Amir Barylko Beautiful JS with CSCOMPLAINS(Go ahead, say it)
  21. 21. Amir Barylko Beautiful JS with CSI ALREADY KNOW JS•Continuous learning•Benefits outweigh effort•Generates way better code•Do your duty as developer!
  22. 22. Amir Barylko Beautiful JS with CSEXTRA COMPILATION STEP•.NET and Java frameworks will do it for you•Or tools will watch your folder and generate itfor you•Hardly notice the extra work
  23. 23. Amir Barylko Beautiful JS with CSDEBUGGING IS HARD•Same variable names•Just set a breakpoint in the code•and add watches, etc....
  24. 24. Amir Barylko Beautiful JS with CSTESTING & 3RD PARTY•Is just Javascript•so use Jasmine•or Qunit•any other....
  25. 25. Amir Barylko Advanced Design PatternsQUESTIONS?
  26. 26. Amir Barylko Beautiful JS with CSRESOURCES• 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. 27. Amir Barylko Beautiful JS with CSRESOURCES II

×