Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beutiful javascript with coffeescript

784 views

Published on

  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Beutiful javascript with coffeescript

  1. 1. Beautiful Javascript with Coffeescript with Amir BarylkoAmir Barylko Advanced Design Patterns
  2. 2. WHO 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 CS
  3. 3. RESOURCES • Email: amir@barylko.com • Twitter: @abarylko • Blog: http://www.orthocoders.com • Materials: http://www.orthocoders.com/presentationsAmir Barylko Beautiful JS with CS
  4. 4. COFFEESCRIPTAmir Barylko Beautiful JS with CS
  5. 5. WHAT’S WRONG WITH JS • Too verbose (too many { and } ) • Global Variables • Lacks support for classes • Hard to make inheritance • Automatic type conversion between strings and numbers • NaN is not a number, however it is a numberAmir Barylko Beautiful JS with CS
  6. 6. WHAT IS IT? “CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.” http://coffeescript.org/Amir Barylko Beautiful JS with CS
  7. 7. STRING INTERPOLATION • You can concatenate inside a double quote string using the “#” and “{ }” "The result is #{3}" == "The result is 3" • Or use any expression "/movies/#{id}"Amir Barylko Beautiful JS with CS
  8. 8. FUNCTIONS • The arrow/lambda defines functions square = (x) -> x * x • Parenthesis are optional when passing parameters storageDelete movieId, trueAmir Barylko Beautiful JS with CS
  9. 9. FUNCTIONS II • Implicit return (the last expression is the return value) •Multiple lines, indentation is important deleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)Amir Barylko Beautiful JS with CS
  10. 10. OBJECTS AS HASHES • Declared using indentation config = local: user: dev pwd: dev123 remote: user: superdev pwd: "impossibleToGuess"Amir Barylko Beautiful JS with CS
  11. 11. ARRAYS • Arrays are declared with “[ ]” deploy = [local, remote, uat] fib = [1, 3, 5, 8, 13, 21] • Slicing first = fib[0..3] noLast = fib[0..-2]Amir Barylko Beautiful JS with CS
  12. 12. DESTRUCTURING ASSIGNMENT • Multiple assignments [firstName, nick, last] = [DArcy, Baconator, Lussier] • Splat reviews = [45, 29, 21, 10, 8, 4] [best, secondBest, theRest...] = reviewsAmir Barylko Beautiful JS with CS
  13. 13. CONDITIONALS • Classic if does not need parenthesis if isJson callIndex() display() else showMessage() • Or use unless for the negated formAmir Barylko Beautiful JS with CS
  14. 14. MODIFIERS • The conditionals can be use as modifiers callIndex() if isJson exit() unless validated and inContextAmir Barylko Beautiful JS with CS
  15. 15. SWITCH • Selects between multiple conditions movieReview = (critic, movie) -> switch critic when Jay It Stinks! when Darcy if movie.match(/Bacon/) then... else throw new Error(Invalid critic name!)Amir Barylko Beautiful JS with CS
  16. 16. LIST COMPREHENSION • Iterate and call a function over each element deploy env for env in [local, uat, prod] • Or filter over a collection nums = (num for num in [1..960] when isInteger(960 / num))Amir Barylko Beautiful JS with CS
  17. 17. EXISTENTIAL OPERATOR • Checks if a variable is null or undefined question = paragraph? and not createdDate? defaultValue ?= 5 precendence = first ? 5 • It can be used to avoid TypeError exception extension = secondaryAddress?().phone?.extensionAmir Barylko Beautiful JS with CS
  18. 18. CLASSES class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append dataAmir Barylko Beautiful JS with CS
  19. 19. INHERITANCE • One class can extend another class Shape constructor: (@width) -> class Square extends Shape computeArea: -> Math.pow @width, 2 class Circle extends Shape radius: -> @width / 2 computeArea: -> Math.PI * Math.pow @radius(), 2Amir Barylko Beautiful JS with CS
  20. 20. COMPLAINS (Go ahead, say it)Amir Barylko Beautiful JS with CS
  21. 21. I ALREADY KNOW JS •Continuous learning •Benefits outweigh effort •Generates way better code •Do your duty as developer!Amir Barylko Beautiful JS with CS
  22. 22. EXTRA COMPILATION STEP • .NET and Java frameworks will do it for you • Or tools will watch your folder and generate it for you • Hardly notice the extra workAmir Barylko Beautiful JS with CS
  23. 23. DEBUGGING IS HARD • Same variable names • Just set a breakpoint in the code • and add watches, etc....Amir Barylko Beautiful JS with CS
  24. 24. TESTING & 3RD PARTY • Is just Javascript • so use Jasmine • or Qunit • any other....Amir Barylko Beautiful JS with CS
  25. 25. QUESTIONS?Amir Barylko Advanced Design Patterns
  26. 26. RESOURCES • 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 CS
  27. 27. RESOURCES IIAmir Barylko Beautiful JS with CS

×