SDEC12 Beautiful javascript with coffeescript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

SDEC12 Beautiful javascript with coffeescript

on

  • 808 views

Presentation done at SDEC12

Presentation done at SDEC12

Statistics

Views

Total Views
808
Views on SlideShare
808
Embed Views
0

Actions

Likes
0
Downloads
8
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

SDEC12 Beautiful javascript with coffeescript Presentation Transcript

  • 1. Beau%ful  Javascript with  Coffeescript 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