6 min read

In this article, based on Marcelo Reyna’s book Meteor Design Patterns, we will see that when you want to develop an application of any kind, you want to develop it fast. Why? Because the faster you develop, the better your return on investment will be (your investment is time, and the real cost is the money you could have produced with that time). There are two key ingredients ofrapid web development: compilers and patterns. Compilers will help you so that youdon’t have to type much, while patterns will increase the paceat which you solve common programming issues.

Here, we will quick-start compilers and explain how they relate withMeteor, a vast but simple topic. The compiler we will be looking at isCoffeeScript.

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

CoffeeScriptfor Meteor

CoffeeScript effectively replaces JavaScript. It is much faster to develop in CoffeeScript, because it simplifies the way you write functions, objects, arrays, logical statements, binding, and much more.All CoffeeScript files are saved with a .coffee extension. We will cover functions, objects, logical statements, and binding, since thisis what we will use the most.

Objects and arrays

CoffeeScriptgets rid of curly braces ({}), semicolons (;), and commas (,). This alone saves your fingers from repeating unnecessary strokes on the keyboard. CoffeeScript instead emphasizes on the proper use of tabbing. Tabbing will not only make your code more readable (you are probably doing it already), but also be a key factor inmaking it work. Let’s look at some examples:

#COFFEESCRIPT
toolbox =
hammer:true
flashlight:false

Here, we are creating an object named toolbox that contains two keys: hammer and flashlight. The equivalent in JavaScript would be this:

//JAVASCRIPT - OUTPUT
var toolbox = {
hammer:true,
flashlight:false
};

Much easier! As you can see, we have to tab to express that both the hammer and the flashlight properties are a part of toolbox. The word var is not allowed in CoffeeScript because CoffeeScript automatically applies it for you. Let’stakea look at how we would createan array:

#COFFEESCRIPT
drill_bits = [
“1/16 in”
“5/64 in”
“3/32 in”
“7/64 in”
]
//JAVASCRIPT – OUTPUT
vardrill_bits;
drill_bits = [“1/16 in”,”5/64 in”,”3/32 in”,”7/64 in”];

Here, we can see we don’t need any commas, but we do need brackets to determine that this is an array.

Logical statements and operators

CoffeeScript also removes a lot ofparentheses (()) in logical statements and functions. This makes the logic of the code much easier to understand at the first glance. Let’s look at an example:

#COFFEESCRIPT
rating = “excellent” if five_star_rating
//JAVASCRIPT – OUTPUT
var rating;
if(five_star_rating){
rating = “excellent”;
}

In this example, we can clearly see thatCoffeeScript is easier to read and write.Iteffectively replaces all impliedparentheses in any logical statement.

Operators such as &&, ||, and !== are replaced by words. Here is a list of the operators that you will be using the most:

CoffeeScript

JavaScript

is

===

isnt

!==

not

!

and

&&

or

||

true, yes, on

true

false, no, off

false

@, this

this

Let’s look at a slightly more complex logical statement and see how it compiles:

#COFFEESCRIPT
# Suppose that “this” is an object that represents a person and their physical properties
if@eye_coloris “green”
retina_scan = “passed”
else
retina_scan = “failed”
//JAVASCRIPT - OUTPUT
if(this.eye_color === “green”){
retina_scan = “passed”;
} else {
retina_scan = “failed”;
}

When using @eye_color to substitute for this.eye_color, notice that we do not need .

Functions

JavaScript has a couple of ways of creating functions. They look like this:

//JAVASCRIPT
//Save an anonymous function onto a variable
varhello_world = function(){
console.log(“Hello World!”);
}
//Declare a function
functionhello_world(){
console.log(“Hello World!”);
}

CoffeeScript uses ->instead of the function()keyword.The following example outputs a hello_world function:

#COFFEESCRIPT
#Create a function
hello_world = ->
console.log “Hello World!”
//JAVASCRIPT - OUTPUT
varhello_world;
hello_world = function(){
returnconsole.log(“Hello World!”);
}

Once again, we use a tab to express the content of the function, so there is no need ofcurly braces ({}). This means that you have to make sure you have all of the logic of the function tabbed under its namespace.

But what about our parameters? We can use (p1,p2) -> instead, where p1 and p2 are parameters. Let’s make our hello_world function say our name:

#COFFEESCRIPT
hello_world = (name) ->
console.log “Hello #{name}”
//JAVSCRIPT – OUTPUT
varhello_world;
hello_world = function(name) {
returnconsole.log(“Hello “ + name);
}

In this example, we see how the special word function disappears and string interpolation. CoffeeScript allows the programmer to easily add logic to a string by escaping the string with #{}. Unlike JavaScript, you can also add returns and reshape the way astring looks without breaking the code.

Binding

In Meteor, we will often find ourselves using the properties of bindingwithin nested functions and callbacks.Function binding is very useful for these types of cases and helps avoid having to save data in additional variables. Let’s look at an example:

#COFFEESCRIPT
# Let’s make the context of this equal to our toolbox object
# this =
# hammer:true
# flashlight:false
# Run a method with a callback
Meteor.call “use_hammer”, ->
console.log this

In this case, the thisobjectwill return a top-level object, such as the browser window. That’s not useful at all. Let’s bind it now:

#COFFEESCRIPT
# Let’s make the context of this equal to our toolbox object
# this =
# hammer:true
# flashlight:false
# Run a method with a callback
Meteor.call “use_hammer”, =>
console.log this

The key difference is the use of =>instead of the expected ->sign fordefining the function. This will ensure that the callback’sthis object contains the context of the executing function. The resulting compiled script is as follows:

//JAVASCRIPT
Meteor.call(“use_hammer”, (function(_this) {
return function() {
returnConsole.log(_this);
};
})(this));

CoffeeScript will improve your code and help you write codefaster. Still, itis not flawless. When you start combining functions with nested arrays, things can get complex and difficult to read, especially when functions are constructed with multiple parameters. Let’s look at an ugly query:

#COFFEESCRIPT
People.update
sibling:
   $in:[“bob”,”bill”]
,
limit:1
->
console.log “success!”

There are a few ways ofexpressing the difference between two different parameters of a function, but by far the easiest to understand. We place a comma one indentation before the next object.

Go to coffeescript.org and play around with the language by clicking on the try coffeescript link.

Summary

We can now program faster because we have tools such as CoffeeScript, Jade, and Stylus to help us. We also seehow to use templates, helpers, and events to make our frontend work with Meteor.

Resources for Article:


Further resources on this subject:


LEAVE A REPLY

Please enter your comment!
Please enter your name here