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

Beutiful javascript with coffeescript

on

  • 422 views

 

Statistics

Views

Total Views
422
Views on SlideShare
422
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 Beutiful javascript with coffeescript Presentation Transcript

  • 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’s entertaining you for the next hour!
  • Amir Barylko Beautiful JS with CSRESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  • 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 classes• Hard to make inheritance• Automatic type conversion between strings and numbers• NaN is not a number, however it is a number
  • 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/
  • 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}"
  • Amir Barylko Beautiful JS with CSFUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional when passingparametersstorageDelete movieId, true
  • 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)
  • Amir Barylko Beautiful JS with CSOBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
  • 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]
  • 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
  • Amir Barylko Beautiful JS with CSCONDITIONALS•Classic if does not need parenthesisif isJsoncallIndex()display()elseshowMessage()•Or use unless for the negated form
  • Amir Barylko Beautiful JS with CSMODIFIERS•The conditionals can be use as modifierscallIndex() if isJsonexit() unless validated and inContext
  • 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!)
  • 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))
  • 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
  • Amir Barylko Beautiful JS with CSCLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
  • 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
  • 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•Do your duty as developer!
  • 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
  • Amir Barylko Beautiful JS with CSDEBUGGING IS HARD•Same variable names•Just set a breakpoint in the code•and add watches, etc....
  • 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.com/presentations• http://coffeescript.org• https://github.com/sleepyfox/coffeescript-koans• http://pivotal.github.com/jasmine/• http://qunitjs.com/• http://nodejs.org/
  • Amir Barylko Beautiful JS with CSRESOURCES II