c o ff eescrip t
play

C o ff eeScrip t Hector Correa hector@hectorcorrea.com Monday, - PowerPoint PPT Presentation

Feb 19, 2024 •419 likes •767 views

A decaf introduction to C o ff eeScrip t Hector Correa hector@hectorcorrea.com Monday, June 18, 12 Agenda What is CoffeeScript Why CoffeeScript Code Samples (client and server side) Q&A Monday, June 18, 12 Whats not in

  1. A decaf introduction to C o ff eeScrip t Hector Correa hector@hectorcorrea.com Monday, June 18, 12

  2. Agenda • What is CoffeeScript • Why CoffeeScript • Code Samples (client and server side) • Q&A Monday, June 18, 12

  3. What’s not in the agenda • CoffeeScript Installation • Specific configurations • Node.js • Advanced Topics Monday, June 18, 12

  4. What is CoffeeScript? Monday, June 18, 12

  5. “CoffeeScript is a little language that compiles into JavaScript” http://coffeescript.org Monday, June 18, 12

  6. file: hello.coffee Type CoffeeScript ------------------ Code alert 'Hello World!' > coffee -c hello.coffee file: hello.js Compile to -------------- JavaScript alert('Hello World!'); file: index.html Reference ---------------- JavaScript <script in HTML type="text/javascript" src="hello.js"> </script> Monday, June 18, 12

  7. “CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.” http://coffeescript.org Monday, June 18, 12

  8. What’s wrong with this code? function priceWithTax(price, tax) { return price + (price * (tax / 100)); } What happens if another price = 100; priceWithTax function tax = 6.5; already exists? total = priceWithTax(price, tax); alert("Total = " + total); var not used Monday, June 18, 12

  9. Same Code in CoffeeScript priceWithTax = (price, tax) -> price + (price * (tax/100)) price = 100 tax = 12 total = priceWithTax(price, tax) alert "Total = #{total}" Monday, June 18, 12

  10. JavaScript generated by CoffeeScript (function() { Local var price, priceWithTax, tax, total; scope has been priceWithTax = function(price, tax) { All variables return price + (price * (tax / 100)); defined are declared }; (module (including the pattern) function) price = 100; tax = 12; total = priceWithTax(price, tax); alert("Total = " + total); }).call(this); Monday, June 18, 12

  11. The golden rule of CoffeeScript is: “It’s just JavaScript” http://coffeescript.org Monday, June 18, 12

  12. Why CoffeeScript? Monday, June 18, 12

  13. JavaScript development will continue to grow... Monday, June 18, 12

  14. JavaScript Growth “tremendous growth in JavaScript size – up 44% over the course of the year” http://www.stevesouders.com/blog/2012/02/01/http-archive-2011-recap/ Monday, June 18, 12

  15. CoffeeScript is a great way to manage this growth • Write less code • Clean and concise syntax • Easier to write good code • Produces correct JavaScript (“the good parts”) Monday, June 18, 12

  16. Show me the code Monday, June 18, 12

  17. Language Features • Syntactic sugar • Classes • Other features Monday, June 18, 12

  18. Syntactic Sugar • Functions (declaration, callbacks, default arguments) • Significant white space, string interpolation, equality operator • Existential and soak operators • Bare objects • Bound functions => Monday, June 18, 12

  19. Classes • Classes • Default arguments • Bound methods • Inheritance Monday, June 18, 12

  20. Other Features • Destructuring assignment • Conditional iteration (unless, while, loop) • Loops, arrays, ranges, and comprehensions • Everything is an expression Monday, June 18, 12

  21. CoffeeScript on the Server Side Monday, June 18, 12

  22. node.js • A server-side JavaScript interpreter • it uses the V8 JavaScript interpreter that Google wrote for Chrome... • ...and repurposes it for use on the server http://www.ibm.com/developerworks/opensource/library/os-nodejs/ Monday, June 18, 12

  23. “Node.js uses an event-driven, non- blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.” http://nodejs.org Monday, June 18, 12

  24. file: hello.coffee Type CoffeeScript ------------------ Code console.log 'Hello World!' Compile to JavaScript > coffee hello.coffee and Hello World! execute on the server (via node.js) Monday, June 18, 12

  25. Gotchas • Significant space will trip you initially • Debugging (source maps coming) • It’s not a framework, it does not give structure to your project Monday, June 18, 12

  26. Who is using CoffeeScript? Monday, June 18, 12

  27. “Trello started out as a pure JavaScript [after experimenting with CoffeeScript] we converted the rest of the code over and started coding CoffeeScript exclusively.” Brett Kiefer (January, 2012) http://blog.fogcreek.com/the-trello-tech-stack/ Monday, June 18, 12

  28. “[Basecamp Next] has just over 5,000 lines of CoffeeScript — almost as much as Ruby! This CoffeeScript compiles to about twice the lines of JavaScript” David Heinemeier Hansson (January/2012) http://37signals.com/svn/posts/3094-code-statistics-for-basecamp-next Monday, June 18, 12

  29. Summary Monday, June 18, 12

  30. “CoffeeScript isn’t just about prettier code. [...] It’s about being more confident that you got it right the first time, while knowing that you could change it all in just a few keystrokes.” Trevor Burnham Author of CoffeeScript Accelerated JavaScript Development http://pragprog.com/magazines/2011-05/a-coffeescript-intervention Monday, June 18, 12

  31. tl;dr CoffeeScript allows you to write less, cleaner, and better JavaScript code Monday, June 18, 12

  32. More Information • Visit http://coffeescript.org • Book: CoffeeScript Accelerated JavaScript Development by Trevor Burnham (The Pragmatic Programmers) • Code: https://github.com/hectorcorrea/ intro-to-coffeescript Monday, June 18, 12

  33. Questions? Monday, June 18, 12

  34. Thanks hector@hectorcorrea.com Monday, June 18, 12

Recommend

More recommend