CoffeeScript: Learn Your Coffee

Discussion in 'Linux Other' started by Eric Hansen, Jul 5, 2014.

  1. Eric Hansen

    Eric Hansen Moderator Staff Writer

    Messages:
    124
    Likes Received:
    87
    Trophy Points:
    28
    JavaScript is a very popular language, whether you like to use it or not. I, personally, have always loathed JavaScript (and Java itself), even with my rising interest in scripting languages such as Python.

    When you look at how JavaScript has morphed, however, it is quite interesting. Long gone are the days of simply going to DynamicHTML and copy/pasting the JavaScript code to make marquees happen. Now you can write websites that render perfectly fine in mobile or desktop without even writing two different versions of the website (which, I do know is also thanks to CSS but JavaScript helps out a lot as well). There’s also a plethora of libraries to help in development, with some popular ones being jQuery, Prototype.js and YUII.

    Now there’s even advancement in what can be considered server-side JavaScript as well. The most popular from my experience being Node.js, but there are others. Even better though, is that there’s a flavor of Node.js that has syntax very similar to languages such as Ruby or Python, which both are growing very strongly in the realm of web application development/deployment/etc… Welcome CoffeeScript. It requires Node.js to run, but can be considered a language in itself.

    This guide is going to walk through installing CoffeeScript and writing a very simple “Hello World!” application in it. Mostly due to the fact that I’m still learning the language itself too, but also because I don’t want to throw a lot of “this language does this” when I just want to highlight a simple feature.

    Install
    This will be installed in an Ubuntu LXC container. While being LXC doesn’t really matter, the process to install and run CoffeeScript (CS) may vary.

    As always you’re going to want the newest packages, so update and upgrade whatever you need:

    Code:
    root@coffeescript:~# apt-get update && apt-get upgrade
    [...update output trimmed…]
    Fetched 3,358 kB in 3s (1,037 kB/s) 
    Reading package lists... Done
    Reading package lists... Done
    Building dependency tree 
    Reading state information... Done
    0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
    CS is based on Node.js, so we need to install that and NPM (Node.js Package Manager):
    Code:
    root@coffeescript:~# apt-get install curl build-essential openssl libssl-dev nodejs npm
    If not already installed, then this will also install the build-essential packages as well (gcc, make, etc…). For me this was ~46 packages, 35.8 MB to download and total 97.8 MB space used when all was said and done.

    When trying to search NPM for CS, I ran into the saddening “self-signed certificate” error:

    Code:
    root@coffeescript:~# npm search coffeescript
    npm WARN Building the local index for the first time, please be patient
    npm http GET https://registry.npmjs.org/-/all
    npm ERR! Error: SSL Error: SELF_SIGNED_CERT_IN_CHAIN
    One of the things you can do is update NPM to the latest package:
    Code:
    npm install npm -g --ca=null
    However, if you have the luck like me, you’ll still get the same error. So, what you need to do is basically tell NPM to use known registrars (per Node.js’ documentation):
    Code:
    npm config set ca=""
    Then you can run this:
    Code:
    root@coffeescript:~# npm search coffeescript
    No errors! However, it’s going to build a database of the packages, which can take a while at first itme use.

    After that’s finished, we’ll install CS:

    Code:
    root@coffeescript:~# npm install -g coffee-script
    Please take note of the “-” in coffee-script. If you type it in without that, you’ll see an error such as:

    Code:
    root@coffeescript:~# npm install -g coffeescript
    npm http GET https://registry.npmjs.org/coffeescript
    npm http 304 https://registry.npmjs.org/coffeescript
    npm WARN deprecated coffeescript@99.999.99999: You misspelled 'coffee-script'
    > coffeescript@99.999.99999 preinstall /usr/local/lib/node_modules/coffeescript
    > node super-evil-script-omg-for-reals.js
    You misspelled 'coffee-script'
    Making a world to say hello to
    We’ve got Node.js, NPM and CS installed, so lets make a “Hello world!” program. I say program because CS can compile coffee scripts and convert it to JavaScript, so we’ll look at that as well.

    In your text editor, put this in there:

    Code:
    console.log(“Hello world!”);
    Save it as hello.coffee, and now go to your terminal:

    Code:
    coffee hello.coffee
    This should output:
    Code:
    root@coffeescript:~# coffee hello.coffee
    Hello world!
    So we got this, lets now make it into usable JavaScript! The order matters here (seems the “-c” switch needs to be last), so we’ll compile this one script to hello.js:

    Code:
    root@coffeescript:~# coffee -o . -c hello.coffee
    root@coffeescript:~# ls
    hello.coffee  hello.js  node_modules
    The “node_modules” folder can be ignored (should also be empty). We’ll peak into the hello.js file:


    Code:
    // Generated by CoffeeScript 1.6.1
    (function() {
    console.log("Hello world!");
    }).call(this);
    If we put this into a simple website and loaded it into our browser, and went to our browser’s console log, you’ll see “Hello world!” is printed.

    Conclusion
    This is a very simple guide to get your feet wet into CS, and probably adds very little. However, this does help get you introduced and set up with it so you can learn more, read the tutorials and become familiar with your coffee (pun intended!).

    Attached Files:

    DevynCJohnson likes this.
  2. DevynCJohnson

    DevynCJohnson Well-Known Member Staff Member Staff Writer

    Messages:
    1,336
    Likes Received:
    1,074
    Trophy Points:
    113
    I love CoffeeScript. I know some JavaScript and I can definitely say that CoffeeScript is better. I learned CoffeeScript very easily and I love how CoffeeScript cross-compiles to JavaScript very easily. Code can be written more quickly with CoffeeScript than JavaScript.

    CoffeeScript:
    Code:
    square = (x) -> x * x
    
    Equivalent JavaScript:
    Code:
    var square;
    square = function(x) {
       return x * x;
    };
    
    I have never had an issue with the cross-compilation. CS converts to JS very well.

    http://coffeescript.org/
  3. Eric Hansen

    Eric Hansen Moderator Staff Writer

    Messages:
    124
    Likes Received:
    87
    Trophy Points:
    28
    My gripe is that it depends. What you did is compile the CS to JS, which is fine. But normally someone would write the JS as:

    Code:
    function square(x){
        return x * x;
    }
    CS just makes the code more readable, especially if you're coming from a background like Python or Ruby where indentation makes all the difference.
    ryanvade and DevynCJohnson like this.
  4. ryanvade

    ryanvade Administrator Staff Member Staff Writer

    Messages:
    1,273
    Likes Received:
    431
    Trophy Points:
    83
    I prefer to have more brackets, just seems more clean. :D
  5. Eric Hansen

    Eric Hansen Moderator Staff Writer

    Messages:
    124
    Likes Received:
    87
    Trophy Points:
    28
    I hear that a lot about languages like CS, Python, etc... from people who are familiar with PHP, C++, etc...

    I feel indentation makes it cleaner, compared to brackets that can look like this:

    public function someFunction($arg1, $arg2){ $arg1 = "linux"; $arg2 = "org"; echo("you are visiting ".$arg1.".".$arg2); }

    It's completely legit, but not as easy to read as something like:

    Code:
    def someFunction(arg1, arg2):
      arg1 = "linux"
      arg2 = "org"
      print("You are visiting %s.%s" % (arg1, arg2))
    Or in CS:

    Code:
    someFunction = (arg1, arg2) ->
      arg1 = "linux"
      arg2 = "org"
      console.log "You are visiting "+arg1+"."+arg2
    ryanvade and DevynCJohnson like this.

Share This Page