CoffeeScript Application Development Cookbook

In this section, we will install the software necessary to develop applications with CoffeeScript.

One of the appealing aspects of developing applications using CoffeeScript is that it is well supported on Mac, Windows, and Linux machines. To get started, you need only a PC and an Internet connection.

CoffeeScript runs on top of Node.js—the event-driven, non-blocking I/O platform built on Chrome's JavaScript runtime. If you do not have Node.js installed, you can download an installation package for your Mac OS X, Linux, and Windows machines from the start page of the Node.js website (http://nodejs.org/).

To begin, install Node.js using an official prebuilt installer; it will also install the NPM.

Next, we will use NPM to install CoffeeScript. Open a terminal or command window and enter the following command:

npm install -g coffee-script

This will install the necessary files needed to work with CoffeeScript, including the coffee command that provides an interactive Read Evaluate Print Loop (REPL)—a command to execute CoffeeScript files and a compiler to generate JavaScript.

It is important to use the -g option when installing CoffeeScript, as this installs the CoffeeScript package as a global NPM module. This will add the necessary commands to our path.

This section assumes that you have Sublime Text or Visual Studio installed.

Sublime Text is a very popular text editor that is geared to working with code and projects. You can download a fully functional evaluation version from http://www.sublimetext.com. If you find it useful and decide to continue to use it, you will be encouraged to purchase a license, but there is currently no enforced time limit.

Sublime Text does not support CoffeeScript out of the box. Thankfully, a package manager exists for Sublime Text; this package manager provides access to hundreds of extension packages, including ones that provide helpful and productive tools to work with CoffeeScript.

With Package Control installed, you can easily install the CoffeeScript packages that are available using the Package Control option under the Preferences menu. Select the Install Package option.

To install the CoffeeScript package, open the Install Package window and enter CoffeeScript. This will display the CoffeeScript-related packages. We will use the Better CoffeeScript package:

As you can see, the CoffeeScript package includes syntax highlighting, commands, shortcuts, snippets, and compilation.

In this section, we will explain the different keyboard shortcuts and code snippets available with the Better CoffeeScript package for Sublime.

If you are on the Windows platform, you can use Microsoft's Visual Studio software. You can download Microsoft's free Express edition (Express 2013 for Web) from http://www.microsoft.com/express.

If you are a Visual Studio user, Version 2010 and above can work quite effectively with CoffeeScript through the use of Visual Studio extensions.

If you are doing any form of web development with Visual Studio, the Web Essentials extension is a must-have.

To install Web Essentials, perform the following steps:

Once installed, the Web Essentials package provides many web development productivity features, including CSS helpers, tools to work with Less CSS, enhancements to work with JavaScript, and, of course, a set of CoffeeScript helpers.

To add a new CoffeeScript file to your project, you can navigate to File | New Item or press Ctrl + Shift + A. This will display the Add New Item dialog, as seen in the following screenshot. Under the Web templates, you will see a new CoffeeScript File option. Select this option and give it a filename, as shown here:

When we have our CoffeeScript file open, Web Essentials will display the file in a split-screen editor. We can edit our code in the left-hand pane, while Web Essentials displays a live preview of the JavaScript code that will be generated for us.

The Web Essentials CoffeeScript compiler will create two JavaScript files each time we save our CoffeeScript file: a basic JavaScript file and a minified version. For example, if we save a CoffeeScript file named employee.coffee, the compiler will create employee.js and employee.min.js files.

CoffeeScript is a highly expressive programming language that does away with much of the ceremony required by JavaScript. It uses whitespace to define blocks of code and provides shortcuts for many of the programming constructs found in JavaScript.

For example, we can declare variables and functions without the var keyword:

firstName = 'Mike'

We can define functions using the following syntax:

multiply = (a, b) ->
  a * b

Here, we defined a function named multiply. It takes two arguments, a and b. Inside the function, we multiplied the two values. Note that there is no return statement. CoffeeScript will always return the value of the last expression that is evaluated inside a function.

The preceding function is equivalent to the following JavaScript snippet:

var multiply = function(a, b) {
  return a * b;
};

It's worth noting that the CoffeeScript code is only 28 characters long, whereas the JavaScript code is 50 characters long; that's 44 percent less code.

We can call our multiply function in the following way:

result = multiply 4, 7

In CoffeeScript, using parenthesis is optional when calling a function with parameters, as you can see in our function call. However, note that parenthesis are required when executing a function without parameters, as shown in the following example:

displayGreeting = ->
  console.log 'Hello, world!'
  
displayGreeting()

In this example, we must call the displayGreeting() function with parenthesis.

$('div.menu-item').removeClass 'selected'

Like functions, we can define JavaScript literal objects without the need for curly braces, as seen in the following employee object:

employee =
  firstName: 'Mike'
  lastName: 'Hatfield'
  salesYtd: 13204.65

Notice that in our object definition, we also did not need to use a comma to separate our properties.

CoffeeScript supports the common if conditional as well as an unless conditional inspired by the Ruby language. Like Ruby, CoffeeScript also provides English keywords for logical operations such as is, isnt, or, and and. The following example demonstrates the use of these keywords:

isEven = (value) ->
  if value % 2 is 0
    'is'
  else
    'is not'

console.log '3 ' + isEven(3) + ' even'

In the preceding code, we have an if statement to determine whether a value is even or not. If the value is even, the remainder of value % 2 will be 0. We used the is keyword to make this determination.

We can use if and unless as expression modifiers as well. They allow us to tack if and unless at the end of a statement to make simple one-liners.

For example, we can so something like the following:

console.log 'Value is even' if value % 2 is 0

Alternatively, we can have something like this:

console.log 'Value is odd' unless value % 2 is 0

We can also use the if...then combination for a one-liner if statement, as shown in the following code:

if value % 2 is 0 then console.log 'Value is even'

CoffeeScript has a switch control statement that performs certain actions based on a list of possible values. The following lines of code show a simple switch statement with four branching conditions:

switch task
  when 1
    console.log 'Case 1'
  when 2
    console.log 'Case 2'
  when 3, 4, 5
    console.log 'Case 3, 4, 5'
  else
    console.log 'Default case'

In this sample, if the value of a task is 1, case 1 will be displayed. If the value of a task is 3, 4, or 5, then case 3, 4, or 5 is displayed, respectively. If there are no matching values, we can use an optional else condition to handle any exceptions.

If your switch statements have short operations, you can turn them into one-liners, as shown in the following code:

switch value
  when 1 then console.log 'Case 1'
  when 2 then console.log 'Case 2'
  when 3, 4, 5 then console.log 'Case 3, 4, 5'
  else console.log 'Default case'

CoffeeScript has a number of other productive shortcuts that we will cover in depth in Chapter 2, Starting with the Basics.

With CoffeeScript installed, you can use the coffee command-line utility to execute CoffeeScript files, compile CoffeeScript files into JavaScript, or run an interactive CoffeeScript command shell.

In this section, we will look at the various options available when using the CoffeeScript command-line utility.

We can see a list of available commands by executing the following command in a command or terminal window:

coffee --help

This will produce the following output:

As you can see, the coffee command-line utility provides a number of options. Of these, the most common ones include the following:

The CoffeeScript REPL

As we have been, CoffeeScript has an interactive shell that allows us to execute CoffeeScript commands. In this section, we will learn how to use the REPL shell. The REPL shell can be an excellent way to get familiar with CoffeeScript.

To launch the CoffeeScript REPL, open a command window and execute the coffee command.

This will start the interactive shell and display the following prompt:

In the coffee> prompt, we can assign values to variables, create functions, and evaluate results.

When we enter an expression and press the return key, it is immediately evaluated and the value is displayed.

For example, if we enter the expression x = 4 and press return, we would see what is shown in the following screenshot:

This did two things. First, it created a new variable named x and assigned the value of 4 to it. Second, it displayed the result of the command.

Next, enter timesSeven = (value) -> value * 7 and press return:

You can see that the result of this line was the creation of a new function named timesSeven().

We can call our new function now:

By default, the REPL shell will evaluate each expression when you press the return key. What if we want to create a function or expression that spans multiple lines? We can enter the REPL multiline mode by pressing Ctrl + V. This will change our coffee> prompt to a ------> prompt. This allows us to enter an expression that spans multiple lines, such as the following function:

When we are finished with our multiline expression, press Ctrl + V again to have the expression evaluated. We can then call our new function:

The CoffeeScript REPL offers some handy helpers such as expression history and tab completion.

Pressing the up arrow key on your keyboard will circulate through the expressions we previously entered.

Using the Tab key will autocomplete our function or variable name. For example, with the isEvenOrOdd() function, we can enter isEven and press Tab to have the REPL complete the function name for us.

The problem in debugging CoffeeScript stems from the fact that CoffeeScript compiles into JavaScript which is what the browser executes. If an error arises, the line that has caused the error sometimes cannot be traced back to the CoffeeScript source file very easily. Also, the error message is sometimes confusing, making troubleshooting that much more difficult.

Recent developments in the web development community have helped improve the debugging experience for CoffeeScript by making use of a concept known as a source map. In this section, we will demonstrate how to generate and use source maps to help make our CoffeeScript debugging easier.

To use source maps, you need only a base installation of CoffeeScript.

You can generate a source map for your CoffeeScript code using the -m option on the CoffeeScript command:

coffee -m -c employee.coffee

Source maps provide information used by browsers such as Google Chrome that tell the browser how to map a line from the compiled JavaScript code back to its origin in the CoffeeScript file.

Source maps allow you to place breakpoints in your CoffeeScript file and analyze variables and execute functions in your CoffeeScript module. This creates a JavaScript file called employee.js and a source map called employee.js.map.

If you look at the last line of the generated employee.js file, you will see the reference to the source map:

//# sourceMappingURL=employee.js.map

Google Chrome uses this JavaScript comment to load the source map.

The following screenshot demonstrates an active breakpoint and console in Goggle Chrome:

Begin by installing the Node Inspector NPM module with the following command:

npm install -g node-inspector

To use Node Inspector, we will use the coffee command to compile the CoffeeScript code we wish to debug and generate the source map.

In our example, we will use the following simple source code in a file named counting.coffee:

for i in [1..10]
  if i % 2 is 0
    console.log "#{i} is even!"
  else
    console.log "#{i} is odd!"

To use Node Inspector, we will compile our file and use the source map parameter with the following command:

coffee -c -m counting.coffee

Next, we will launch Node Inspector with the following command:

node-debug counting.js

When we run Node Inspector, it does two things.

First, it launches the Node debugger. This is a debugging service that allows us to step through code, hit line breaks, and evaluate variables. This is a built-in service that comes with Node. Second, it launches an HTTP handler and opens a browser that allows us to use Chrome's built-in debugging tools to use break points, step over and into code, and evaluate variables.

Node Inspector works well using source maps. This allows us to see our native CoffeeScript code and is an effective tool to debug server-side code.

The following screenshot displays our Chrome window with an active break point. In the local variables tool window on the right-hand side, you can see that the current value of i is 2:

The highlighted line in the preceding screenshot depicts the log message.