CoffeeScript for the Rubyist

Aloha RubyConf 2012

Mark Bates

#frontend-development

#programming-languages

#syntax

#web-development

CoffeeScript for the Rubyist

by Mark Bates

In the talk "CoffeeScript for the Rubyist" by Mark Bates at the Aloha RubyConf 2012, the primary focus is on CoffeeScript, a language that provides a Ruby-like abstraction over JavaScript, making front-end code as enjoyable to write as Ruby code is for back-end development. The presentation outlines how CoffeeScript enhances JavaScript syntax and functionality, reflecting similarities with Ruby, while addressing common concerns and providing practical examples.

Key Points Discussed:

- Introduction to CoffeeScript:

- CoffeeScript compiles down to JavaScript and integrates easily into current JavaScript environments.

- It improves readability, maintainability, and refactoring of front-end code.

- Historical Context of JavaScript:

- JavaScript’s origins are traced back to a rushed development process that resulted in a combination of Java-like and Lisp-style features, leading to its inherent complexities.

- Syntax Comparison:

- CoffeeScript eliminates punctuation-heavy syntax prevalent in JavaScript, focusing instead on clean, clear code.

- It does not use semicolons or curly braces, relying on whitespace significance similar to Python and Ruby.

- Functions and Classes:

- CoffeeScript uses a syntax akin to Ruby for defining functions and classes, enabling default arguments and simplified class definitions that compile to concise JavaScript.

- Iterators and Comprehensions:

- Provides more intuitive looping constructs and array comprehensions which reduce boilerplate code compared to JavaScript.

- Error Handling and Improvements:

- The existential operator simplifies existence checking to avoid runtime errors.

- Community and Competitors:

- While discussing alternatives like Dart and TypeScript, Bates emphasizes CoffeeScript's usability and ongoing relevance as it borrows patterns that are subsequently adopted by future JavaScript standards.

- Practical Closing and Q&A:

- Mark concludes by sharing resources and tips for integrating CoffeeScript, addressing the audience’s questions, and offering free copies of his books to encourage further exploration of the language.

Takeaways:

- CoffeeScript is positioned as a powerful tool for Rubyists looking to enter the JavaScript realm with a cleaner and more enjoyable coding experience.

- The language's structure allows for seamless integration into existing JavaScript projects, thereby appealing to developers wanting to enhance their front-end coding practices without abandoning their JavaScript foundation.

00:00:15.519 Okay, good morning! I feel bad for the poor sucker who has to follow up Chad Fowler. Oh wait, that's me. What's worse is I've got James Edward Gray coming on right after me, so I’m wedged in between greatness. I know I’m going to totally not live up to their expectations. Anyway, we’re going to talk about CoffeeScript this morning, because it's a Ruby conference and you have to have at least one talk about a completely different language. I'm that token talk today, so aloha!

00:00:38.399 And aloha! Come on! I’ll say this early on: I’ve got books to give away, so when there’s audience participation, it will bode well for you. I promise you one thing about this talk — cats. There will be none of them in this talk. There will be no cats, no animals of any kind. Thank you! This is an animal-free talk. I will show you pictures of my kids now, but just these pictures — they're the only pictures. I’ll show you pictures of my books. This is 'Distributed Programming with Ruby', which was published in 2009. Everybody shows a copy of it because I believe people like showing an outdated tech book.

00:01:10.159 I also wrote 'Programming in CoffeeScript', which was published this year, and it’s an up-to-date tech book. You can get them both at books.markbates.com. Now, before I start talking about CoffeeScript, I want to give you guys a very brief history lesson about JavaScript. Meet Brandon. Brandon was a developer about 15, 16, 17 years ago working for a little company that was doing pretty well in the browser wars. He was tasked with writing a language to help script what happens in the browser.

00:01:43.360 So he said, "Okay, I need to do this. I'm going to write this really cool Lisp-style language." And he did just that. He wrote a great language. But then, meet Brandon's boss. One day Brandon's boss comes in and says, "Look, Java is getting really popular, so we need to scrap your language. We need to make another language that’s kind of Java's cousin, and give it a really stupid name like JavaScript, so people think they’re somehow related! We need it in a week!" And that actually happened. So we ended up with what we know today as JavaScript. This is actually a Backbone model.

00:02:40.720 It's kind of a weird hybrid of Java and something written in a week. So, you get lots of really odd things like some typing, but not a lot. If you want a lot of typing, by the way, check out TypeScript. It's a way to make JavaScript even more complex. If we fast-forward about 15 years, we meet Jeremy. Jeremy is a developer at Document Cloud for the New York Times. He is the writer of a little-known framework called Backbone. No one ever seems to hear about it. Ignore it.

00:03:10.720 So, this is a Backbone model we just talked about. Jeremy thought it was really annoying that he had to type all this stuff every single time he was working with Backbone. So, he said, "What if I could take this and make it look a little more like this?" And CoffeeScript was born. So what is CoffeeScript? That’s a great question. According to its website, it is a little language that compiles down to JavaScript. I think that’s probably about the most useless sentence ever. What does that mean? Well, it does what it says, but it also easily integrates into your current JavaScript environment.

00:03:54.720 And that is key, right? A lot of people say to me, "Well, I like the idea of CoffeeScript, but all my other stuff is JavaScript, and I can’t use CoffeeScript because I’m all JavaScript." Well, good news for you! Because it compiles down to JavaScript, you can integrate it today. You can say, "I’m going to learn CoffeeScript. I'm going to write the next little part of my site in CoffeeScript." No problem! It integrates with what you have. It’s kind of like JRuby, except it actually integrates with everything. Sorry Charles, there’s no worrying about C extensions here.

00:04:31.199 It's easier to read, write, maintain, and refactor. I didn’t list debug there for a very obvious reason, but we'll talk a little bit about debugging at the end. It is also a hybrid of Ruby and Python, so I imagine most people in this room are Python people, right? Everybody? Awesome! Because you know Ruby.

00:05:01.280 By the way, apparently I swear a lot in my talks — I only realized that when I watched the last video of my talk and thought, "Oh man, I'm just dropping F-bombs all over the place!" So, CoffeeScript is also very helpful, and we will talk about its helpfulness. CoffeeScript is not, however, magic, and it is limited by what JavaScript can do today. One of those examples that I like to give, especially to a Ruby crowd, is method missing.

00:05:31.960 You can’t do method missing in JavaScript. God knows I’ve tried, and you can’t do it! So, you can’t do that in CoffeeScript either; it’s just impossible. CoffeeScript is limited by JavaScript's limitations, but it tries to help make those limitations kind of ease off to the sides a little bit. This is the number one argument I get from CoffeeScript proponents: people who've never used CoffeeScript before say, "I'm happy writing JavaScript; I don't need to learn another language!" And that’s fine with me; if that's the way you want to be.

00:06:02.880 But here’s another brief history lesson because everybody seems to really like doing history lessons in their talks, and I’m going to butcher this next one, so you guys are going to love this. Does anybody know what this is? "Assembler?" Who said that? Charles? Very good! Yes, it is assembly code. Do you know what it does? Does anybody? Does anyone know what this assembly code does? Because I don’t! I got this off a website, and the website told me what it does, but I’m really hoping it does that.

00:06:34.240 No, it actually writes Fibonacci numbers because, as Aaron said, that's what drives all business, sales, and advertising: Fibonacci number generation. And this is the way code was written for a while. There was a point in time when code was written on punched cards too and fed into machines, and that worked; it was fine. Why do I need to learn another language? I know assembly; I can write programs. And then someone came up with C, and said, "I can write Fibonacci numbers much better in C than I can in assembly!" And I was like, "Oh, awesome! C is awesome!" C is still in use today.

00:07:10.880 And then someone came up with Java and said, "I can write Fibonacci numbers better in Java!" And everybody was like, "Awesome! Now I can write them once and run them nowhere, and life will be wonderful!" This is where I came into the picture. I started doing Java around 98 or 99, writing nothing but Fibonacci sequences for the companies I worked for up until 2005.

00:07:57.440 When I was doing what most good developers do — I was having drinks with some friends — and a friend of mine said, "Hey, have you heard of Ruby?" And particularly this little framework called Rails, which was kind of cool and just coming out, and you should check it out! I was like, "Well, you know, I like my Java, my JSPs, my Ant build scripts, my Hibernate, my XML configuration, and my Struts and my Java Server Faces and my JavaScript pages and my Enterprise Java Beans and my IDE!" Anyway, I was starting to lull myself to sleep.

00:08:49.440 So, I was like, "Alright, so I don’t need this; why do I need Ruby?" But then I saw Ruby, and here are some Fibonacci numbers in Ruby. I was like, "Okay, that’s pretty awesome! Now I can write Fibonacci numbers in Ruby; my life’s going to be better!" There was a point in time where I was like, "Well, I can write an app just as well in Java as I can in Ruby. I could knock out a web app in pretty short time, and it'd perform really well and do all the things a web app needed to do. I could do them in Ruby or Java, but damn it, Ruby just seemed better!"

00:09:23.440 It was easier to write, cleaner, and simpler. You could look at it, you could quickly understand what was going on. It was nicer to bring new people into the fold, and they could easily understand what the code was doing, rather than having to sift through massive Java. And somehow, I just ended my presentation. Good night, thank you very much! I'll be here all week; try the veal!

00:10:08.560 So, now that I have no idea how long I've been talking, let’s start with the number one thing people hear most often about CoffeeScript, and that is the syntax. This is some JavaScript on the left and some CoffeeScript on the right. It’s the identical code. The thing I like most about CoffeeScript is it’s not a very complex example, but what I like most about it here is that my eye is drawn not to punctuation, but rather to the code.

00:10:39.760 I see it, and I just see code. I don't see a lot of fluff hanging around it. I know exactly what’s happening. It’s not significantly smaller than the JavaScript one in this particular example, but again, I look at it and go, "Okay, I can see what’s going on here. I know what's happening." There are some syntax rules. So the good news for people in this talk is that we will actually look at code today! The bad news is we're going to look at some code and learn something today on the second day of a conference in the morning after a long night. That’s not always the best idea, but we’re going to do our best.

00:11:22.720 So, there are no semicolons ever in CoffeeScript. So, there is no debate in the CoffeeScript community as to whether you should use semicolons or not. You can’t; the compiler will actually kick them out, yell at you, and tell you that semicolons are bad. There are no curly braces, with a few exceptions; because every language has exceptions. There is no 'function' keyword. There are a couple of keywords we don't have. There are relaxed parentheses rules, and they’re very similar to Ruby's but again with a few conditions.

00:12:00.640 And it is whitespace significant. That’s one I get all the time. Let's look at parentheses rules first before we talk about some of the other ones. Here are some examples of the parentheses rules. When you’re creating a function, as we are doing on the left, if there are no arguments for that function, you do not need parentheses. If there are arguments for that function, you do need parentheses. If you are calling a function that has no arguments, you need parentheses. But if you are calling a function with arguments, you don’t need parentheses.

00:12:40.679 This can get you into a little bit of trouble. As you can see in this example here, there’s a lack of order of precedence. The compiler doesn’t know what I’m calling text on in the first example, so it assumes that I’m calling it on the string 'some id' and not the jQuery object that I get back. This results in some bad JavaScript. So, you end up having to use parentheses in this case here, even though I don’t technically need them. It preserves intent. So, if you’re concerned and don’t know what to do, always err on the side of parentheses. I don’t think anybody will ever yell at you, "Oh, why did you put parentheses around that method call?" It’s very similar to Ruby.

00:13:29.120 I personally always put parentheses in Ruby calls, except for puts statements. Because that makes sense. Okay, so whitespace — I get this. This is a big argument for me. People moan, "I hate having to have whitespace significant. If I wanted to be in a whitespace-significant language, I’d be doing Python, not Ruby!" And that’s fine. To them, I ask this question: Do you write your code like this or like this? Because if you do, you’re kind of a douchebag. Honestly, I don’t want to work with you!

00:14:07.600 You can understand it, kind of. The first thing I see if I saw code like this is I would go and format it into something that looked like this because I can read it. I can understand what's happening there. If you’re already formatting your code to be a good developer, to be a good citizen of the development community, what difference does it make if it’s whitespace significant or not? It really doesn’t. The big difference it makes is it allows the language to be cleaned up. We can turn it into this. We no longer need delimiters because we already have a delimiter — we have whitespace; we have new lines already built in.

00:14:51.919 We’re already doing these things right. I know I’m trying to sell Python up here, and it’s terrible. But we already have these things, and we should be using them to our benefit. Now, Ruby scripts, and no, I’m not going to talk about RJS, which thankfully died a painful, painful death. I sometimes jokingly refer to it as Ruby script because it does look a lot like Ruby. I have gotten my wires crossed on occasion. I'm working away, typing and typing, and then something blows up. I realize, "Oh no, I'm in CoffeeScript!" I'm putting ends everywhere like, "Is this the end?" And then I’m in Ruby, and I'm not putting the ends; it just becomes a big mess.

00:15:27.680 But it's a fun mess, and it's a good mess to have. Here’s a little example of RubyScript in action. We can do if statements again; we don’t need the ends or the else statements. We can do 'unless'. CoffeeScript brings in 'less' — and we can do the same line conditionals that we do in Ruby, which is really nice. Clean that up a little bit. Objects and hashes look a lot more Ruby-esque. There are three different ways we can create the same hash in CoffeeScript.

00:16:10.480 So, the first way is pretty common. It looks just like a regular hash with curly braces. Here’s one of the cases where you need curly braces. The second is the multi-line hash syntax, which I use constantly. The really nice thing about this is you don’t need curly braces, and you don’t need commas to separate your values. So, as you’re cutting and pasting stuff into this hash that you're building and you're moving stuff around in the hash, you don’t have to worry about all these trailing commas biting you when you run it in your browser.

00:17:16.000 CoffeeScript is using that indentation and that significant whitespace to define where your hash is. And at the bottom, when we’re calling the function, we can kind of do a Ruby-style passing in a hash without the curly braces. You’d need curly braces if you're passing in two hashes, obviously. Here’s the JavaScript output for that, so you can see it all generated the same thing.

00:17:55.680 CoffeeScript brings string interpolation to JavaScript, which is nice. It follows the same rules of double quotes versus single quotes that Ruby does. And there’s a JavaScript... if you don’t believe me: hair docs! CoffeeScript brings hair docs to JavaScript, which is really, really nice. So here I’m building a big old mess of HTML, which I wouldn’t recommend doing, but it's good for example purposes, and notice I’m using string interpolation in there as well to do hair docs.

00:18:34.000 In CoffeeScript, you use three double quotes or three single quotes to delimit your hair docs. If you use a double quote pattern, you can do string interpolation; using a single quote means no interpolation. That generates this piece of garbage, which I would hate to code by hand. Has anybody ever coded an input tag by hand in JavaScript and forgot to escape one of the quotes? Yeah.

00:19:22.800 Exactly! You don’t have to do that anymore! The worry’s gone. Now, functions. Here we are, creating a function that takes one argument: name. And you can call the function; that's the JavaScript for it. So when I was looking at this function the first time, I really started getting into CoffeeScript. I struggled with it a little bit; it just seemed weird to me, the whole stabby arrow kind of thing. It's like, here’s an argument: do this thing. I don’t know; I struggled with it.

00:20:09.120 Then one day, I had this realization — I’ve seen this syntax before! Not only have I seen the syntax, I’ve used this syntax; I couldn’t figure out where I'd seen it. Then I realized it’s the Ruby 1.9 syntax for lambdas, just reversed. In fact, I would argue that the syntax in CoffeeScript is actually a little nicer than the Ruby 1.9 syntax for lambdas because you don’t need the extra curly braces!

00:20:41.760 Once I got that, I thought, "Okay, this is really a very, very similar language." Let’s see how much time I have left... okay, good. Loops and comprehensions: there are loops and comprehensions in CoffeeScript. Surprise! You can do loops; nothing all that fancy, actually. The array one’s pretty nice: you can do 'for some name in some array'. Pretty nice, and you don’t have to type all the i equals zero, the length equals sum of the array to length, and so on, like you would in Java.

00:21:23.680 You can do ranges in CoffeeScript, which is pretty cool, and those follow the same syntax rules as Ruby does. In this case, I will create an array of numbers from one through five while including five. The three dots make one, two, five. I can use comprehensions to print that out. A comprehension is like a one-line for loop, so here I could say print those numbers out to log for every number that's in that array.

00:21:56.480 That looks like this in JavaScript. I like to show the JavaScript because I think it helps people understand these concepts a little better. And a fun little fact about the numbers array: I remember I created a range and it spat out this array. What would happen if I put one through a thousand? You don't want to have in your code this giant block of numbers, right? So, CoffeeScript, after a certain number will actually create a for loop and print the numbers, pushing them into an array.

00:22:44.000 The interesting part about this — the only reason I bring it up — is that one day, I tried to figure out what that cutoff point was when it goes from printing them all out to a for loop. Does anybody know what number it cuts off at? When it switches from printing to a for loop? 42 would have been an awesome number. It is actually... 22.

00:23:30.000 I have no idea; I was counting the numbers of the for loop letters, thinking maybe it's 22 characters. No, it’s not 22 characters; it makes no sense to me why it’s 22, but 20 would have been a better number. 42 would have been an awesome number, but it’s not. You can add clauses to list comprehensions in CoffeeScript.

00:24:06.760 Here we only want to print the numbers in this array when the numbers are less than or equal to three. It starts getting a little hairy here, but it’s kind of cool! So that’s what the JavaScript looks like when you do that. You can take the result of a for loop and store that as an array, which is incredibly helpful. It’s kind of like a map reduce function. So here, I’m actually going to multiply every number by 2 as long as that number is less than or equal to 3. I’m going to get back an array with the numbers 2, 4, and 6.

00:24:42.320 You can see how this starts getting a little helpful. One line of CoffeeScript, and I've created a dozen lines of JavaScript. And I can look at that and know what’s going on. I wouldn’t necessarily use this statement because I think that gets a little crazy after a while, but it is nice that you can do that. And you can see how helpful it can be. Classes! I mean, classes are awesome! We all love classes. We use them in Ruby all the time, and CoffeeScript lets us do that.

00:25:23.840 This is actually a valid class definition. You can define a class in one line of code in CoffeeScript — just 'class Employee', and I have a new Employee class. I can create instances of it and play with it just like I need a class. And that's the JavaScript for that. JavaScript doesn’t have first-class support for classes; we all know that as a prototype-based language. It does have support for creating new instances of functions, and that's all CoffeeScript is doing — it’s just wrapping that boilerplate code to make your life easier.

00:26:08.560 I can type one line, get nice boilerplate code, and have this great model that I can work with. Here is a little more complex example of a class. I’ve got a constructor that gets called every time I initialize it. I have a salary function that will return a salary, and then I could call that. There are a few interesting parts about this class. I actually want to take a moment to talk about the first one — notice I can do default arguments in CoffeeScript just like I can in Ruby.

00:26:53.840 So here I say this class is going to take options as part of its constructor. If no options are passed in, then they're set equal to an empty hash, which is great. The other thing that’s happening in this constructor is one of my favorite little tips that I want to give you guys today is the at sign. When you see this at in CoffeeScript, it essentially replaces this dot. So whenever I see this, I can go, "Okay! If we look at the salary, I can go if I look at the salary function, it’s the equivalent of this dot options dot salary!"

00:27:41.760 In this constructor, I actually have the at sign in the function call in the argument list. This is something I wish Ruby would do because we do this every day in Ruby. I know everybody does this. This really should be in Ruby core! So, Aaron, I hope you’re listening, this needs to be in core. One of the things we do all the time in Ruby is we take constructors or other methods and might say, "Okay, it takes an options hash and we do this dot attributes equals options." Raise your hands if you’ve done that! Everybody has!

00:28:24.400 So by putting that at sign there, I’m saying set whatever that argument is and set that equal to this dot options equals options. And if we actually look at the JavaScript code here, you can see that is happening in this line right here. It’s a little funky because it's doing the default arguments too, but that’s such a nice time saver and just makes your code look really nice. Then we can access it with options later in the salary function, and that’s what it looks like.

00:29:00.640 Here we go! This is the JavaScript for that. Notice the JavaScript is getting longer with each slide as we do more complex things; our CoffeeScript slides are staying nice with big font, but the JavaScript slides are getting smaller and smaller. We can extend classes in CoffeeScript. Here we have the classic bad OO example of a manager extending an employee. You should not do your manager-employee relationships like this, but it’s always great for demonstration purposes.

00:29:41.760 Here, we’re going to take the salary function and override it because the manager gets a nice big 10K bonus for doing whatever managers do. We can call the super method just like in Ruby and get the results of the salary function from the employee class and then mix that into our salary function in our manager class and give them that nice bonus. The argument rules for super apply in Ruby and CoffeeScript.

00:30:12.400 So here, I don’t pass any arguments to super, so any arguments that get passed into salary will get passed up to super automatically, or I could pass in my own arguments to super and override those. And in this case, again, the JavaScript gets smaller and tinier and tinier.

00:30:49.120 Bound functions: this is the second of those single-character tidbits I wanted to impart upon you this morning. I had a lot of Mai Tais last night, so I’m not even sure I’m speaking English right now. Here we get a user class, and the user takes a name. We’re going to say hi to the user, printing it out to the log. We have this log method down at the bottom that takes a callback.

00:31:15.280 Then, inside that log method, it’ll call that callback, very similar to how things like jQuery work, where we do something and when the server responds, we execute some callback function. So when we do this, however, we expected to say hello Bob and hello Mary because those are our two users. What we actually get is hello undefined for both Bob and Mary. The reason for this is we have lost the scope of what this is. This is the part where it gets very complicated!

00:31:57.360 Because I have to use quotes around the word this every other word. Yehuda Katz wrote a great blog post about a year ago explaining how this works in JavaScript, and I highly recommend everybody go and read it, because it's a fascinating read and it’s a really complex subject. So we have this problem — we’ve lost this. The JavaScript engine doesn’t know where we’re calling that callback from. It thinks we're calling it from inside the log function, which is actually where we are calling it from. It doesn’t know; it lost it.

00:32:21.920 It has a new version of this that it’s responding to. So how do we fix that? Well, we can fix it with the say hi call. We have to say hi function we’ve defined with a single arrow. As I highlighted nicely in yellow — which is apparently very hard to do in Keynote for some reason. So I had to fake it. Anyway, watch that function and I’ll show you how we can get the context back for our function.

00:32:56.160 Fat arrow! I’ll do it one more time: single arrow highlights that arrow. Now if we were to run this, we’d get hello Bob and hello Mary. This is a lifesaver when you’re doing AJAX requests or any requests that go off and do something else and expect callback functions later, and you want them to be able to work in the context which they were created. So, in this case, I want this callback function when it gets executed to work in the instance of User that it was created in. By doing this single character, I’ve captured that binding and wrapped it around that method.

00:33:33.584 If we look at the JavaScript, here’s the same class just without the crafting of printing stuff out. You get a better idea of what’s happening. When it creates a new user, it actually goes and wraps that say hi function in another function and passes the original say hi function and this into it. Now it has a binding for this; it’s a little weird, it’s a little funky. It’s definitely some JavaScript magic.

00:34:09.480 The best part is you don’t have to understand how it works, just that it does, and it’ll save you so much time. Finally, one of my favorite features is the last of the three characters: the existential operator. You start briefly earlier, but I didn’t really talk about it. If foo question mark, then log foo out to the screen. With that one question mark, we have told CoffeeScript to check the existence of foo.

00:34:32.720 It’s better illustrated with the JavaScript here: if foo is not equal to undefined and foo is not null, then we can log to the console. This really cleans up your code and makes life much nicer. You don’t have to write this stuff everywhere. But it gets better! This is the part where I always get super excited! How many people here have left the console.log statement in their JavaScript and pushed to production? Okay, a bunch of people! Now, how many people have done that on IE?

00:35:17.040 Right? And if that’s the point— you only know what happened on IE because none of us use IE, right? When the CEO comes running in five minutes later going, "The whole site has just stopped working! What happened?" And it’s like, "Oh, there’s no console in IE!" So the JavaScript just blows up! And IE’s nice; it doesn’t just raise a little error and continue; it just stops executing! We can do this: console question mark log.

00:35:59.440 So if the console is defined, then do console.log like normal. That is brilliant! I have my editor set up whenever I do console.log; it puts a little question mark in there. So if I ever forget to put it in production, I know it’ll keep running. I’ll be safe! It gets better! We can chain them! We can do more stuff with this; we could keep adding question marks after question mark after function call.

00:36:36.920 So here, if there’s a current user and that current user has a first name, then do something with it. It gets a little funkier the more question marks you add, but it’s really, really nice! So, my last little interesting bit of CoffeeScript before I depart here today: The Raven! Has anybody ever read 'The Raven' by Edgar Allan Poe? Yeah, okay, great! Has anybody ever tried to execute 'The Raven' by Edgar Allan Poe in a compiler? No! Because it is not valid anything! That’s a lie — it is actually semantically valid CoffeeScript.

00:37:12.080 I have no idea who found that out, why they found that, like, are they typing poems into the CoffeeScript compiler hoping that one day they will find one that executes? And, oops, damn it, I did it again. Oh nice! Now I’m getting really crazy over here. There we go! If you don’t believe me, this is the JavaScript that gets compiled!

00:37:53.640 So there you go! That’s what 'The Raven' would look like in CoffeeScript, should you dare try to execute it. Um, yeah, you said it was so awesome! I saw it the other day and was like, "I’ve got to put that on the slide!" So, celebrity endorsement time! If I haven’t sold you on CoffeeScript yet, I'm gonna have a couple celebrities come up and endorse CoffeeScript. The first is Matt! Have you guys met Matt? He’s around here somewhere. I don’t think he's in the room — oh! He was going to the other talk!

00:38:31.760 That’s right, and we went to dinner the other night, and Matt said, "I would love to give a celebrity endorsement, but I’m going to the other talk!" Which is not much of an endorsement! But he said, "You should go to Mark’s talk!" He’s like, "You can quote me on that; you should go to Mark’s talk!" I was like, "That’s great considering it’s going to be the very end of my talk!" Over the course of dinner, he also said, "Buy his book! It’s great!" Not necessarily in that order, but those words eventually came out.

00:39:15.280 And I was like, "You know, if they can do that with John Carter and put really nice quotes under that piece of crap, then I can probably do that with my talk too!" Corey! Corey Haynes is going to come up, and he’s going to endorse CoffeeScript for you! Let’s hear it for Corey Haynes, ladies and gentlemen! Corey can just read what’s on the screen. I made the mistake of saying I’d read anything!

00:40:03.040 When I'm not engaged in autoerotic asphyxiation, I write CoffeeScript and you should too! The second one — not the first one! Thank you, Corey! Gore Haynes, everybody! Oh, he actually said that the other night at dinner, which is really awesome. Constantine! Let’s hear it for Konstantin Haas, everybody! Constantine also made the pledge to read whatever's on the screen, so I apologize. Oh, you just wanted me to say that! Definitely! I totally wanted to say it!

00:40:25.840 Okay, I’m not negative; I’m just German! But I’m definitely positive about CoffeeScript! Thank you, Constantine! See, if you don’t believe me, there are actual celebrities here who are more than happy to tell you all about CoffeeScript! So, thank you guys! What didn’t I cover? I didn’t cover a ton of things. I briefly talked about default arguments and ranges. I didn’t talk about splatted arguments; you can do those in CoffeeScript. Scoping security: what do I get? Strict mode, common mistakes made in JavaScript?

00:41:04.640 CoffeeScript tries to fix those for you! There’s a whole load of operators, a do keyword; there’s so much! There’s so much more, and I highly recommend you really dig into it. I also highly recommend you read this book! So, in case anybody's curious: 'Programming in CoffeeScript.' With that, I say mahalo for your time! I’ve got books, I’ve got five books to give away here, so the first five people with questions get to come up and pick 'Programming in CoffeeScript' or the incredibly outdated, but it's still really useful 'Distributed Programming with Ruby.' Questions? Yes, you, sir!

00:41:49.840 Did you precede Google? Because Google has Dart, which compiles to JavaScript!? That it does! So they’re copying you? That’s very commendable! Well, I didn’t actually write CoffeeScript, but that’s the concept, yeah. So Dart? Yeah, there have been a bunch of these languages out there, as I’m sure you all know. Dart is one of them, and I’d encourage you to check out that 25,000-line hello world Dart example on GitHub.

00:42:10.560 You can come up and grab a book; you can get whatever book you want here. Yes, you said you were going to cover debugging. Oh, I said I was going to cover debugging? Damn it! I hope no one caught that! Um, yeah! So debugging, there is in the works — there is support for you. Have that one. There you go. Good man!

00:42:41.920 There is support for map coming out soon. You know, mine maps back and forth. I personally don’t have a lot of problem with debugging. You can’t use a debugger, which is fine. I personally don’t really use debuggers anyway. In my Java days, I never used them because I'm crazy and wild. So console.log statements get my goat, and when you run it, or you went into an error in, you know, Chrome or Safari or whatever, you get that line number; you get the file. You know that in the user file in the render method, this line blew up.

00:43:09.440 It maps so close; it really becomes second nature. You think, "Oh, it blew up when I was adding to the element through jQuery!" It’s just right there; honestly, it’s not a big deal! So that’s debugging in a nutshell. Do you think eventually we’ll have in Chrome Web Developer some sort of thing that would show us the CoffeeScript?

00:43:48.880 I hope so! That would be awesome! But all the major browsers need to get on it. I imagine it'll get into WebKit eventually, but the source map is going to be huge because that really will solve a lot of this! You’ll be able to click right through and back to your editor at the exact line where it blew up, and then you’re all set! So, come on, grab a book! Next question! Yes you, sir!

00:44:19.440 How do I convert JavaScript to CoffeeScript? Right, so that’s a great question! What if I have a bunch of JavaScript? How do I go and refactor it into CoffeeScript? What’s my process? My process is: I always start with CoffeeScript, but in those cases I tell you a funny little story.

00:44:59.680 I was with Obi Fernandez a few months ago at RailsConf; we were out to dinner, and we were having this conversation. He said, "Oh, I just love CoffeeScript; it's awesome! I really love the syntax; I think it’s fantastic!" I was like, "Great, Obi, that's really awesome!" He goes, "But, I still don’t know how to write it, so I write all my stuff in JavaScript!

00:45:30.960 This is true story. I write all my stuff in JavaScript, I paste it into 'js to coffee', get the CoffeeScript, and then paste that back into a Coffee file in my Rails app to get the CoffeeScript version of that file!" There’s a site called 'js to coffee' which converts your JavaScript to Coffee. It does a pretty decent job, but the point of that story is he’s writing it in JavaScript, converting it to CoffeeScript, and then Rails is converting it right back to JavaScript again. So I argue just write it in JavaScript.

00:46:08.280 The best way and easiest way to get started with CoffeeScript is to start writing your new things in it. Instead of just kind of refactoring, eventually you’ll love CoffeeScript so much that that other stuff will start getting really annoying, and then you say, "Okay, I'm now going to refactor this. I’m in here fixing a bug; I really hate working with JavaScript, so I’m going to take a few minutes to refactor it into CoffeeScript. It’s easy!" So check out js to coffee.org.

00:46:48.640 I think we can just paste in your JavaScript, and it’ll spit out a bunch of CoffeeScript for you. So grab a book if you’d like one. Any other questions? Yes you in the corner!

00:47:26.680 Zero problems integrating with jQuery! It works with every single JavaScript library on the planet: jQuery, MooTools, Prototype—I would say Prototype—any obscure JavaScript file you’ve found, it will work with! So it’s really nice! Come get a book! Okay, Charles, you’re next!

00:47:50.560 So, it’s a great question! Rails has nice support for CoffeeScript right out of the box! What about other frameworks? Have I used it with other things? I do use it with Sinatra; it’s very easy to set up Sprockets in the asset pipeline with Sinatra. I’m getting to you, Constantine! It’s really nice; I’ve had a problem testing my CoffeeScript with Sinatra, but I’m actively working on porting the Kanacha gem over to Sinatra support, which will be really nice!

00:48:30.000 I’ve written a lot of just straight HTML projects and used CoffeeScript, and Guard or CoffeeScript has a watcher as well to compile down to JavaScript, so you can serve it up statically. Sinatra has built-in support for it! So, if you are writing Node apps, you can write them all in CoffeeScript really easily!

00:49:16.000 So does that answer your question? Awesome! Sorry, no more books! I think the last guy took two! Yeah, I would like to add to that question, or add to the answer rather. So, Sinatra supports CoffeeScript as a template name! You can just add a CoffeeScript view and then say Coffee then symbol for the name; it just works!

00:50:04.760 Was saying that Rake Pipeline is a great alternative for compiling your assets; that’s not Rails specific—so maybe I’ll check that out for my Sinatra problem that I’m having, which is great. Also, Sinatra supports CoffeeScript as a templating language! So if you’re responding to a JS request or JSON request through Sinatra, you can create Coffee views and return those, which is pretty awesome!

00:50:41.920 Great! Any other questions? Yes over there! Um, even though they don’t do exactly the same thing from what I gather — can you give another one or two competitors to CoffeeScript? And why do you think CoffeeScript will win out in the short term, let’s say the next five to ten years?

00:51:28.000 Okay, so the question was: there are a bunch of competitors in very similar languages; can I give a couple examples of them and why I think CoffeeScript is better? So, the two big ones — well, the big one up to date, I would say would be Dart. Dart has gotten very little traction and very little community, mostly because it actually requires a Dart kind of VM to run, which is why the hello world is 25,000 lines.

00:52:07.080 So, CoffeeScript doesn’t require that because it just compiles into idiomatic JavaScript that can be run in any JavaScript environment, so that's a huge win for CoffeeScript. Microsoft just announced TypeScript last week. TypeScript, as I mentioned earlier, adds strong typing to JavaScript — because that’s what we all wanted!

00:52:43.440 I guess that's an example if you really like strong typing and you come from a Microsoft background — it’s got IntelliSense support apparently! At 50 minutes of the video, 49 minutes of him is showing off code completion and one minute is talking about static typing, so! Yeah, I haven’t actually had a chance to play with it. I probably won’t play with it.

00:53:28.840 I think CoffeeScript is nice and I think they — both Dart and Java and TypeScript, and things like GWT, which is a Google Web Toolkit where you can write JavaScript in Java, I think are actually making the problem more complicated. They’re trying to abstract the things that people know and understand and cling to in these kind of older, enterprise-y systems—where people are like, "I know my Java; I don't want to leave my Java! I love my Java!"

00:54:16.320 So, let's make my JavaScript look like Java even more! Whereas CoffeeScript is saying, "Hey, we can improve upon this language; we can make this a better language!" In future versions of ECMAScript, they’re actually taking some of this stuff that’s in CoffeeScript and making it part of ECMAScript in the future. So, you can actually expect to see things like the fat arrow coming into JavaScript in a few years.

00:54:51.879 So, CoffeeScript is a great way to get your feet wet today on what the future of JavaScript development is going to be in a few years. So, there you go! Other questions? You okay? Yes, time to answer!

00:55:31.120 Can you repeat that question? Multiple inheritance? No, no multiple inheritance! Yeah, don’t ever do multiple inheritance anyway! Corey Haynes would be happy to yell at you for that!

00:55:48.720 Well, that’s it! I think I’m out of time! A well-placed Mai Tai later will have me answer all of your questions should you have them! Thank you guys very much; I appreciate it!

00:56:18.880 You!

Aloha RubyConf 2012