![Amir Barylko Beautiful JS with CS
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]](https://image.slidesharecdn.com/beutifuljavascriptwithcoffeescript-130529083751-phpapp01/85/Beutiful-javascript-with-coffeescript-11-320.jpg)
![Amir Barylko Beautiful JS with CS
DESTRUCTURING
ASSIGNMENT
•Multiple assignments
[firstName, nick, last] = ['D'Arcy', 'Baconator', 'Lussier']
•Splat
reviews = [45, 29, 21, 10, 8, 4]
[best, secondBest, theRest...] = reviews](https://image.slidesharecdn.com/beutifuljavascriptwithcoffeescript-130529083751-phpapp01/85/Beutiful-javascript-with-coffeescript-12-320.jpg)
![Amir Barylko Beautiful JS with CS
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))](https://image.slidesharecdn.com/beutifuljavascriptwithcoffeescript-130529083751-phpapp01/85/Beutiful-javascript-with-coffeescript-16-320.jpg)
Uploaded byAmir Barylko
Beutiful javascript with coffeescript
- The document is a presentation by Amir Barylko about CoffeeScript and its benefits over JavaScript. - CoffeeScript is a language that compiles to JavaScript, exposing the good parts of JavaScript in a simpler way. It adds features like string interpolation, implicit returns, destructuring assignment, and classes. - While some argue JavaScript is enough or that the extra compilation step is difficult, CoffeeScript produces cleaner code and the benefits outweigh the costs according to Barylko. It can be tested and used with third party libraries as JavaScript.
More Related Content
Similar to Beutiful javascript with coffeescript
Beutiful javascript with coffeescript
- 1. Amir Barylko MavenThoughtInc. AMIR BARYLKO BEAUTIFUL JS WITH COFFEESCRIPT
- 2. Amir Barylko BeautifulJS with CS WHO AM I? • Software quality expert • Architect • Developer • Mentor • Great cook • The one who’s entertaining you for the next hour!
- 3. Amir Barylko BeautifulJS with CS RESOURCES • Email: amir@barylko.com • Twitter: @abarylko • Blog: http://www.orthocoders.com • Materials: http://www.orthocoders.com/presentations
- 4. Amir Barylko BeautifulJS with CS COFFEESCRIPT
- 5. Amir Barylko BeautifulJS with CS WHAT’S WRONG WITH JS • Too verbose (too many { and } ) • GlobalVariables • 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
- 6. Amir Barylko BeautifulJS with CS 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/
- 7. Amir Barylko BeautifulJS with CS 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}"
- 8. Amir Barylko BeautifulJS with CS FUNCTIONS •The arrow/lambda defines functions square = (x) -> x * x •Parenthesis are optional when passing parameters storageDelete movieId, true
- 9. Amir Barylko BeautifulJS with CS FUNCTIONS II •Implicit return (the last expression is the return value) •Multiple lines, indentation is important deleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)
- 10. Amir Barylko BeautifulJS with CS OBJECTS AS HASHES •Declared using indentation config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"
- 11. Amir Barylko BeautifulJS with CS 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]
- 12. Amir Barylko BeautifulJS with CS DESTRUCTURING ASSIGNMENT •Multiple assignments [firstName, nick, last] = ['D'Arcy', 'Baconator', 'Lussier'] •Splat reviews = [45, 29, 21, 10, 8, 4] [best, secondBest, theRest...] = reviews
- 13. Amir Barylko BeautifulJS with CS CONDITIONALS •Classic if does not need parenthesis if isJson callIndex() display() else showMessage() •Or use unless for the negated form
- 14. Amir Barylko BeautifulJS with CS MODIFIERS •The conditionals can be use as modifiers callIndex() if isJson exit() unless validated and inContext
- 15. Amir Barylko BeautifulJS with CS 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!')
- 16. Amir Barylko BeautifulJS with CS 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))
- 17. Amir Barylko BeautifulJS with CS 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 avoidTypeError exception extension = secondaryAddress?().phone?.extension
- 18. Amir Barylko BeautifulJS with CS CLASSES class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data
- 19. Amir Barylko BeautifulJS with CS 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
- 20. Amir Barylko BeautifulJS with CS COMPLAINS (Go ahead, say it)
- 21. Amir Barylko BeautifulJS with CS I ALREADY KNOW JS •Continuous learning •Benefits outweigh effort •Generates way better code •Do your duty as developer!
- 22. Amir Barylko BeautifulJS with CS 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
- 23. Amir Barylko BeautifulJS with CS DEBUGGING IS HARD •Same variable names •Just set a breakpoint in the code •and add watches, etc....
- 24. Amir Barylko BeautifulJS with CS TESTING & 3RD PARTY •Is just Javascript •so use Jasmine •or Qunit •any other....
- 25. Amir Barylko AdvancedDesign Patterns QUESTIONS?
- 26. Amir Barylko BeautifulJS with CS 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/
- 27. Amir Barylko BeautifulJS with CS RESOURCES II