Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Simplificando JavaScript

UPC-FIB Curso 2013-2014
ASW grupo 13

Lucía Monte Soto
Javier Ferrer Gonzalez
Índice
●
●
●
●
●
●
●
●

¿Qué es?
Ejemplo
Flujo de trabajo (“standalone”)
Flujo de trabajo (Symfony2)
Pros/Contras
Vitalida...
¿Qué es?
● Capa por encima de JavaScript
○ Lenguaje creado para simplificar JavaScript.
○ El código en CoffeeScript se com...
Ejemplo
CoffeeScript (PasteBin):
Ejemplo
JavaScript (PasteBin):
Flujo de trabajo (“standalone”)
Instalación
1. Instalar Homebrew (Mac OS)
○ Entra en conflicto con Macports
○ No se ejecut...
Flujo de trabajo (“standalone”)
Compilación
A. Única compilación de todo *.coffee dentro de
coffeescripts/ a javascripts/
...
Flujo de trabajo (Symfony2)
Instalación
1. Añadir a
composer.json
el paquete

2. Modificar config.yml
(gestión assetic)
Flujo de trabajo (Symfony2)
Desarrollo y compilación
3. Inclusión asset en plantilla twig

4. Compilación assetic
php app/...
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...
Vitalidad del proyecto
● GitHub
○
○
○
○

3499 Commits (último mes: 16 de 11 autores)
2924 Issues cerrados (último mes: 23)...
Conclusiones
● JavaScript ya no es sólo para listeners de
eventos “tontos” ni efectos webs old school.
● Pre-procesadores ...
Referencias
● Web oficial: http://coffeescript.org/
● GitHub: https://github.com/jashkenas/coffee-script
● Migraciones de ...
Upcoming SlideShare
Loading in …5
×

Introducción a CoffeeScript

793 views

Published on

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.

Published in: Technology
  • Be the first to comment

Introducción a CoffeeScript

  1. 1. Simplificando JavaScript UPC-FIB Curso 2013-2014 ASW grupo 13 Lucía Monte Soto Javier Ferrer Gonzalez
  2. 2. Índice ● ● ● ● ● ● ● ● ¿Qué es? Ejemplo Flujo de trabajo (“standalone”) Flujo de trabajo (Symfony2) Pros/Contras Vitalidad del proyecto Conclusiones Referencias
  3. 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. 4. Ejemplo CoffeeScript (PasteBin):
  5. 5. Ejemplo JavaScript (PasteBin):
  6. 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. 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. 8. Flujo de trabajo (Symfony2) Instalación 1. Añadir a composer.json el paquete 2. Modificar config.yml (gestión assetic)
  9. 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. 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. 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. 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. 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

×