Antes de meterte en CoffeeScript, recomendable haber pasado por Javascript – Primera parte


CoffeeScriptHablemos de CoffeeScript y por qué he decidido dar un paso más y aprenderlo. Supongo que como muchos, me puse a aprender Javascript y me he ido defendiendo con el tiempo y al ver CoffeeScript, la primera pregunta que me he hecho es, si ya tenemos JavaScript ¿por qué debo aprender CoffeeScript? y sobre todo ¿por qué, si existe Javascript, tenemos que aprender CoffeeScript?. El motivo de encontrar respuestas es, ese motivo para seguir aprendiendo cosas nuevas con un sentido…. Muchas veces no necesitas saber mucho, simplemente te pones a aprenderlo y punto, pero creo que siempre es bueno encontrar una razón y la motivación que te lleva a aprenderlo. Por tanto, lo primero que hice fue preguntar a un amigo, le comenté: si ya tienes un conocimiento razonablemente sólido como desarrollador JavaScript, ¿hay algún incentivo o motivo por el cual decidiste aprender CoffeeScript? y me respondió rotundamente, . CoffeeScript, está para permitir a los desarrolladores de JavaScript, escribir el mismo código tal como lo dices de una manera más legible y fluida. Decir esto y me vino a la mente la ceremonia a la hora de escribir código un lenguaje u otro, es un buen comienzo. Es una opinión, sin ir a la polémica, pero no hay nada mejor que ponerte y descubrirlo por ti mismo, para poder crearte tu propia opinión al respecto.

También he formulado la pregunta pertinente en Twitter sobre la experiencia que han tenido en CoffeeScript y la respuesta es común a lo que pensaba y lo que he descubierto, primero hay que pasar por Javascript puro (ya lo escuché en la charla de Enrique Amodeo @eamodeorubio, que dio en MadridRB y que en el post dedicado a Javascript pondré) y después ya puedes meterte con CoffeeScript, la sintaxis mejora el tema de ceremonia, se acopla bien jQuery y casa bien con Spine. Echaré un vistazo a Spine a ver que mejora en la integración con Backbone, pero eso es aparte y lo dejo para otro post. También aprovecho para agradecer a Keyvan @keyvanakbary y a Jorge @jmanrubia su opinión.

Tal como ya he comentado anteriormente, creo que después de terminar este post y leerlo, debería escribir otro sobre “Javascript una guía básica” que decía antes y  podré como complemento, el vídeo en Enrique Amodeo, así que en breve saldrá a la luz.

Veamos entonces algunas peculiaridades aprendidas en CoffeeScript que quisiera compartir:

Las variables

A la hora de escribir o definir una variable, lo normal es pensar qué tipo es la variable declararla y nos ponemos a ello, pero en el caso de CoffeeScript, lo único que tenemos que hacer es nombrar nuestra variable y asignarle el contenido que tendrá, veamos un ejemplo:

message = “I am ready for learn CoffeeScript”

alert(message)

Si esto mismo, lo hacemos en Javascript sería así:

var message;

message =  “I am ready for learn CoffeeScript”;

alert(message);

No te fijes en la cantidad de líneas, ya que la declaración y la asignación de un valor lo podemos hacer en la misma línea en Javascript, pero por claridad lo he dejado así, lo importante, por así decirlo, está en que no escribimos ; y no declaramos las variables. Bueno, eso está bien no? entonces, veamos algunas cosas más como las funciones.

Las Funciones

En Javascript las declaraciones de funciones las podemos hacer de dos posibles maneras:

function mymessage(){

     return confirm (“I am ready for learn CoffeeScript”);

}

var message = function (){

      return confirm (“I am ready for learn CoffeeScript”);

}

En el caso de CoffeeScript, sólo se usan Funtions Expression y no es necesario utilizar return en las funciones, por ejemplo:

message = ->

  confirm “”I am ready for learn CoffeeScript”

-> lo convierte en una función

Dos espacios de indentación cuando pongamos código dentro de la función

y siempre nos devuelve un valor

Si lo que necesitamos es recoger un valor de una respuesta que le hacemos al usuario, entonces declaramos la función siguiente:

message = ->

  answer = confirm “I am ready for learn CoffeeScript?”

  “Your answer is ” + answer o también podemos hacerlo con “Your anwers is #{answer}” 

para el caso de Javascript tendríamos:

var menssage;

menssage = function() {

  var answer;

  answer = confirm(“I am ready for learn CoffeeScript?”); 

  return “Your answer is ” + answer;

}

Pero si lo que ahora necesitamos es pasar parámetros, lo haremos en CoffeeScript de la siguiente forma:

message = (mymessage) ->  

  answer = confirm mymessage

  “Your answer is ” + answer o también podemos hacerlo con “Your anwers is #{answer}” 

en Javascript tendríamos:

var menssage;

menssage = function(myMessage) {

  var answer;

  answer = confirm(myMessage); 

  return “Your answer is ” + answer;

}

Fíjate ahora que si necesitamos pasar un parámetro, que tenga un valor por defecto por un lado y por otro, en caso de no tenerlo, controlarlo:

En el caso de escribirlo en Javascript tenemos:

var myalert;

myalert = function(name) {  

   if (name == null) {    

       name = “Carlos“;  

      }  

return alert(name);

};

En CoffeeScript sería:

myalert = (name = “With no name”) ->

   alert name

Bien, y ¿cómo nos quedaría si estamos utilizando jQuery?

jQuery(function($) {    

    function changeTab(p) {      

         p.preventDefault();      

         $(“#tabs li a.active”).removeClass(“active”);      

         $(this).addClass(“active”);

        }

    $(“#tabs ul li a”).click(changeTab);

});

Ahora cómo lo podemos dejar en formato CoffeeScript:

$ ->

   changeTab = (p) ->

      p.preventDefault()

      $(“#tabs li a.active”).removeClass “active” Nota: los () son opcionales .removeClass(“active”)

      $(@).addClass “active”

  $(“#tabs ul li a”).click changeTab

Si necesitamos utilizar this en Javascript, lo haremos así:

$(‘#confirm’).queue(function() {
   $(this).dequeue();
});

En CoffeeScript la palabra this la transformamos en @, por tanto $(this).dequeue(); se nos queda como $(@).dequeue():

$(“#confirm”).queue ->
  $(@).dequeue()

Algún ejemplo más para la forma Javascript:

function showNumberOfProducts(e) {
    var num_products = $(this).data(‘products’);
    $(this).append(“<span>” + num_products +“</span>”);
    $(“#tabs span.tooltip”).show();
}

En CoffeeScript:

showNumberOfProducts = (e) ->
  num_products = $(@).data ‘products
  $(@).append “<span>#{num_products}</span>
  $(“#tabs span.tooltip”).show()

Vemos algunos condicionales. Para los if si tenemos en Javascript los siguiente:

if (age < 18) { alert(‘Under age’); }

podemos dejarlo de la siguiente forma en CoffeeScript:

if age < 18 alert ‘Under age’

if age < 18 then alert ‘Under age’

alert ‘Under age’ if age < 18

Si tenemos más de una condición:

if (age < 18) {

    alert(‘Under age’); 

} else {

  alert(‘of age’);

}

en CoffeeScript podemos dejarlo de la siguiente forma:

if (age < 18) alert(‘Under age’) else alert(‘of age’)

Los operadores

Si necesitamos hacer una comparativa de igualdad en Javascript utilizamos el operador ===

if (one() && two() === true) {

   four();

}

lo podemos tranformar en CoffeeScript de la siguiente forma:

if one() and two() is on then four()

addFive() if not Six()

addFive() unless Six()

Switch

Para Javascript tenemos:

var message = (function() {

     switch (cupsOfCoffee) {

           case 0:

                  return ‘Asleep’;

           case 1:

                  return ‘Eyes Open’;

           case 2:

                  return ‘Buzzed’;

           default:

                  return ‘Dangerous’;

      }

})();

y la versión en CoffeeScript:

message = switch cupsOfCoffee

     when 0 then ‘Asleep’

     when 1 then ‘Eyes Open’

     when 2 then ‘Buzzed’

     else ‘Dangerous

Existential Operators

¿Cómo verificamos que una función no está definida y no es nulo? Lo haremos para la versión de Javascript:

if (typeof cupsOfCoffee !== “undefined” && cupsOfCoffee !== null) {

   alert(‘it exists!’);

}

Ahora lo pasamos a CoffeeScript, sería:

if cupsOfCoffee?  alert ‘it exists!’

alert ‘it exists!’ if cupsOfCoffee?

Podemos inicializar nuestra variable a 0 si no lo está aún.

if not cupsOfCoffee?cupsOfCoffee = 0

cupsOfCoffee = 0 unless cupsOfCoffee?

cupsOfCoffee ?= 0

También podemos utilizar para los casos sólo que exista:

if coffeePot?  coffeePot.brew()

coffeePot?.brew() 

vehicle.start_engine?().shift_gear?() 

Por ahora eso es todo, en el próximo post veremos más cosas de CoffeeScript interesantes, arrays, objetos y alguna cosa más de jQuery.

8 comentarios en “Antes de meterte en CoffeeScript, recomendable haber pasado por Javascript – Primera parte

  1. Erick muñoz dijo:

    Por los ejemplos que muestras no logro encontrar algún beneficio. Sólo separaste las declaraciones y asignaciones en los ejemplos de javascript y en los de coffescript no. Creo que tendré que profundirzar más en el tema para encontrar algún cambio importante a parte del cambio de sintaxis.

  2. NoMeConvenceNada dijo:

    Lo que le hace falta a javascript es más limpieza en las clases, un analizador de código que sea mínimamente estricto, recorra todos los .JS y te lleve a donde falten punto y comas, variables sin definir, etc… y un buen depurador… CoffeeScript no soluciona ninguna de estas carencias y para colmo le añade más descontrol… Y es un paso más para obtener un resultado peor que el que puedes hacer directamente…

    Por cierto, alguien conoce alguna herramienta con la que pasándole el index.html, analice todos los JS?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s