Seamos realistas, JavaScript no siempre ha tenido la mejor reputación entre los desarrolladores, y desde la fundación de CoffeeScript en 2009, este pequeño lenguaje ha tomado al mundo de los desarrolladores de JavaScript por sorpresa; principalmente porque supera lo que algunos pueden decir que es el peor aspecto de JavaScript: la sintaxis de su código.
Aunque este es un idioma nuevo, lo aprenderás muy rápido, principalmente porque se trata de JavaScript reformulado; es esencialmente más bonito, JavaScript más simple.
Cuando escriba CoffeeScript, recuerde que está escribiendo código que antes de implementarse se compilará en JavaScript siguiendo las mejores prácticas y pasará la prueba JSLint, por lo que es una cosa menos de la que debe preocuparse. El resultado seguirá siendo JavaScript válido que el navegador no tendrá problemas para leer. CoffeeScript es para JavaScript lo que SASS es para CSS: una forma de escribir código más simple y productivo.
CoffeeScript es una utilidad node.js, por lo que para instalarlo, debe tener node.js instalado así como también el administrador de paquetes del nodo. Suponiendo que haya instalado estos dos paquetes, todo lo que necesita hacer es ir a su terminal e instalar CoffeeScript con el administrador de paquetes usando el código:
npm install -g coffee-scriptSolo con eso tienes CoffeeScript instalado en tu máquina. Para compilar un archivo .coffee en un archivo JavaScript, debe escribir:
coffee --compile script.coffeeEsto compilará el archivo script.coffee en script.js en el mismo directorio, pero solo lo hará cuando ejecute el comando, si desea que se compile en cada cambio que realice en el archivo de café, debe agregar el -watch antes la compilación:
coffee --watch --compile script.coffeeCon esto añadido, su JavaScript se compilará cada vez que realice un cambio en su archivo .coffee.
Al escribir una variable de JavaScript, tenemos que anteponer la palabra clave var, con CoffeeScript, esa palabra clave ya no está y usted puede simplemente escribir la variable y asignarla a algo. Otra cosa a tener en cuenta es que CoffeeScript utiliza una gran cantidad de métodos de indentación para evitar puntos y comas, y para que el lenguaje entienda que la declaración de la variable está completa, solo tiene que pasar a una nueva línea:
age = 21country = "Portugal"En JavaScript, debe escribir algo como:
var age = 21;var country = "Portugal";Es un pequeño ejemplo, pero puede comenzar a ver cuán poderoso es CoffeeScript cuando se trata de simplificar su código.
¿Recuerdas todo el tiempo que pasaste memorizando operadores de JavaScript? ¿Recuerda preguntarse por qué tenía que usar === en lugar de solo usar is? Well CoffeeScript también se ocupa de eso. Ofrece algunos alias realmente agradables para los operadores:
Otra cosa de la que CoffeeScript se deshace son las llaves. Utiliza el método de sangrado para declarar cuándo estás dentro de un enunciado, si las sentencias funcionan como JavaScript pero no necesitas las llaves ni los paréntesis; simplemente sangría el código que desea ejecutar cuando la declaración es verdadera:
if work > 24 and sleep < 8vacations()elsework()compilará en JavaScript como:
if (work > 24 && sleep < 8) {vacations();} else {work();}Espero que comiences a ver los beneficios de CoffeeScript solo con estas simples demostraciones de cuán limpio puede hacer tu código, y un código más limpio significa un código más fácil de mantener.
Looping través de matrices es una de las cosas que está obligado a hacer en cada aplicación de JavaScript que escribe y la sintaxis para recorrerlos en JavaScript no es la más simple o la más limpia, creo que aquí es donde CoffeeScript realmente brilla. Para recorrer una matriz, usamos un bucle for..in, así:
tasks = ['Design','Code','Groceries']for task in tasksalert taskTodo lo que hará este código es leer todas las cosas en la matriz y luego alertar una a una, solo para hacer las cosas aún más simples, puedes escribir el ... en el bucle en una línea, así:
tasks = ['Design','Code','Groceries']alert task for task in tasksSimplemente es mucho más legible y mantenible que el JavaScript vanidoso, hablando de que el código producido por CoffeeScript para esas dos líneas sería:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Mientras que los bucles también son muy útiles al construir su aplicación de JavaScript y CoffeeScript no deja de facilitar su lectura y escritura, por ejemplo:
while sleep < 8sleep()O puede escribirlo todo en una línea si lo prefiere:
while sleep < 8 then sleep()O:
sleep() until sleep > 8En JavaScript puro esto se traduciría en:
//thenwhile (sleep < 8) {sleep();}O:
//untilwhile (!(sleep > 8)) {sleep();}Las funciones también son otra parte vital de cualquier lenguaje de programación y aunque las funciones en JavaScript no son tan complicadas como en otras partes, CoffeeScript simplifica esto al máximo también, una función simple que toma el nombre de alguien y luego alerta puede escribirse así :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Todo lo que hace es nombrar la función, en este caso las funciones se llaman sayHi, y luego después del signo igual necesita especificar los parámetros. Aquí el nombre es el parámetro único, después de que se defina la base de nuestra función necesitamos escribir -> seguido en la línea siguiente por lo que queremos que la función haga para que CoffeeScript sepa que estamos dentro de la función. En este caso, lo único que quiero es devolver "Hola" y luego el nombre de la persona y, por último, uso una alerta simple para llamar a la función con el nombre. También podemos escribir esto en una línea eliminando el enter y el sangrado simplemente escribiendo lo que la función hará después de ->:
sayHi = (name) -> return "Hello " + nameEste pequeño fragmento de código se compilará en el siguiente JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Por supuesto, esta fue una función muy simple, pero como puede ver, nos ahorró 3 líneas de código y, por supuesto, en el JavaScript podríamos simplemente nombrar la variable, ya que declaramos la función como sigue:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Los ejemplos que he dado aquí son a lo que CoffeeScript compila y aunque en la mayoría de los casos hay formas más fáciles de escribir algo, todo el JavaScript compilado es válido y semántico.
Esto es solo el comienzo de lo que CoffeeScript puede proporcionarle, cuando las cosas comienzan a ser más complejas, este pequeño lenguaje le dará mucha ventaja en comparación con JavaScript, menos código que necesite para escribir, más código legible y más fácil de mantener. , para que puedas volver a un sitio web un año después y saber qué está pasando en ese JavaScript.
Estén atentos para la segunda parte de esta serie en la que les mostraré cómo combinar CoffeeScript con jQuery y LocalStorage para crear una aplicación de lista de contactos simple.
¿Has usado CoffeeScript para simplificar JavaScript? ¿Qué partes de CoffeeScript prefieres para Javascript? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de café a través de Shutterstock.