• Save
Beutiful javascript with coffeescript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Beutiful javascript with coffeescript

on

  • 470 views

 

Statistics

Views

Total Views
470
Views on SlideShare
470
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Beutiful javascript with coffeescript Presentation 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