Intro to CoffeeScript

1,221 views

Published on

This is

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

  • Be the first to like this

No Downloads
Views
Total views
1,221
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to CoffeeScript

  1. 1. The Billy D. Williams of Client Side Scripting<br />Jeremy Woertink<br />
  2. 2. The cool side of JavaScript<br /><ul><li>1 to 1 with JavaScript
  3. 3. Cleaner Syntax
  4. 4. OOP style coding
  5. 5. Rubyish!
  6. 6. Built into Rails 3.1</li></li></ul><li>Venti mocha latte, please!<br />note: I have no idea what that actualy is<br />
  7. 7. JavaScript<br />var i, bean, beans, count;<br /> bean ='columbian';<br /> beans = [];<br /> beans.push(bean);<br /> count = beans.length;<br />if(typeof bean !=='undefined'&& bean !==null) {<br /> alert('We have a '+bean+' bean');<br /> }<br />for(i =0;i < count; i++) {<br /> alert(beans[i]);<br /> }<br />
  8. 8. CoffeeScript<br /> bean ='columbian'<br /> beans = [] <br /> beans.push bean <br /> count = beans.length # not needed<br /> alert "We have a #{bean} bean" if bean?<br /> alert bean for bean in beans<br />
  9. 9. Grande Chai Code Light<br />Installing:<br />Install NodeJS<br />http://nodejs.org/<br />Install NPM<br />http://npmjs.org/<br />npm install coffee-script<br />gem "barista"<br />https://github.com/Sutto/barista<br />
  10. 10. Brewing an App<br />Rails 3 with Barista<br />rails g barista:install<br />Rails.root.join("app", "assets", "javascripts")<br />app/assets/javascripts/application.coffee<br />GO!<br />
  11. 11. Tell me more about Coffee<br />
  12. 12. Coffee Extras<br />Cool things about the CoffeeScript<br /><ul><li>Default argument values
  13. 13. no more braces
  14. 14. no more semi colons
  15. 15. a lot less parenthesis
  16. 16. array splats
  17. 17. english operators (and, is, isnt, until...)
  18. 18. existence operators (?, ?.)
  19. 19. class definitions
  20. 20. embedded oldschool JS
  21. 21. Interactive CLI (coffee to get in, quit() to exit)</li></li></ul><li>What about decaf?<br />
  22. 22. jQuery<br />$(function() {<br />$('#link').click(function() {<br />$(this.hash).show('fast', function() {<br />//this fails. the scope of "this" is <div id="container"><br />$(this.hash).text("Here is a "+ this.title);<br /> });<br /> });<br /> });<br />/* HTML <br /><a id="link" href="#container" title="Big Box">Click</a><br />*/<br />
  23. 23. jQuery flavored CoffeeScript<br />$-><br />$('#link').click -><br />$(@hash).show 'fast', =><br />$(@hash).text "Here is a #{@title}"<br />/* HTML <br /><a id="link" href="#container" title="Big Box">Click</a><br />*/<br />
  24. 24. Ready to pour a cup?<br />

×