Our Blog

CoffeeScript: Introduccion

Mientras estamos escribiendo código en Javascript, sin usar ninguna librería o por medio de JQuery, vemos que el código es cada vez mas grande por mas que nos tomemos el tiempo de separarlo correctamente en distintas funciones no cambia demasiado el panorama. CoffeeScript nos permite por medio de una sintaxis bastante similar a JavaScript escribir código de manera simple para luego compilarlo en el correspondiente codigo de JavaScript.

Introducción

CoffeeScript es un pequeño lenguaje que compila el código escrito en Javascript y ademas permite el uso de JQuery de manera mas simple aun. Este lenguaje se ha ido popularizando debido a que elimina entre otras cosas los braces ({}), paréntesis y los ; (puntos y comas), lo cual lo vuelve aun mas fácil a la hora de programar.

El código que se ha generado por medio de este lenguaje tiende a correr mas rápido o igual de rápido que el que puede escribirse en JavaScript sin el uso de CoffeeScript ya que intenta optimizar lo mas posible el código escrito. Ademas de esto hay que tener en cuenta que cada archivo de CoffeeScript tiene un relación de uno a uno con un archivo de JavaScript.

Para los que alguna vez han utilizado algún pre-procesador de CSS como Sass, CoffeeScript es el equivalente de este ultimo pero a nivel de JavaScript.

Ventajas

Veamos ahora alguno de los beneficios que nos ofrece CoffeeScript:

  • Reduce grandes cantidades de lineas de código en unas pocas
  • Es legible y entendible
  • Fácil de mantener
  • Se integra a JQuery de manera sencilla

¿Como lo instalo?

Para poder instalar CoffeeScript en nuestra computadora deberemos tener instalado previamente NodeJs y npm, en general este ultimo se encuentra presente cuando instalamos NodeJs o si contamos con una versión superior a la 0.6.3. Para el caso de NodeJs la forma de instalarlo es bastante simple y en la pagina oficial se brinda información detallada de como hacerlo para cada uno de los sistemas operativos (en el caso de Windows es un instalador que ya nos configura todo con un simple click).

Una vez que contamos en nuestro sistema con NodeJs y npm la forma de instalar CoffeeScript es bastante sencilla y se realizar por medio del siguiente comando:

npm install -g coffee-script

Una vez que finalice esto lo ultimo, tendremos instalado de manera global (para poder usarlo en cualquier directorio). Si tenemos dudas de si se ha instalado de manera correcta podemos comprobarlo ejecutando coffee -v que nos debería retornar la versión que se encuentra instalada.

¿Como lo uso?

Antes que nada deberemos crear un archivo con la extensión coffee (nombreArchivo.coffee) para que CoffeeScript reconozca el archivo como valido a la hora de quererlo compilar.

En los siguientes apartados veremos como usar la sintaxis de CoffeeScript para hacer cosas básicas al igual que en JavaScript.

Variables

En el caso de las variables se elimina la palabra reservada var ya que no es necesaria, esta se agregara una vez que se compile el código. Ademas de esto ultimo no es necesario el uso del punto y coma (;).

CoffeeScript JavaScript

message = “Estas listo para un cafe?”

alert(message)

var message;

message = “Estas listo para un cafe?”;

alert(message);

Funciones

Las funciones en el mundo de CoffeeScript son mas simples que en Javascript ya que no es necesario el uso de la palabra funcion como así tampoco el uso de la palabra return ya que toma la ultima linea de código la toma como el retorno de la función.

  • Sin parámetros
CoffeeScript JavaScript

coffee = ->

confirm “Ready for some Coffee?”

var coffee = function() {

return confirm(“Ready for some Coffee?”);

}

  • Con parametros
CoffeeScript JavaScript

coffee = (message) ->

answer = confirm message

“Your answer is #{answer}”

var coffee;

coffee = function( message ) {

var answer;

answer = confirm( message );

return “Your answer is ” + answer;

}

  • Con parámetros opcionales
CoffeeScript JavaScript

coffee = (message = “Ready for some Coffee?” ) ->

answer = confirm message

“Your answer is #{answer}”

var coffee;

coffee = function(message) {

var answer;

if (message == null) {

message = “Ready for some Coffee?”;

}

answer = confirm(message);

return “Your answer is ” + answer;

}

If / Else

En este tipo de sentencia no ha habido mayores cambios solo se deja como opcional el uso de los braces ({}) y los paréntesis.

CoffeeScript JavaScript

if age < 18

alert ‘Under age’

else

alert ‘of age’

if (age < 18) {

alert(‘Under age’);

} else {

alert(‘of age’);

}

 Operadores

En este caso los operadores para realizar comparaciones son mas simples de recordar, siendo incluso algunos de ellos similares a JavaScript.

CoffeeScript JavaScript
== is ===
!= isnt !==
not !
and &&
or ||
true yes on true
false no off false

 Switch

Este tipo de sentencia presenta a la vista una forma mas legible para cualquier persona ya que utiliza palabras como when y then.

CoffeeScript JavaScript

message = switch cupsOfCoffee

when 0 then ‘Asleep’

when 1 then ‘Eyes Open’

when 2 then ‘Buzzed’

else ‘Dangerous’

var message = (function() {

switch (cupsOfCoffee) {

case 0:

return ‘Asleep’;

case 1:

return ‘Eyes Open’;

case 2:

return ‘Buzzed’;

default:

return ‘Dangerous’;

}

})();

¿Como compilo el código?

Una vez que tenemos nuestro archivo con la extensión coffee con todo el código que necesitamos procederemos a compilarlo para eso hay varias opciones:

  • Compilar de a un archivo a la vez
coffee -c  nombreArchivo.coffee
  • Compilar un archivo y recompilarlo cada vez que se guarde un cambio
coffee -w -c nombreArchivo.coffee
  • Compilar directorios enteros
coffee --compile --output lib/ src/

Cada una de estas tomara el archivo de CoffeeScript y nos generara uno con el mismo nombre pero con la extensión de JavaScript.

Conclusión

A lo largo de este post, que es solo un primer vistazo, se ha visto que la forma de usar CoffeeScript es sencilla y nos ayuda a poder hacer que el código JavaScript sea mas optimo de manera sencilla. Ademas de esto si se tiene en cuenta el agregado de que se puede usar JQuery dentro de este lenguaje lo convierte en una opción a tener en cuenta a la hora de programar.

No comments
TeraswapCoffeeScript: Introduccion

Related Posts