CoffeeScript: JavaScript "bien hecho"

Transparencias de mi taller sobre CoffeeScript en la Tenerife Lan Party 2012 ... espero que las disfruten :-)

Transcript

1. JavaScript “bien hecho” Yeray Darias CoffeeScript
2. ydarias@gmail.com @ydarias
3. Antes de CoffeeScript fue JavaScript Un poco de historia reciente
4. Finales del año 1994 ...
5. En el año 1995 ... Brendan Eich idea y programa 10Días Mocha en apenas
6. Mocha LiveScript JavaScript
7. Allá por el año 1997 ...
8. A principios del 2000 ... JavaScript tenía algunos amigos pero no era muy popular
9. En la actualidad ... JavaScript está en todas partes
10. Javascript
11. ¿Qué demonios es CoffeeScript? Pongamonos en situación
12. Es una idea que tuvo
13. “CoffeeScript it’s just JavaScript”
14. CoffeeScript es un lenguaje de programación que “genera” JavaScript
15. JavaScript WTFs
16. Douglas Crockford JavaScript The good parts
17. Global variables CoffeeScript solved!
18. var message = “hola”; function saluda() { return message; } var message = “adios”; function despidete() { return message; } Global variables Si ambos ficheros están “cargados”, ¿Cuál es la salida esperada en cada función?
19. Global variables CoffeeScript no crea variables globales de forma implícita (function() { var message, saluda; message = "hola"; saluda = function() { return message; }; }).call(this); message = "hola" saluda = () -> message
20. Scopes
21. Scopes Todas las variables en una función se declaran al principio (function() { var message, saluda; message = "hola"; saluda = function() { return message; }; }).call(this); message = "hola" saluda = () -> message
22. Semicolons CoffeeScript solved!
23. Semicolons CoffeeScript autocompleta los ; (function() { var message, saluda; message = "hola"; saluda = function() { return message; }; }).call(this); message = "hola" saluda = () -> message
24. Reserved words CoffeeScript solved!
25. Reserved words CoffeeScript escapa las palabras reservadas automáticamente var myObject; myObject = { "case": 'keyword', tutu: 'allowed name' }; myObject = case: 'keyword' tutu: 'allowed name'
26. typeof
27. Equality comparisons CoffeeScript solved!
28. Equality comparisons CoffeeScript siempre usa los operadores como ===, !==, ... var testFunction; testFunction = function(input) { if (input === 'string') { 'string'; } if (input === 9) { return 'number nine'; } }; testFunction = (input) -> if (input == 'string') 'string' if (input == 9) 'number nine'
29. eval()
30. continue
31. switch fall through CoffeeScript solved!
32. switch fall through Bond = (input) -> switch input when 'Sean Connery', 'Daniel Craig' 'Fucking crack' when 'Roger Moore' 'A bit boring'
33. switch fall through var Bond; Bond = function(input) { switch (input) { case 'Sean Connery': case 'Daniel Craig': return 'Fucking crack'; case 'Roger Moore': return 'A bit boring'; } }; Todas las opciones acaban con un return
34. CoffeeScript “fabrica” bloques JavaScript
35. Control de flujo mood = greatlyImproved if singing if happy and knowsIt clapsHands() else showIt() date = if friday then sue else jill isToday = yes unless yesterday or tomorrow // ----------------------------------------------------- cholesterol = 127 healthy = 200 > cholesterol > 60 Chained comparisons Everything a expression
36. Control de flujo Bond = (input) -> switch input when 'Sean Connery', 'Daniel Craig' 'Fucking crack' when 'Roger Moore' 'A bit boring' else 'No comments'
37. Bucles # Health conscious meal. foods = ['broccoli', 'spinach', 'chocolate'] eat food for food in foods when food isnt 'chocolate' countdown = (num for num in [10..1]) # Econ 101 if this.studyingEconomics buy() while supply > demand sell() until supply > demand while age < 18 canNotSmoke() canNotDrink()
38. Funciones square = (x) -> x * x cube = (x) -> square(x) * x fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..." // -------------------------------------------------- awardMedals = (first, second, others...) -> gold = first silver = second rest = others Splats String interpolation
39. Operators & aliases CoffeeScript JavaScript is === isnt !== not ! and && or || true, yes, on true false, no, off false @, this this of in in no JS equivalent
40. ‘The’ operator ? es el operador existencial en CoffeeScript
41. Clases class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45
42. Clases sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()
43. Function binding Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind 'click', (event) => @customer.purchase @cart var Account; Account = function(customer, cart) { var _this = this; this.customer = customer; this.cart = cart; return $('.shopping_cart').bind('click', function(event) { return _this.customer.purchase(_this.cart); }); };
44. Ahora toca programar