Your SlideShare is downloading. ×
0
Beau%ful	  Javascript                with	  Coffeescript                  Amir	  BarylkoAmir Barylko              Advanced ...
WHO AM I?  • Software     quality expert  • Architect  • Developer  • Mentor  • Great      cook  • The    one who’s entert...
RESOURCES  • Email: amir@barylko.com  • Twitter: @abarylko  • Blog: http://www.orthocoders.com  • Materials: http://www.or...
COFFEESCRIPTAmir Barylko                  Beautiful JS with CS
WHAT’S WRONG WITH JS  • Too    verbose (too many { and } )  • Global Variables  • Lacks      support for classes  • Hard  ...
WHAT IS IT?    “CoffeeScript is a little language that compiles    into JavaScript. Underneath all those awkward    braces...
STRING INTERPOLATION  • You  can concatenate inside a double quote string    using the “#” and “{ }”    "The result is #{3...
FUNCTIONS  • The        arrow/lambda defines functions    square = (x) -> x * x  • Parenthesis     are optional when passin...
FUNCTIONS II  • Implicit   return    (the last expression is the return value)  •Multiple    lines, indentation is importa...
OBJECTS AS HASHES  • Declared    using indentation     config =       local:         user:    dev         pwd:     dev123 ...
ARRAYS  • Arrays     are declared with “[ ]”    deploy = [local, remote, uat]    fib = [1, 3, 5, 8, 13, 21]  • Slicing    ...
DESTRUCTURING                 ASSIGNMENT  • Multiple   assignments    [firstName, nick, last] = [DArcy, Baconator, Lussier...
CONDITIONALS  • Classic    if does not need parenthesis    if isJson      callIndex()      display()    else      showMess...
MODIFIERS  • The        conditionals can be use as modifiers    callIndex() if isJson    exit() unless validated and inCont...
SWITCH  • Selects    between multiple conditions    movieReview = (critic, movie) ->      switch critic        when Jay   ...
LIST COMPREHENSION  • Iterate     and call a function over each element    deploy env for env in [local, uat, prod]  • Or ...
EXISTENTIAL OPERATOR  • Checks     if a variable is null or undefined    question = paragraph? and not createdDate?    defa...
CLASSES     class MovieRepository      constructor: (@baseUrl) ->      newMovie: ->        $.ajax          url: "#{@baseUr...
INHERITANCE  • One        class can extend another    class Shape       constructor: (@width) ->    class Square extends S...
COMPLAINS                (Go ahead, say it)Amir Barylko                         Beautiful JS with CS
I ALREADY KNOW JS  •Continuous          learning  •Benefits         outweigh effort  •Generates          way better code  •...
EXTRA COMPILATION STEP  • .NET       and Java frameworks will do it for you  • Or  tools will watch your folder and genera...
DEBUGGING IS HARD  • Same         variable names  • Just       set a breakpoint in the code  • and        add watches, etc...
TESTING & 3RD PARTY  • Is   just Javascript  • so    use Jasmine  • or    Qunit  • any        other....Amir Barylko       ...
QUESTIONS?Amir Barylko                Advanced Design Patterns
RESOURCES  •   Email: amir@barylko.com, @abarylko  •   Slides & Source: http://www.orthocoders.com/presentations  •   http...
RESOURCES IIAmir Barylko                  Beautiful JS with CS
Upcoming SlideShare
Loading in...5
×

SDEC12 Beautiful javascript with coffeescript

485

Published on

Presentation done at SDEC12

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

  • Be the first to like this

No Downloads
Views
Total Views
485
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "SDEC12 Beautiful javascript with coffeescript"

  1. 1. Beau%ful  Javascript with  Coffeescript 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×