Presentación realizada para la asignatura de Aplicaciones y Servicios Web del curso 2013-2014 en la FIB-UPC. Introduce aspectos básicos del lenguage y muestra cuál sería el flujo de trabajo con CoffeeScript tanto en entornos "aislados"/"standalone" como trabajando con el framework Symfony2.

1. Simplificando JavaScript
UPC-FIB Curso 2013-2014
ASW grupo 13
Lucía Monte Soto
Javier Ferrer Gonzalez

2. Índice
●
●
●
●
●
●
●
●
¿Qué es?
Ejemplo
Flujo de trabajo (“standalone”)
Flujo de trabajo (Symfony2)
Pros/Contras
Vitalidad del proyecto
Conclusiones
Referencias

3. ¿Qué es?
● Capa por encima de JavaScript
○ Lenguaje creado para simplificar JavaScript.
○ El código en CoffeeScript se compila y genera
JavaScript.
○ No penaliza rendimiento (no interpreta en tiempo de
ejecución)
CoffeeScript
Compilador
CoffeeScript
JavaScript

4. Ejemplo
CoffeeScript (PasteBin):

5. Ejemplo
JavaScript (PasteBin):

6. Flujo de trabajo (“standalone”)
Instalación
1. Instalar Homebrew (Mac OS)
○ Entra en conflicto con Macports
○ No se ejecuta como sudo
○ Necesita permisos totales del usuario
actual en /usr/local
2. Instalar Node.js (Mac OS)
○
brew install node
3. Instalar CoffeeScript vía npm
○
npm install -g http://github.com/jashkenas/coffee-script/tarball/master
i.
/usr/local/bin/coffee -> /usr/local/lib/node_modules/coffeescript/bin/coffee
ii.
/usr/local/bin/cake -> /usr/local/lib/node_modules/coffee-script/bin/cake

7. Flujo de trabajo (“standalone”)
Compilación
A. Única compilación de todo *.coffee dentro de
coffeescripts/ a javascripts/
○
coffee -o javascripts/ -c coffeescripts/
B. Añadir watcher
○
coffee -w -o javascripts/ -c coffeescripts/
C. Unificar varios .coffee en 1 único .js
○
coffee -j javascripts/app.js -c coffeescripts/*.coffee

8. Flujo de trabajo (Symfony2)
Instalación
1. Añadir a
composer.json
el paquete
2. Modificar config.yml
(gestión assetic)

9. Flujo de trabajo (Symfony2)
Desarrollo y compilación
3. Inclusión asset en plantilla twig
4. Compilación assetic
php app/console assetic:dump

10. Pros y contras
● Pros
○ Al compilar se unan patrones JavaScript, haciéndolo
más rápido y usando menos código.
○ Código más legible.
● Contras
○ Los mensajes de compilación poco explícitos.
○ No hay relación directa entre el código CS y el JS
generado al compilar (depuración).
○ Adaptación a un nuevo lenguaje.
○ Migrar código JS existente a CS

11. Vitalidad del proyecto
● GitHub
○
○
○
○
3499 Commits (último mes: 16 de 11 autores)
2924 Issues cerrados (último mes: 23)
54 Releases
125 Contributors
● Real World™:
○ Posterous
○ Airbnb Mobile
○ Basecamp Mobile
○ https://github.com/jashkenas/coffee-script/wiki/In-TheWild
●
24/12/2009 versión 0.1 (actual: 1.6.3)

12. Conclusiones
● JavaScript ya no es sólo para listeners de
eventos “tontos” ni efectos webs old school.
● Pre-procesadores ayudan
● Código más simple y legible
● “Nuevo” lenguaje
● Fuerte contra en debug
● Mapeo “débil” frente a AngularJS/Knockout

13. Referencias
● Web oficial: http://coffeescript.org/
● GitHub: https://github.com/jashkenas/coffee-script
● Migraciones de JS a CS: http://js2coffee.org/
● Libro CoffeeScript: Accelerated JavaScript
Development: http://pragprog.
com/book/tbcoffee/coffeescript