Downloaded 10 times
![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](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/85/SDEC12-Beautiful-javascript-with-coffeescript-11-320.jpg)
![DESTRUCTURING
ASSIGNMENT
• Multiple assignments
[firstName, nick, last] = ['D'Arcy', 'Baconator', 'Lussier']
• Splat
reviews = [45, 29, 21, 10, 8, 4]
[best, secondBest, theRest...] = reviews
Amir Barylko Beautiful JS with CS](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/85/SDEC12-Beautiful-javascript-with-coffeescript-12-320.jpg)
![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](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/85/SDEC12-Beautiful-javascript-with-coffeescript-16-320.jpg)
![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](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/75/SDEC12-Beautiful-javascript-with-coffeescript-11-2048.jpg)
![DESTRUCTURING
ASSIGNMENT
• Multiple assignments
[firstName, nick, last] = ['D'Arcy', 'Baconator', 'Lussier']
• Splat
reviews = [45, 29, 21, 10, 8, 4]
[best, secondBest, theRest...] = reviews
Amir Barylko Beautiful JS with CS](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/75/SDEC12-Beautiful-javascript-with-coffeescript-12-2048.jpg)
![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](https://image.slidesharecdn.com/sdec12beutifuljavascriptwithcoffeescript-121015150700-phpapp02/75/SDEC12-Beautiful-javascript-with-coffeescript-16-2048.jpg)
Uploaded byAmir Barylko
SDEC12 Beautiful javascript with coffeescript
The document is a presentation by Amir Barylko about Coffeescript. It introduces Coffeescript and highlights some of its key features like string interpolation, functions, objects, arrays, conditionals, classes and inheritance. It also addresses some common complaints about Coffeescript and provides additional resources for learning more.
SDEC12 Beautiful javascript with coffeescript
- 1. Beau%ful Javascript with Coffeescript Amir Barylko Amir 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/presentations Amir Barylko Beautiful JS with CS
- 4. COFFEESCRIPT Amir Barylko Beautiful JS with CS
- 5. WHAT’S WRONG WITHJS • 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 number Amir 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, true Amir 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] = ['D'Arcy', 'Baconator', 'Lussier'] • Splat reviews = [45, 29, 21, 10, 8, 4] [best, secondBest, theRest...] = reviews Amir 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 form Amir Barylko Beautiful JS with CS
- 14. MODIFIERS •The conditionals can be use as modifiers callIndex() if isJson exit() unless validated and inContext Amir 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?.extension Amir Barylko Beautiful JS with CS
- 18. CLASSES class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data Amir 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(), 2 Amir Barylko Beautiful JS with CS
- 20. COMPLAINS (Go ahead, say it) Amir Barylko Beautiful JS with CS
- 21. I ALREADY KNOWJS •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 work Amir 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 & 3RDPARTY • 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 II Amir Barylko Beautiful JS with CS