Your SlideShare is downloading. ×
0
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beutiful javascript with coffeescript

302

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
302
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Amir Barylko MavenThought Inc.AMIR BARYLKOBEAUTIFUL JSWITHCOFFEESCRIPT
  • 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. Amir Barylko Beautiful JS with CSRESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  • 4. Amir Barylko Beautiful JS with CSCOFFEESCRIPT
  • 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. 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. 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. Amir Barylko Beautiful JS with CSFUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional when passingparametersstorageDelete movieId, true
  • 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. Amir Barylko Beautiful JS with CSOBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
  • 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. 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. Amir Barylko Beautiful JS with CSCONDITIONALS•Classic if does not need parenthesisif isJsoncallIndex()display()elseshowMessage()•Or use unless for the negated form
  • 14. Amir Barylko Beautiful JS with CSMODIFIERS•The conditionals can be use as modifierscallIndex() if isJsonexit() unless validated and inContext
  • 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. 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. 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. Amir Barylko Beautiful JS with CSCLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
  • 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. Amir Barylko Beautiful JS with CSCOMPLAINS(Go ahead, say it)
  • 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. 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. Amir Barylko Beautiful JS with CSDEBUGGING IS HARD•Same variable names•Just set a breakpoint in the code•and add watches, etc....
  • 24. Amir Barylko Beautiful JS with CSTESTING & 3RD PARTY•Is just Javascript•so use Jasmine•or Qunit•any other....
  • 25. Amir Barylko Advanced Design PatternsQUESTIONS?
  • 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. Amir Barylko Beautiful JS with CSRESOURCES II

×