Coffeescript: Javascript con esteroides

20/11/2016
Coffeescript: Javascript con esteroides

CoffeeScript ha experimentado un crecimiento tremendo, y se ha convertido en una de las tecnologías más buscadas en los últimos dos años. El campo abierto por Node, Angular, Backbone y otras tecnologías con base Javascript ha abierto la veda y hecho que muchos ojos que muchos ojos se posaran en una tecnología, que si bien no ha sido adoptada de forma masiva, sí que ha sido utilizada de forma exitosa en miles de proyectos, gracias a la facilidad de integración con Ruby on Rails, NodeJS, Grunt, Jenkins y tantos otros. 

Origen

Podríamos decir que Javascript, en origen, no es un lenguaje orientado a objetos, y muchos estarían de acuerdo del mismo modo que muchos pondrían el grito en el cielo. En realidad, Javascript no tiene una orientación a objetos "clasica" como pueden tener Java, C++ y tantos otros, sino que lo hace a su manera, y durante años ha habido cierta controversia con este tema. Todo se debe a que Javascript tiene grandes funcionalidades y posibilidades desconocidas para gran parte del público, sin más.

CoffeeScript viene a remediar este escepticismo añadiendo una sintaxis más sencilla y familiar a los desarrolladores, a la vez que simplifica el trabajo y aumenta las posibilidades - y la velocidad - del trabajo con Javascript. Digamos que CoffeeScript es a Javascript lo que Sass a CSS, para dejarlo más claro.

Sintaxis

Un ejemplo simple antes de nada: habitualmente, cuando queremos ejecutar algo tras la carga de la página con jQuery lo encapsulamos en

$(document).ready(function(){
    // code here
});
$(function(){ 
   // code here
});

mientras que en CoffeeScript tan sólo usaríamos

$ ->
    # code here

En Coffee lo más importante es esto: la simplicidad, desarrollo de un modo más natural. Y como siempre he pensado que para entender una sintaxis, la única y mejor manera es ver código directamente, aquí tenéis una muestra de las características más llamativas de Coffee.

[name, surname, age, new_year, notes] = ['Lisa', 'Simpson', 8, true, [9,9,9,8]]   # Asignación múltiple

age++ if new_year          # Conditional

fullName = (n,s) ->        # Function
  "#{n} #{s}"              ## String interpolating
impressDecept = (n)-> 
  alert '¡Decepción!' if n<9  # Conditional Statement

$('a.next').on 'click', (e)-> # Callback function
  $(this).scrollTo $(this).attr(href)

impressions = (impressDecept note for note in notes) 
      # Comprehensions
      ## Son estructuras de bucle For de tipo For-in 
      ## cada valor del Array sobre el que itera el 
      ## bucle se pasa a una función

class User                     # Class
  @id                          ## Var / attribute
  constructor : (@email)->     ## Constructor - @email = this.email

  setPassword : (pw)->         ## Function
    @salt = CryptoJS.SHA1 pw

class Admin extends User       ## Inheritance (Herencia)
  superPower : ()->
    # some awesome code

Se me quedan en el tintero muchas de las funcionalidades interesantes de CoffeeScript, como super(), => 'fat arrow' (la flecha gorda, no se complicaron mucho con el nombre) o algunos operadores extremadamente útiles como unless. Puedes echarle un vistazo a todo esto a la completa y bien organizada documentación (resumida y extendida) oficial.

Instalación y uso

npm install -g coffee-script

coffee --compile --output lib/ src/
coffee -o lib/ -cw src/ # -cw = --compile --watch

Para Ruby on Rails, basta con incluir 'gem coffee-script' en el Gemfile de nuestro proyecto y hacer un bundle install, aunque es altamente recomendable echarle un vistazo a Barista

Conclusiones

La irrupción de CoffeeScript y su uso en proyectos grandes no ha estado exenta de polémicas. Muchos desarrolladores se pusieron en contra de su uso argumentando que la simplicidad del código no lo convierte en más claro, aunque como en todo hay casos y casos. Para aquellas ocasiones en que es preferible usar código javascript, se puede incluir dentro de un fichero .coffee entre ` ` de forma que no será interpretado por el compilador. 

Como en muchos de estos casos, usar o no usar esta tecnología es una opción personal del desarrollador, siempre y cuando esta no afecte a todo el equipo del proyecto.

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.