Introducción a CoffeeScript

Plática para el FSL en Puerto Vallarta México 2012

Transcript

1. Foto: Cuppa de Lee Shelly http://500px.com/photo/5933592 CoffeeScript Un javascript mejorado !
2. Soy Mario A Chávez Ingeniero de Software en Crowd Interactive @mario_chavez
3. Historia de JavaScript
4. Presentado en 1995 por Netscape sintaxis influenciada por C enfocado al lado del cliente y servidor(1994) estandarizado por ECMAScript popular y utilizado en todos los navegadores (1996)
5. Características de JavaScript
6. Lenguaje de script basado en prototipos dinámico y relajado en tipos orientado a objetos*, imperativo y funcional sintaxis llena de (), {} y ; un slot del prototipo puede contener datos y código saltó fuera del navegador
8. “Programo jQuery ... $(‘#id’).show(); $(‘#id’).hide(); ... soy programador de Javascript!”
9. Foto: http://www.flickr.com/photos/nathansmith/4704268314/sizes/l/in/photostream/
10. JavaScript odiado y amado
11. CoffeScript
12. Historia de CoffeScript
13. Jeremy Ashkenas (2009)
14. Originalmente escrito en Ruby
15. CoffeeScript compila CoffeScript (a partir de la versión 0.5)
16. ¿Qué es CoffeScript ?
17. Es solo Javascript ... (las partes buenas)
18. Agrega “Syntactic Sugar “ Foto: http://pragprog.com/magazines/2011-12/extending-java
19. Remueve la “Decoración“
20. podemos usar librerías de Javascript (uff podemos usar jQuery) Foto: http://www.tumblr.com/tagged/googiefaces
21. CoffeScript no se puede ejecutar
22. CoffeScript produce Javascript válido y bien formateado Foto: http://www.ehow.com/list_6878767_forms-acceptance-real-estate-transaction.html
23. Ejemplos
24. Funciones square = (x) -> x * x square = function(x){ return x * x; }
25. Funciones square = (x = 0) -> x * x square = function(x){ if (x == null) { x = 0; } return x * x; }
26. Funciones names = ['mario', 'edwin', 'paul'] presenters = (first, others...) -> first presenters names... var names, presenters, __slice = [].slice; names = ['mario', 'edwin', 'paul']; presenters = function() { var first, others; first = arguments[0], others = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return first; }; presenters.apply(null, names);
27. Funciones names = ['mario', 'edwin', 'paul'] presenters = (first, others...) -> [first, others] [current, next] = presenters(names...) current var current, names, next, presenters, _ref, __slice = [].slice; names = ['mario', 'edwin', 'paul']; presenters = function() { var first, others; first = arguments[0], others = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return [first, others]; }; _ref = presenters.apply(null, names), current = _ref[0], next = _ref[1]; current;
28. Sintaxis thursday = true alert ‘Jueves’ if thursday day = 4 alert ‘Jueves’ if day is 4 var thursday = true; if (thursday) { alert('Jueves'); } var day = 4; if (day === 4) { alert('Jueves'); }
29. Sintaxis thursday = true alert if thursday then 'Jueves' else 'Otro dia' alert 'Otro dia' unless thursday alert 'Jueves' if today? var thursday = true; alert(thursday ? 'Jueves' : 'Otro dia'); if (!thursday) { alert('Otro dia'); } if (typeof today !== "undefined" && today ! == null) { alert('Jueves'); }
30. Ciclos numbers = (num for num in [1..10]) var numbers = (function() { var _i, _results; _results = []; for (num = _i = 1; _i <= 10; num = ++_i) { _results.push(num); } return _results; })();
31. Comprehensions numbers = (num for num in [1..10]) odds = (number for number in numbers when number%2 isnt 0) odds var num, number, numbers, odds; odds = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = numbers.length; _i < _len; _i+ +) { number = numbers[_i]; if (number % 2 !== 0) { _results.push(number); } } return _results; })(); odds;
32. Objetos presenters = mario: 1 edwin: 2 paul: 2 day: (name) -> @[name] presenters.day 'edwin' var presenters; presenters = { mario: 1, edwin: 2, paul: 2, day: function(name) { return this[name]; } }; presenters.day('edwin');
33. For each presenters = mario: 1 edwin: 2 paul: 2 present = for name, day of presenters "#{name} presenta el dia #{day}" var day, name, present, presenters; present = (function() { var _results; _results = []; for (name in presenters) { day = presenters[name]; _results.push("" + name + " presenta el dia " + day); } return _results; })();
34. Clases class Vehicle constructor: (@name) -> maxSpeed: -> "no speed for #{@name}" class Car extends Vehicle maxSpeed: -> "210 k/h for #{@name}" class Airplane extends Vehicle maxSpeed: -> "885 k/h for #{@name}" car = new Car 'My car' airplane = new Airplane 'My plane' car.maxSpeed() airplane.maxSpeed()
35. Clases var Airplane, Car, Vehicle, airplane, car, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Vehicle = (function() { function Vehicle(name) { this.name = name; } Vehicle.prototype.maxSpeed = function() { return "no speed for " + this.name; }; return Vehicle; })(); Car = (function(_super) { __extends(Car, _super); function Car() { return Car.__super__.constructor.apply(this, arguments); } Car.prototype.maxSpeed = function() { return "210 k/h for " + this.name; }; return Car; })(Vehicle);
36. Pero esto no es todo (recursos al final)
37. Puedes programar con CoffeeScript en node.js
38. { } } { { { } } } }{ { { }{ } } _____ __ __ ( }{ }{ { ) / ____| / _|/ _| .- { { } { }} -. | | ___ | |_| |_ ___ ___ ( ( } { } { } } ) | | / _ \| _| _/ _ \/ _ \ |`-..________ ..-'| | |___| (_) | | | || __/ __/ | | \_____\___/|_| |_| \___|\___| | ;--. | (__ \ _____ _ _ | | ) ) / ____| (_) | | | |/ / | (___ ___ _ __ _ _ __ | |_ | ( / \___ \ / __| '__| | '_ \| __| | |/ ____) | (__| | | | |_) | |_ | | |_____/ \___|_| |_| .__/ \__| `-.._________..-' | | |_| Es Open Source
39. { } } { { { } } } }{ { { }{ } } _____ __ __ ( }{ }{ { ) / ____| / _|/ _| .- { { } { }} -. | | ___ | |_| |_ ___ ___ ( ( } { } { } } ) | | / _ \| _| _/ _ \/ _ \ |`-..________ ..-'| | |___| (_) | | | || __/ __/ | | \_____\___/|_| |_| \___|\___| | ;--. | (__ \ _____ _ _ | | ) ) / ____| (_) | | | |/ / | (___ ___ _ __ _ _ __ | |_ | ( / \___ \ / __| '__| | '_ \| __| | |/ ____) | (__| | | | |_) | |_ | | |_____/ \___|_| |_| .__/ \__| `-.._________..-' | | |_| Es Open Source
40. Github: https://github.com/jashkenas/ coffee-script CoffeeScript: http://coffeescript.org/ js2cs: http://js2coffee.org/ CoffeeScript Little book: http:// arcturo.github.com/library/ coffeescript/
41. Mario A Chávez Ingeniero de Software en Crowd Interactive @mario_chavez Gracias!