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

363

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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. Beautiful Javascript with Coffeescript with Amir BarylkoAmir Barylko Advanced Design Patterns
  • 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. RESOURCES • Email: amir@barylko.com • Twitter: @abarylko • Blog: http://www.orthocoders.com • Materials: http://www.orthocoders.com/presentationsAmir Barylko Beautiful JS with CS
  • 4. COFFEESCRIPTAmir Barylko Beautiful JS with CS
  • 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. 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. 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. 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. 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. OBJECTS AS HASHES • Declared using indentation config = local: user: dev pwd: dev123 remote: user: superdev pwd: "impossibleToGuess"Amir Barylko Beautiful JS with CS
  • 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. 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. 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. MODIFIERS • The conditionals can be use as modifiers callIndex() if isJson exit() unless validated and inContextAmir Barylko Beautiful JS with CS
  • 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. 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. 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. CLASSES class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append dataAmir Barylko Beautiful JS with CS
  • 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. COMPLAINS (Go ahead, say it)Amir Barylko Beautiful JS with CS
  • 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. 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. DEBUGGING IS HARD • Same variable names • Just set a breakpoint in the code • and add watches, etc....Amir Barylko Beautiful JS with CS
  • 24. TESTING & 3RD PARTY • Is just Javascript • so use Jasmine • or Qunit • any other....Amir Barylko Beautiful JS with CS
  • 25. QUESTIONS?Amir Barylko Advanced Design Patterns
  • 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. RESOURCES IIAmir Barylko Beautiful JS with CS

×