The Billy D. Williams of Client Side Scripting

Jeremy Woertink

The cool side of JavaScript

•1 to 1 with JavaScript•Cleaner Syntax•OOP style coding•Rubyish!•Built into Rails 3.1

Venti mocha latte, please!

note: I have no idea what that actualy is

JavaScript

var i, bean, beans, count; bean = 'columbian'; beans = []; beans.push(bean); count = beans.length; if(typeof bean !== 'undefined' && bean !== null) { alert('We have a '+bean+' bean'); } for(i = 0;i < count; i++) { alert(beans[i]); }

CoffeeScript

bean = 'columbian' beans = [] beans.push bean count = beans.length # not needed alert "We have a #{bean} bean" if bean? alert bean for bean in beans

Grande Chai Code Light

Installing:1.Install NodeJS2.http://nodejs.org/3.Install NPM4.http://npmjs.org/5.npm install coffee-script6.gem "barista"7.https://github.com/Sutto/barista

Brewing an App

Rails 3 with Barista1.rails g barista:install2.Rails.root.join("app", "assets", "javascripts")3.app/assets/javascripts/application.coffee4.GO!

Tell me more about Coffee

Coffee Extras

Cool things about the CoffeeScript•Default argument values•no more braces•no more semi colons•a lot less parenthesis•array splats•english operators (and, is, isnt, until...)•existence operators (?, ?.)•class definitions•embedded oldschool JS•Interactive CLI (coffee to get in, quit() to exit)

What about decaf?

jQuery

$(function() { $('#link').click(function() { $(this.hash).show('fast', function() { //this fails. the scope of "this" is <div id="container"> $(this.hash).text("Here is a " + this.title); }); }); });

/* HTML <a id="link" href="#container" title="Big Box">Click</a>*/

jQuery flavored CoffeeScript

$ -> $('#link').click -> $(@hash).show 'fast', => $(@hash).text "Here is a #{@title}"

/* HTML <a id="link" href="#container" title="Big Box">Click</a>*/

Ready to pour a cup?