Your SlideShare is downloading. ×
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

294
views

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

×