Simplificando JavaScript

Lucía Monte SotoJavier Ferrer Gonzalez

UPC-FIB Curso 2013-2014ASW grupo 13

Índice

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

¿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 JavaScriptCompilador CoffeeScript

Ejemplo

CoffeeScript (PasteBin):

Ejemplo

JavaScript (PasteBin):

Flujo de trabajo (“standalone”)

Instalación1. Instalar Homebrew (Mac OS)

○ Entra en conflicto con Macports○ No se ejecuta como sudo○ Necesita permisos totales del usuario

actual en /usr/local2. 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/coffee-script/bin/coffee

ii. /usr/local/bin/cake -> /usr/local/lib/node_modules/coffee-script/bin/cake

CompilaciónA. Ú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

Flujo de trabajo (“standalone”)

Instalación1. Añadir a

composer.json el paquete

2. Modificar config.yml(gestión assetic)

Flujo de trabajo (Symfony2)

Desarrollo y compilación3. Inclusión asset en plantilla twig

4. Compilación asseticphp app/console assetic:dump

Flujo de trabajo (Symfony2)

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

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-The-

Wild● 24/12/2009 versión 0.1 (actual: 1.6.3)

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

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