El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Conoce y trabaja con CoffeeScript

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
06:55
  Añadir a marcadores

Transcripción

Así como existe SASS o LESS para generar CSS de una manera más sencilla y organizada, también hay una alternativa muy interesante en CoffeeScript. Si lo tuyo es escribir código rápido, pero sin perder ninguna de las características de JavaScript, entonces te lo recomiendo para su uso. CoffeeScript es un pequeño lenguaje que ya lleva unos cuantos años en el mercado y que ha resultado muy efectivo por aplicar su regla de oro, "Esto es solo JavaScript". Si bien, es verdad, la sintaxis de CoffeeScript es parcialmente diferente a JavaScript, nos permite mantener la semántica de la misma. Si comienzas a usarlo podrás preguntarte ¿qué pasa si uso entonces un framework de javascript como Angular? ¿Al cambiar la sintaxis entonces ya no puedo utilizarlos? La respuesta es sí, sí podrás usarlos, este y otros frameworks que desees, pues al final de cuentas es solo JavaScript y solo cambia la forma en cómo se abstraen y escriben determinados conceptos. Tan popular es CoffeeScript que para el caso de su uso con Angular se ha generado hasta una guía de estilos basados en los estilos de John Papa para Angular, pero integrados con CoffeeScript. Juguemos un poco con este estilo. Lo primero que hay que hacer es entrar al sitio de coffeescript.org y leer un poco acerca de lo que se trata, revisar un poco de la sintaxis que obviamente cambia y poder revisar estos ejemplos. Pero para entrar en materia, vamos a hacer el proceso de instalación de una manera rápida. Para poder hacerlo hay que ejecutar este comando, que es npm install -g, que significa que va a estar global y el nombre del paquete. Cuando le damos instalar, hace todo el proceso que realmente es algo bastante rápido, porque no es algo tan complicado y después de esto comenzar a trabajar en nuestro proyecto. Al igual que otros preprocesadores como SASS o LESS, por ejemplo, trabajar con CoffeeScript requiere de su propia extensión. En este caso una extensión llamada .coffee y para poder tener una mejor organización la vamos a colocar dentro de la carpeta javascript en una subcarpeta llamada src o sources y después tendremos una carpeta llamada lib donde estaremos arrojando todo lo que se compile. De hecho si tú revisas el archivo index.html podrás darte cuenta que la librería apunta a esa carpeta. Por ahora vamos a cerrar el archivo index.html y vamos a hacer el primer archivo de compilación de CoffeeScript. Para esto, vamos de regreso a la línea de comandos y nos ubicamos en la carpeta donde estamos trabajando. En este caso, yo estoy trabajando en un proyecto llamado coffeScript y vamos a verificar que aquí estamos con los archivos con los cuales debemos trabajar. Para poder ejecutar el primer comando, vamos a ejecutar coffee y vamos a escribir --watch eso significa que va a estar revisando y escuchando todos los cambios que suceden al archivo .coffee. Cuando escuche los cambios o que algo nuevo sucede va a compilar y va a arrojar a una salida, que nosotros vamos a indicar, es decir, el archivo compilado lo va a guardar en algún lado. El primer argumento que tienes que enviar es el lugar a dónde va a llegar, es decir, el destino, que el destino será dentro de la carpeta js/lib y el último parámetro que tienes que enviar es de dónde va a tomar las cosas. En este caso js/src/*. Con el * estamos indicando que va a evaluar todo lo que se encuentre en esa carpeta, por tanto, si tienes varios archivos .coffee, son los que va a evaluar. Damos Enter y esto levanta un proceso que se queda al pendiente y, de la misma manera, genera de una primera vez la compilación. Regresamos a nuestros archivos y podemos ver cómo ya existe este llamado app.js dentro de lib y aquí vamos a desplegar nuestra pantalla en dos columnas para poder ir viendo los cambios. Por ejemplo, una de las maneras en las que puede cambiar la sintaxis es cuando escribimos una alerta. En este caso, yo puedo escribir la alerta directamente sin necesidad de poner los paréntesis. Vamos a escribir aquí "Hola mundo". También aquí no son necesarios tener los puntos y comas. Así que guardamos y una vez que guardamos, vemos cómo de lado derecho automáticamente se generó un archivo de JavaScript y agregó lo que nosotros estábamos trabajando y lo agregó, obviamente, en JavaScript. También nosotros podemos hacer varias cosas, por ejemplo, podemos crear variables y para este caso, vamos a crear una variable llamada number y vamos a asignarle un valor de 10. Guardo y una vez que guardo se genera y veamos cómo se genera de este lado con la palabra reservada var y después hace la asignación. Incluso, si tú trabajas con valores booleanos, por ejemplo, vamos a poner una variable que se llame activo = true aquí nosotros podemos ver cómo se crea igual la variable siguiendo el concepto y hace la asignación. También las estructuras de control son algo muy interesante. Vamos a escribir, por ejemplo, aquí una condición y vamos a escribir lo siguiente. Vamos a asignar el valor de número a 10 y es más, vamos a cambiar el valor, vamos a poner que el valor sea 5, para que así nosotros podamos revisar si va a hacer esta asignación siempre y cuando esté activo, es decir, el valor sea true. Entonces, guardamos y vamos a ejecutar este comando. Por aquí recibimos una alerta como tal de esto y nos está indicando que aquí tenemos nosotros un cierto error. Vamos a verificarlo. Regresamos a nuestro código y lo que vemos es que nuestro editor nos dio un salto de línea. Entonces aquí simplemente vamos a guardar y creo que tendré que desactivar esta opción. Así que vamos rápidamente a desactivar este beautify que me está arreglando el código para que no tengamos ningún problema. Para hacer esto rápidamente voy acceder a Code Preferences User settings y desde aquí voy a desactivar este beautify onSave a false que eso es un configuración completamente de este sistema. Entonces, ya una vez que tengo esto, vamos a cerrar. Cerramos nuevamente y aquí vamos a regresar a nuestro estado original. Asi cuando guarde, ya no se está activando tal cual y podemos verificar que se ha compilado adecuadamente nuestro código. Y ahora sí, vamos a poder verificar cómo aquí se crea la condición. De la misma manera puedes trabajar con funciones, puedes trabajar con objetos y puedes trabajar con toda la estructura que te ofrece CoffeeScript. Como ves, es una manera más simple de trabajar y hasta un cierto punto más intuitiva. Te recomiendo que la revises, la analices y después puedas trabajar con él. Incluso en el sitio de coffeescript.org podrás encontrar que existe una consola donde puedes entrar y escribir tu código inmediatamente para probar cómo se puede ver. Solo recuerda, no olvides que siempre tienes que compilar el archivo app.js, pues los navegadores web leen e interpretan solamente estos archivos y no los archivos .coffee.