In this article by Mike Hatfield, author of the book, CoffeeScript Application Development Cookbook, we will see that JavaScript, though very successful, can be a difficult language to work with. JavaScript was designed by Brendan Eich in a mere 10 days in 1995 while working at Netscape. As a result, some might claim that JavaScript is not as well rounded as some other languages, a point well illustrated by Douglas Crockford in his book titled JavaScript: The Good Parts, O'Reilly Media.

These pitfalls found in the JavaScript language led Jeremy Ashkenas to create CoffeeScript, a language that attempts to expose the good parts of JavaScript in a simple way. CoffeeScript compiles into JavaScript and helps us avoid the bad parts of JavaScript.

(For more resources related to this topic, see here.)

There are many reasons to use CoffeeScript as your development language of choice. Some of these reasons include:

• CoffeeScript helps protect us from the bad parts of JavaScript by creating function closures that isolate our code from the global namespace by reducing the curly braces and semicolon clutter and by helping tame JavaScript's notorious this keyword
• CoffeeScript helps us be more productive by providing features such as list comprehensions, classes with inheritance, and many others
• Properly written CoffeeScript also helps us write code that is more readable and can be more easily maintained

As Jeremy Ashkenas says:

"CoffeeScript is just JavaScript."

We can use CoffeeScript when working with the large ecosystem of JavaScript libraries and frameworks on all aspects of our applications, including those listed in the following table:

Configuring your environment and tools

One significant aspect to being a productive CoffeeScript developer is having a proper development environment. This environment typically consists of the following:

• Node.js and the NPM
• CoffeeScript
• Code editor
• Debugger

In this recipe, we will look at installing and configuring the base components and tools necessary to develop CoffeeScript applications.

Getting ready

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.

How to do it...

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.

On some Windows machines, you might need to add the NPM binary directory to your path. You can do this by editing the environment variables and appending ;%APPDATA%npm to the end of the system's PATH variable.

Configuring Sublime Text

What you use to edit code can be a very personal choice, as you, like countless others, might use the tools dictated by your team or manager. Fortunately, most popular editing tools either support CoffeeScript out of the box or can be easily extended by installing add-ons, packages, or extensions.

In this recipe, we will look at adding CoffeeScript support to Sublime Text and Visual Studio.

Getting ready

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.

How to do it...

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.

Sublime Text does not come with this package manager, but it can be easily added by following the instructions on the Package Control website at https://sublime.wbond.net/installation.

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.

You can also access this command by pressing Ctrl + Shift + P, and in the command list that appears, start typing install. This will help you find the Install Package command quickly.

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.

How it works...

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

Commands

You can run the desired command by entering the command into the Sublime command pallet or by pressing the related keyboard shortcut. Remember to press Ctrl + Shift + P to display the command pallet window. Some useful CoffeeScript commands include the following:

The keyboard shortcuts are associated with the file type. If you are editing a new CoffeeScript file that has not been saved yet, you can specify the file type by choosing CoffeeScript in the list of file types in the bottom-left corner of the screen.

Snippets

Snippets allow you to use short tokens that are recognized by Sublime Text. When you enter the code and press the Tab key, Sublime Text will automatically expand the snippet into the full form. Some useful CoffeeScript code snippets include the following:

The snippets are associated with the file type. If you are editing a new CoffeeScript file that has not been saved yet, you can specify the file type by selecting CoffeeScript in the list of file types in the bottom-left corner of the screen.

Configuring Visual Studio

In this recipe, we will demonstrate how to add CoffeeScript support to Visual Studio.

Getting ready

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.

How to do it...

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:

1. Launch Visual Studio.
2. Click on the Tools menu and select the Extensions and Updates menu option. This will display the Extensions and Updates window (shown in the next screenshot).
3. Select Online in the tree on the left-hand side to display the most popular downloads.
4. Select Web Essentials 2012 from the list of available packages and then click on the Download button. This will download the package and install it automatically.
5. Once the installation is finished, restart Visual Studio by clicking on the Restart Now button.

You will likely find Web Essentials 2012 ranked highly in the list of Most Popular packages. If you do not see it, you can search for Web Essentials using the Search box in the top-right corner of the window.

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.

Though I have only described two editors to work with CoffeeScript files, there are CoffeeScript packages and plugins for most popular text editors, including Emacs, Vim, TextMate, and WebMatrix.

A quick dive into CoffeeScript

In this recipe, we will take a quick look at the CoffeeScript language and command line.

How to do it...

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.

You might also wish to use parenthesis to make your code more readable. Just because they are optional, it doesn't mean you should sacrifice the readability of your code to save a couple of keystrokes. For example, in the following code, we used parenthesis even though they are not required:

$('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.

JavaScript has a nasty behavior when determining equality between two values. In other languages, the double equal sign is used, such as value == 0. In JavaScript, the double equal operator will use type coercion when making this determination. This means that 0 == '0'; in fact, 0 == '' is also true.

CoffeeScript avoids this using JavaScript's triple equals (===) operator. This evaluation compares value and type such that 0 === '0' will be false.

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 provides a number of syntactic shortcuts to help us be more productive while writing more expressive code. Some people have claimed that this can sometimes make our applications more difficult to read, which will, in turn, make our code less maintainable. The key to highly readable and maintainable code is to use a consistent style when coding. I recommend that you follow the guidance provided by Polar in their CoffeeScript style guide at http://github.com/polarmobile/coffeescript-style-guide.

There's more...

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:

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

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.

Debugging CoffeeScript using source maps

If you have spent any time in the JavaScript community, you would have, no doubt, seen some discussions or rants regarding the weak debugging story for CoffeeScript. In fact, this is often a top argument some give for not using CoffeeScript at all. In this recipe, we will examine how to debug our CoffeeScript application using source maps.

Getting ready

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.

How to do it...

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

coffee -m -c employee.coffee

How it works...

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:

Debugging CoffeeScript using Node Inspector

Source maps and Chrome's developer tools can help troubleshoot our CoffeeScript that is destined for the Web. In this recipe, we will demonstrate how to debug CoffeeScript that is designed to run on the server.

Getting ready

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

npm install -g node-inspector

How to do it...

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

How it works...

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.

Summary

This article introduced CoffeeScript and lays the foundation to use CoffeeScript to develop all aspects of modern cloud-based applications.

Resources for Article:

Further resources on this subject:

• Writing Your First Lines of CoffeeScript [article]
• Why CoffeeScript? [article]
• ASP.Net Site Performance: Improving JavaScript Loading [article]