Introducción a CoffeeScript

Una introducción a CoffeeScript como lenguaje para sustituir / complementar JavaScript, el lenguaje, los puntos débiles/fuertes y las razones que hacen que lo prefiera a JavaScript.

-Más info en:
http://coffeescript.org/
http://coffeescriptcookbook.com/
http://js2coffee.org/

-Vídeos para aprender
http://vimeo.com/album/2096740/video/50595944
https://www.youtube.com/watch?v=fvsKkwbhfs8
https://www.youtube.com/watch?v=43P0kWswWWI

Transcript

1. Introducción a @josecgil
2. ¿Qué es ?
3. Descripción de coffeescript.org [...] es un pequeño lenguaje que se compila en JS [...] JS siempre ha tenido un corazón precioso, CoffeeScript es un intento de exponer las partes buenas [...] de una manera sencilla. La regla de oro de CoffeeScript es: "Sólo es JS". El código se compila uno-a-uno en el equivalente JS, no hay interpretación en tiempo de ejecución. Se puede utilizar cualquier biblioteca JS existente sin problemas desde CoffeeScript (y viceversa). El resultado [...] funcionará en cualquier runtime de JS, y tiende a correr tan rápido o más que el equivalente escrito a mano.
4. Jeremy Ashkenas
5. Una pequeña taza de
6. 3 Razones por las que adoro
7. 1. Sintaxis Revela mejor la intención del programador. Es JS, pero con sintaxis mejorada. Es más legible, expresivo, conciso y limpio. for authorName in ["Kent Beck", "Martin Fowler"] alert "Author: #{authorName}" var authorNames = ["Kent Beck", "Martin Fowler"]; for (var i = 0, i < authorNames.length; i ++) { alert("Author: “+ authorNames[i]); }
8. 2. Privado por defecto Toda variable se declara con var color=”red" var color = “red” Todo el código está siempre dentro de una función
9. 3. Sólo genera código “JSLinted”
10. La sintaxis de
11. Declaración variables sin var CoffeeScript showMessage=true; JavaScript var showMessage=true;
12. No es necesario el ";" final CoffeeScript showMessage=true JavaScript var showMessage=true;
13. No hay llaves, la indentación importa CoffeeScript showMessage=true if (showMessage) console.log ("hola mundo") JavaScript var showMessage=true; if (showMessage) { console.log ("hola mundo"); }
14. Paréntesis son opcionales (I) CoffeeScript showMessage=true if showMessage alert "hola mundo" JavaScript var showMessage=true; if (showMessage) { alert("hola mundo"); }
15. Comentarios CoffeeScript #showMessage=true ### if showMessage alert("hola mundo") ### JavaScript //var showMessage=true; /*if (showMessage) { alert ("hola mundo"); }*/
16. Declarar y llamar a una función CoffeScript saludo = -> alert("Hola Mundo!") #puede ponerse en una sóla línea saludo = -> alert("Hola Mundo!") JavaScript var saludo = function() { alert("Hola Mundo!"); }; saludo();
17. Pasar parámetros a funciones saludo("Hola") saludo “Hola” total=sum(1, 2) total=sum 1, 2
18. Valores por defecto saludo = (mensaje="Hola") -> alert(mensaje) saludo() es equivalente a: saludo("Hola")
19. Valor de return implícito (I) El resultado de la última sentencia evaluada en una función es el valor de retorno sum = (a, b) -> return a + b es equivalente a: sum = (a, b) -> sum = (a, b) -> a + b a + b
20. Valor de return implícito (II) Si hay que retornar un valor antes del final de la función, hay que indicarlo con return esPar = (numero) -> if numero % 2 == 0 then return true false alert(esPar(2))
21. En la llamada a funciones, los paréntesis son opcionales (si la fn tiene parámetros): saludo= (nombre) -> alert("Hola" + nombre) la sentencia saludo("Paco") es equivalente a: saludo "Paco" Paréntesis son opcionales (II)
22. Diferentes maneras de hacer un if #if en una sóla línea if temp < 10 then cold=true #postfix if cold=true if temp < 10 if temp < 10 then cold=true else cold=false #equivale a cold = temp<10 ? true; false; #multilinea if temp<10 cold=true else cold=false
23. Alias de operadores (I) winner = yes if number in [47, 92, 13] launch() if ignition is on volume = 5 if band isnt "Genesis"
24. Alias de operadores (II) if a === 1 then ... es igual a if a is 1 then ... if a !==1 then ... es igual a if a isnt 1 then ... if hasError==false then ... es igual a if hasError is off then ... if hasError is no then ... if (!isValid) then ... es igual a if not isValid then ... if a==1 && b==2 then ... es igual a if a is 1 and b is 2 then ... if a==1 || b==2 then ... es igual a if a is 1 or b is 2 then ...
25. Switch switch dia when "Vie" irATrabajar() salirATomarAlgo() when "Sab" then salirDeMarcha() when "Dom" then relax() else irATrabajar()
26. Rangos list = [ 1, 2, 3, 4, 5 ] es igual a list = [1..5] inverseList = [ 5, 4, 3, 2, 1 ] es igual a inverseList= [5..1] #selección de elementos twoToFive=list[1..4] es igual a twoToFive=list[1..] list = [ "A", "B", "C" ] BtoC = list [1..] #cambiar el 2º y 3er elem list[1..2]=[ "b" , "c" ]
27. Bucles #iterar sobre arrays sum=0 list = [1..10] for num in list sum=sum+num sum=0 for num in [1..10] sum=sum+num #incrementa 2 cada paso for num in [1..10] by 2 alert num #iterar sobre diccionarios clients= 1 : "Carlos", 2 : "Laura" for code, name of clients alert(code + "->" + name)
28. Bucles (II) #iterar de forma condicional foods= ['brocoli', 'espinaca', 'chocolate'] for food in foods when food isnt 'chocolate' alert food #un bucle for es también una expresión y puede ser #asignado a otra lista shortNames = (shortName for name in list when name. length < 5) evenCountDown = (x for x in [0..10] by 2)
29. Bucles (III) #until es equivalente a while not num = 0 until num is 10 num++ alert num #loop es equivalente a while true num=0 loop num++ alert num break if num is 10
30. Interpolación de strings saludo = (persona) -> alert "Hola " + persona es equivalente a: saludo = (persona) -> alert "Hola #{persona}"
31. Operador existencial (I) El operador ? devuelve true si una expresión no es null o undefined #true si el objeto promoción tiene valor hasPromotion= true if promotion? #logLevel 10 si hay mensajes de warning y #el objeto logger tiene valor logLevel=10 if warnMessage? and logger?
32. Operador existencial (II) El operador ? puede usarse también para poner valores por defecto. maxVelocity=limitVelocity ? 100 equivale a: maxVelocity=100 maxVelocity=limiVelocity if limitVelocity?
33. Operador existencial (III) Otro uso del operador ? es encadenar llamadas a métodos de objetos que pueden ser null o undefined. saludo=null alert saludo.indexOf("a") Da una excepción "TypeError", pero: saludo=null alert saludo?.indexOf("a") Devuelve undefined
34. Crear una clase class Saludo hola: -> alert "Ola K Ase" saludo= new Saludo() saludo.hola()
35. Constructor (I) class Client constructor:(id) -> @id=id print: -> alert "Soy el cliente con id " + @id client1 = new Client 1 client1.print()
36. Crear propiedades desde los params #Estas dos maneras son equivalentes class Client constructor:(@id) -> class Client constructor:(id) -> @id=id
37. Crear un método de clase class Client constructor: (id) -> @id=id print: -> alert "Soy el cliente con id " + @id @createFromId: (id) -> new Client(id) client1 = Client.createFromId(1) client1.print()
38. Crear una variable de clase class Client constructor: (id) -> @id=id print: -> alert "Soy el cliente con id " + @id @INVALID_ID:-1 y luego podemos usarlo de la siguiente manera: alert Client.INVALID_ID
39. Herencia class Animal constructor: (@nombre) -> mover: (metros) -> alert @nombre + " se ha movido #{metros} metros." class Serpiente extends Animal mover: -> alert "Serpenteando..." super 5 slytherin= new Serpiente "Slytherin" slytherin.mover()
40. jQuery CoffeeScript $(document).ready -> $("#show").click (event) -> event.preventDefault() $("#box").show "slow" JavaScript $(document).ready(function() { $("#show").click(function(event) { event.preventDefault(); $("#box").show("slow"); }); });
41. Function binding class Account constructor: (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').click => @customer.purchase @cart class Account constructor: (@customer, @cart) -> $('.shopping_cart').click => @customer.purchase @cart
42. Exportar una clase al objeto global #Añadir @ delante del nombre de la clase exporta #la clase al objeto global (window en caso de navegador) class @Client constructor:(id) -> @id=id print: -> alert "Soy el cliente con id " + @id es equivalente (en JavaScript) a: window.Client=Client;
43. Insertar código JavaScript Es posible insertar partes de código JS en un fichero CoffeeScript usando "`": #Empieza JavaScript `function saludar(nombre) { alert("Hola "+nombre); }` # Vuelta a CoffeeScript saludar "Mundo"
44. Extender un objeto existente Añadir métodos a clases: if String::trim is null String::trim = -> @replace /^\s+|\s+$/g saludo=" hola mundo " saludo=saludo.trim() alert "<#{saludo}>"
45. ¿Otra taza de ?
46. ¿Y la parte mala?
47. No existen métodos privados Pero hemos creado una convención: los métodos / variables "privados" empiezan por "_". class @Client constructor:(id) -> @id=id _getSecretInfo -> "Secret Info" print: -> alert "Soy el cliente con id " + @id
48. Espaciado o Tabulación importa Tardas un tiempo en acostumbrarte. No se pueden mezclar espacios y tabulaciones en el mismo fichero
49. Pequeños inconvenientes Debug: ficheros .map Poco soporte de IDEs
50. Referencias Web oficial de CoffeeScript CoffeeScript CookBook Convertidor de JavaScript a CoffeeScript Vídeo introductorio en castellano Vídeo introductorio en inglés Vídeo introductorio en inglés (continuación)
51. Gracias por la atención