From a technical point of view, this project is built on webpack (and babel) and is using ES6 and JSX (ES2015 to be more precise). The project is based on Facebook’s new beast, React. As a state management, I’m using MobX, and many components and tools from React’s ecosystem, such as React Router and React Autocomplete. The test suite/framework is Facebook’s Jest, which looks and feels really fast. Finally, I used for the very first time CSS modules, a nice implementation of CSS that plays nicely with React’s components.

For those who want to contribute I’ve already set up a project with tasks on Github, so feel free to contribute, especially on the design!

You can still contribute entries on the package’s official repository learn more about it from its official npm page (yes the package’s name is still greek-in-tech). Feel free to use it on your own projects and star it if you like it!

It comes with ES6 and ESlint out of the box, and with a webpack configuration that you can actually understand and built on top of it. Feel free to fork, download and play with it!

Then we can use it just like any other class method.

Parallel assignment of variables

In Ruby, you can assign several values to several variables in a single expression (aka. one-liner). The values can be of any type, making it even better! The result is pretty impressive, check out the snippet below :

You can even return multiple values from methods!

And in case the above example didn’t quite impress you, see how convenient it can be on a real-world example :

Here Documents

You can build multiple line strings using here documents. Ruby supports both single and double-quoted strings on here documents, have a look at the examples :

Ranges

Ruby supports ranges of numbers which can be very handy. You can define a range of numbers using the starting value followed by .. (2 dots) or ... (3 dots) and the end value. On the first case the range includes the last value, and on the other one excludes it. For example :

Ranges can be used in many cases such as :

Loops

Comparison

and creating arrays

Default arguments

Another great feature!

block_given? on yields

A yield statement executes a code block associated with a method. You probably know that already (if not have a look at the examples below), what you probably don’t know is the block_given? method that checks if a code block is passed to the method.

Case statement tricks

Case staments in Ruby are very flexible. They come in two main flavors, multiline for writing many statements and one-liners, that looks much better:

You can also assign a value using the case statement in Ruby:

Usefull object instance methods

As a final tip, I enlist the most useful public methods of the Object class (the base class for Ruby, all other types inherit these methods). All of them are helpful, but I tend to use the debugging-oriented ones the most :

• obj.inspect
• obj.class
• obj.ancestors
• obj.instance_variables
• obj.methods (also obj.private_methods, obj.protected_methods and obj.public_methods can be handy as well)
• obj.to_s (sometimes obj.to_a can be handy as well)

Not bad for an introductory Ruby book. If you like the post stay tuned for more!

Update: Table of contents

Classes

Probably the most valuable feature that CoffeeScript syntax offers at the moment. With the class keyword you can create a new class (CoffeeScript is using the constructor function under the hood) and with the extend keyword you can extend one. To make things even easier, CoffeeScript provides an initialization (aka constructor) function, in case you need it. Just use the contstructor method and you are ready to go. You can use the concept of super method which represents a reference to the superclass version of the method you’re in (very Ruby-like). I’m sure that all these will make more sense with the following example…

class Animal
  constructor: (@name) ->
  move: (meters) ->
    console.log "#{@name} moved #{meters} meters."

class Snake extends Animal
  move: ->
    console.log "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    console.log "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

Constructors

You can set up instance variables with the classic this Javascript keyword (CoffeeScript translates to Javascript after all), but you can save a couple of characters and maybe lines, by using the @ symbol. You can also save a couple of more lines by omitting the instance name.

class Animal
  constructor: (name, height, weight) ->
    @name = name
    @height = height
    @weight = weight

# same as above
class Animal
  constructor: (@name, @height, @weight) ->

Scope

Finally, if you want to pass an instance method as a callback, use the =>, also known as “fat arrow”. The “fat arrow” binds the object’s instance to this and makes your code easier to read. This will also be an ES6 feature, so it makes a lot of sense to get used to it.

class Message
  constructor: (@txt) ->
  thin: -> console.log @txt
  fat:  => console.log @txt

msg = new Message "yo"
msg.thin() # works
msg.fat()  # works

fn = (callback) -> callback()

fn(msg.thin) # => "undefined"
fn(msg.fat)  # works
fn(-> msg.thin()) # works

This has been the final part of the series – see you around and stay tuned.

Update: Table of contents

Switch statement

At last, an easier way to write switch statements. If your switch case contains a single line of code, you can write the entire thing in a single line using the then keyword (see second example).

name = "John"

# normal switch statement
switch name
  when "John"
    console.log "This guy rocks!"
  when "Jon"
    console.log "Still cool guy"
  else
    console.log "Good lad."
    
# switch statement using the then keyword
switch name
  when "John" then console.log "This guy rocks!"
  when "Jon" then console.log "Still cool guy"
  else console.log "Good lad."

For Loops

For loops have many flavors and great potential in CoffeeScript. You can loop through arrays and objects and still keep your code clean and hassle-free. Just take a deep breath and try to absorb as many flavours as you can. They can all come very handy.

Arrays

Iterating Arrays have never been easier…

arr = ["Ned Stark", "Jon Snow", "Arya Stark", "Jaime Lannister"]

# basic array iteration
for name in arr
    console.log name

# array iteration (with index)
for name , i in arr
    console.log "#{i}: #{name}"

# array filtering (with index)
for name, i in arr when name.indexOf "J" is 0
    console.log "#{i}: #{name}"

# array iteration for every second item
for name , i in arr by 2
    console.log "#{i}: #{name}"

Objects

Looping through an object’s key/value pairs is also very easy. You can also loop through just the direct key/value pairs (not the inherited ones) by using the own keyword (which will use the hasOwnProperty method under the hood).

ned =
  name : "Ned Stark"
  house : "Stark"
  words : "Winter is coming"

# print all properties of an object
for key, value of ned 
  console.log "#{key} : #{value}"

# print all own properties of an object
for own key, value of ned
  console.log "#{key} : #{value}"

While Loops

The while loop has 3 syntax flavors to make your code more descriptive and your life easier. Try to use unless instead of while not, as it’s easier and preferable.

# Normal while
num = 10
while num
  console.log num
  num--

# while not
num = 10
while not (num is 0)
  console.log num
  num--

# exactly the same as the above example
num = 10
until num is 0
  console.log num
  num--

As you can see CoffeeScript is very handy when it comes to loops. Keep in mind and stay tuned for the fourth and final part of the Coffeescript gotchas series where we’ll have a look at the syntactic sugar that CoffeeScript provides on Scope and Objects.