Much Ado About CoffeeScript

Sass

Matt Thompson

1 talk

#frontend-development

#sass

#dynamic-typing

Much Ado About CoffeeScript

by Matt Thompson

In this presentation titled "Much Ado About CoffeeScript," Matt Thompson discusses the significance of CoffeeScript as a key feature in the upcoming release of Rails 3.1. The talk highlights how CoffeeScript will replace RJS as the preferred method for dynamically generating JavaScript within the Rails framework, emphasizing its advantages as a cleaner and more efficient way to write JavaScript code.

Key points discussed include:

- Introduction to CoffeeScript: CoffeeScript is described as a language that simplifies JavaScript by compiling it down into JavaScript, effectively removing syntactical clutter.

- Installation and Setup: The process begins with installing Node.js, followed by the Node package manager (NPM), and finally, installing CoffeeScript itself using a command in the terminal.

- Integration with Rails: Advice on how to integrate CoffeeScript into a Rails application by modifying the Gemfile and properly organizing the CoffeeScript files.

- Syntax Changes: CoffeeScript reduces the amount of code needed to accomplish the same tasks as JavaScript. Notable changes include removing curly braces, semicolons, and function keywords, in favor of a more succinct syntax. Examples are provided to illustrate these transformations.

- Notable Features: New features in CoffeeScript such as lexical scoping, default arguments, string interpolation, and classes are discussed. Thompson highlights how these features contribute to clearer and more maintainable code.

- Historical Context: The speaker provides insights into the relationship between JavaScript and Ruby and their evolving synergy through tools like CoffeeScript. This historical backdrop helps understand the growing community collaboration between the two languages.

- Conclusion and Call to Action: Thompson encourages programmers to explore and adopt CoffeeScript, leveraging its capabilities to improve their web development workflow. The talk concludes with an invitation for questions, emphasizing the importance of the community in sharing knowledge and experiences using CoffeeScript.

Overall, this presentation serves not only to inform about the technical aspects of CoffeeScript but also to inspire practitioners to build connections and projects that utilize this powerful language.

00:00:06.319 So, just so everybody knows they're in the right room, I want to make sure this is Agile Development with RJS for Ninja Rock Stars. Make sure, because for regular rock stars, that's the other room.

00:00:20.560 I'm intimidated going up against regular rock stars, but no, this is, of course, Much Ado About CoffeeScript. My name's Matt Thompson, and I work for Gowalla. The first question you might ask is, why are we talking about CoffeeScript at a Ruby conference? The main answer is Rails 3.1.

00:00:32.960 That's the big news—Rails 3.1 is going to ship with that whenever it does. Right now, the release candidate five, candidate one, came out in May. It has many great features in it, such as reversible migrations, prepared statements, Active Record custom serializers, and a reported massive speed increase for anybody running Rails 1.9 with Ruby 1.9.

00:00:57.280 But the main news—the one that's causing controversy, the one that's getting people riled up—is that by default, it's introducing an asset pipeline that has SASS and CoffeeScript, or SCSS if you will. I'm just going to call it SASS; I like SASS better. They're both very similar in that they are high-level languages that are improved versions of what they replace.

00:01:14.960 I always say that they're excellent. I love SASS and I love CoffeeScript. Just to put this in perspective, here's what SASS gives you. This isn't a talk about SASS, but the basic idea is you get things that you've always wanted in CSS: you have variables, and you have some degree of programming constructs, such as for loops, iterators, and functions. It's an excellent language and a better way to write CSS.

00:01:41.200 In the same way, CoffeeScript is a better way of writing JavaScript. It's everything that we would want JavaScript to be. It compiles down to JavaScript, the same way that SASS compiles down to CSS, and it does everything better. Think of CoffeeScript as better JavaScript. These two things are very similar in that respect, and Rails 3.1 is going to ship with this new asset pipeline. For this talk, we're going to focus on CoffeeScript because I think it's going to make the greater impact, and we'll discuss that impact. But first, we're just going to introduce CoffeeScript.

00:02:21.760 So, what are we going to cover? We're going to discuss installation, a couple of steps on how to integrate it with Rails, because that's usually how people want to use it. Any other framework, like Sinatra, is going to be pretty straightforward. We're also going to talk about the notable features—what's changed, the major differences between JavaScript and CoffeeScript, and features that are introduced to replace what are otherwise design patterns in JavaScript.

00:02:58.160 Let's start with installation—can you follow along with me? Everybody's got their laptops out, so that's great! First, a little bit about installation: CoffeeScript was created by Jeremy Ashkenas; if I'm saying that right. The 0.10 release was on Christmas Eve of 2009, and the 1.0 release was, poetically, just a year later on Christmas Eve, 2010. Currently, it's at 1.12, which came out in the last month or two.

00:03:33.760 It has a huge following on GitHub with several thousand followers—it's a very active project with a lot of cool things coming out of it. People are writing crazy experiments, like different kinds of compilers and reverse compilers. It's a really exciting project, but the one thing to remember above everything else is the central tenet of CoffeeScript: it's just JavaScript. That's the golden rule of CoffeeScript. While it is its own language, it's ultimately just a better way to write JavaScript.

00:04:06.319 It compiles one way into JavaScript. There’s no runtime interpretation; at least, there are some hacks that do it. But mainly, the way you're going to use it is that CoffeeScript compiles down to JavaScript, and that's what you're going to load in your web browser. This isn't a replacement in that sense; it's also just JavaScript in the way that the compiler—at least at some point—is written in JavaScript itself. So CoffeeScript is JavaScript all the way down.

00:04:39.759 The main things about CoffeeScript that you'll notice are that there's less syntactic cruft; you have to type a lot less to achieve the equivalent in JavaScript. The second thing is that JavaScript design patterns are now features of CoffeeScript. Like I mentioned before, the crazy hacks that you're writing in order to make things work the way you want are now first-class features in CoffeeScript.

00:05:14.560 Alright, so back to installation. The first thing you want to install is Node.js. Everybody loves Node.js—it's server-side JavaScript running on the V8 engine. This is probably the easiest way to get CoffeeScript installed. First, you're going to install Node.js, and the best way to install it, if you're on a Mac at least, is through Homebrew. You can also do it via a command like `sudo apt-get install` something similar for Linux.

00:05:42.720 Once you have Node.js installed—this shouldn't take long as long as your network cooperates—the next step is to install NPM, which is their Node package manager, like the gem system for Ruby. Just copy the curl line from their website and paste it into your terminal; you’ll have NPM running in a minute. After NPM is running, install CoffeeScript with the command `npm install -g coffeescript`. The `-g` flag sets it to a global binary, allowing you to run the Coffee binary anywhere on your system.

00:06:09.760 If everything succeeded, just type `coffee` into your terminal, and you should be presented with an interactive console, similar to what you'd get if you typed `irb`. For anyone using TextMate, there's a TextMate bundle written by the author of CoffeeScript himself. If you're doing any editing, there’s also a series of plugins for Vim and Emacs. No matter what you're using, it's fully supported.

00:06:32.720 So let’s discuss integration with Rails—a common interest. The first thing you want to do is add it to your Gemfile, including Rails 3.1 with the release candidate. In this case, you probably want to specify RC5 or any of those versions. One thing to know about 3.1 is that the asset pipeline I was talking about lives in a subdirectory of assets, so you can place JavaScripts to be compiled and bundled together. Any CoffeeScript should go in the `app/assets/javascripts` directory, and just put `.js.coffee` at the end, and everything will be good to go.

00:07:08.720 Moving on to syntax, recall the golden rule of CoffeeScript—that it's just JavaScript all the way down. We're going to take this to its logical stream, transforming JavaScript to CoffeeScript. First, you will remove the syntactic cruft—gone are the curly braces and semicolons, which weren't necessary anyway. The second step involves replacing the function keyword with the arrow syntax; I believe it's being referred to as 'stabby blocks' now.

00:07:52.640 We're going to take a more complex example that actually utilizes a feature of JavaScript being a prototypical language. We have this `store` object, and we're going to define an `add` function on its prototype. Normally, this is a concept we have to grow to love, rather than something that just makes sense out of the box. So to convert this into CoffeeScript, we will remove excess syntax like semicolons. Note that 'this.' is now turning into the '@' sign, familiar to everyone in a CoffeeScript context.

00:08:30.080 The `store.prototype.add` method will just be defined as `add` in the context of a class definition, which is something we desired for a long time. While we're still seeing 'function', we need to convert that into a stabby block, but we’re not quite done. There’s actually an argument in the function that requires switching around: the arguments now go on the left side of the arrow—the dash rocket—as shown in the CoffeeScript code.

00:09:19.360 This results in a much more concise and elegant format. To drive that point home, punctuation is omitted, functions become dash rockets, `this.` becomes `@`, and curly braces are now tab indented. Yes, this invokes Python-like whitespace, but it's something much more loved; we could say it's more akin to HAML or some similarly elegant syntax.

00:09:49.680 Now, let's delve into some features. We’re not ranking these as a top ten or anything, just listing notable features; one being classes in CoffeeScript. Gone are the days of defining object prototypes or functions that construct instances of objects, which can be quite confusing. Instead, we can simply say `class Animal`, similar to `initialize` in Ruby. You can assign `@name` to `name`, or use a shortcut for constructing with just `constructor @name` in one line.

00:10:16.799 Next, there's lexical scoping, which prevents global variables from being declared inadvertently. In CoffeeScript, every variable will be automatically assigned `var`. If you want to connect two scripts to bridge the namespace gap and allow objects to communicate, you do this by attaching them to the window object.

00:10:51.440 Default arguments are another feature that we Rubyists love. In your constructor, you can say `name = 'unknown'`, which means that by default, if someone creates an Animal object without arguments, the name will be set to 'unknown'. Then there's string interpolation, something we are accustomed to but miss in the JavaScript world. CoffeeScript allows you to use `#{variable}` syntax within strings.

00:11:21.680 We also have conditional suffixes, allowing checks directly in the syntax. This means you can assign a `price` to an `amount` conditional on whether the amount exceeds zero, eliminating the need for separate if-statements. Operator aliases, similar to Ruby, can be used in CoffeeScript, which includes expressions like `is`, `isn't`, `not`, `and`, `or`, `true`, and `false`. This allows for clearer expression and can reduce confusion.

00:11:52.400 We have array destructuring, where you can assign variable values from a regular expression match result, and also the existential operator `?`, which allows you to say that if a value matches, assign it; if not, fall back on some default value. This helps eliminate unnecessary conditionals and allows for more elegant code.

00:12:40.320 Another useful feature is splat arguments, allowing variable-length arguments using `...`. You can designate specific positions for inputs, like first, second, and third place in a competition, and gather the rest. List comprehensions in CoffeeScript provide an alternative way of iterating over items, allowing for cleaner, more readable code.

00:13:30.640 CoffeeScript captures these syntactical niceties, and its elegance is shown as we see these ten major features. As we conclude what you might expect from a typical CoffeeScript talk, it’s important to know that there are numerous resources available. The official CoffeeScript site provides excellent documentation and side-by-side comparisons of CoffeeScript and JavaScript. This presentation draws a lot from that material, and peepcode is an excellent source for more in-depth tutorials, particularly for test-driven development.

00:14:30.560 Another great resource is RailsCasts, which offers fantastic screencasts about CoffeeScript. What I want to promote now is learning and getting excited about building things with CoffeeScript. When you first see it, you should feel confident in writing code. This talk is to inspire you to explore CoffeeScript and emphasize its growing importance in the Ruby community.

00:15:09.200 To provide some historical context of why CoffeeScript's inclusion in Rails 3.1 is significant, we have to acknowledge JavaScript and Ruby's shared evolution. Both were created roughly in the same time period. Fast forward to 2005, when Web 2.0 began taking off, and Rails was created amidst a rise in interest in Ruby.

00:15:45.200 However, in that same time, JavaScript was also evolving with AJAX, which became a buzzword. Rails and JavaScript have offered various approaches to web development. In 2006, jQuery was released, bringing a smoother interface to AJAX, while Rails was still evolving and adapting its response to JavaScript.

00:16:29.440 In 2007, both Ruby and JavaScript underwent substantial growth, with more frameworks emerging, but they also created their paths. By 2009, Node.js introduced V8 for running JavaScript on servers, marking a new chapter for JavaScript. Ruby 1.9 also arrived around this time as Ruby sought growth and maturity.

00:17:04.760 CoffeeScript emerged later in 2010 in response to the need for an improved JavaScript syntax. Understanding the historical context helps illustrate how frameworks like Rails can significantly impact developers' choices moving forward. JavaScript and Ruby have co-evolved and are now growing closer through initiatives like CoffeeScript.

00:18:00.000 This unity signifies how JavaScript and Ruby enthusiasts may start connecting over shared technologies. The relationship between the two languages is opening dialogues and bridging gaps, which is crucial as the communities can serve to uplift each other. This lays groundwork for successful future collaborations.

00:19:15.000 As we dive into the conclusion, I encourage you to learn CoffeeScript, utilize it, and share your successes. This is about building bridges, creating projects, and generating excitement in both communities. CoffeeScript represents not just a refined syntax but also a way to ease web development.

00:19:54.720 I appreciate your attention, and I invite any questions or discussions on using CoffeeScript, integrating it, or exploring its features further.

00:20:11.320 Thank you.

LoneStarRuby Conf 2011