Tweet
Tweet

Slide 1

Slide 1 text

JavaScript “bien hecho” Yeray Darias CoffeeScript

Slide 2

Slide 2 text

[email protected] @ydarias

Slide 3

Slide 3 text

Antes de CoffeeScript fue JavaScript Un poco de historia reciente

Slide 4

Slide 4 text

Finales del año 1994 ...

Slide 5

Slide 5 text

En el año 1995 ... Brendan Eich idea y programa 10Días Mocha en apenas

Slide 6

Slide 6 text

Mocha LiveScript JavaScript

Slide 7

Slide 7 text

Allá por el año 1997 ...

Slide 8

Slide 8 text

A principios del 2000 ... JavaScript tenía algunos amigos pero no era muy popular

Slide 9

Slide 9 text

En la actualidad ... JavaScript está en todas partes

Slide 10

Slide 10 text

Javascript

Slide 11

Slide 11 text

¿Qué demonios es CoffeeScript? Pongamonos en situación

Slide 12

Slide 12 text

Es una idea que tuvo

Slide 13

Slide 13 text

“CoffeeScript it’s just JavaScript”

Slide 14

Slide 14 text

CoffeeScript es un lenguaje de programación que “genera” JavaScript

Slide 15

Slide 15 text

JavaScript WTFs

Slide 16

Slide 16 text

Douglas Crockford JavaScript The good parts

Slide 17

Slide 17 text

Global variables CoffeeScript solved!

Slide 18

Slide 18 text

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?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Scopes

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Semicolons CoffeeScript solved!

Slide 23

Slide 23 text

Semicolons CoffeeScript autocompleta los ; (function() { var message, saluda; message = "hola"; saluda = function() { return message; }; }).call(this); message = "hola" saluda = () -> message

Slide 24

Slide 24 text

Reserved words CoffeeScript solved!

Slide 25

Slide 25 text

Reserved words CoffeeScript escapa las palabras reservadas automáticamente var myObject; myObject = { "case": 'keyword', tutu: 'allowed name' }; myObject = case: 'keyword' tutu: 'allowed name'

Slide 26

Slide 26 text

typeof

Slide 27

Slide 27 text

Equality comparisons CoffeeScript solved!

Slide 28

Slide 28 text

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'

Slide 29

Slide 29 text

eval()

Slide 30

Slide 30 text

continue

Slide 31

Slide 31 text

switch fall through CoffeeScript solved!

Slide 32

Slide 32 text

switch fall through Bond = (input) -> switch input when 'Sean Connery', 'Daniel Craig' 'Fucking crack' when 'Roger Moore' 'A bit boring'

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

CoffeeScript “fabrica” bloques JavaScript

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Control de flujo Bond = (input) -> switch input when 'Sean Connery', 'Daniel Craig' 'Fucking crack' when 'Roger Moore' 'A bit boring' else 'No comments'

Slide 37

Slide 37 text

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()

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

‘The’ operator ? es el operador existencial en CoffeeScript

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Clases sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()

Slide 43

Slide 43 text

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); }); };

Slide 44

Slide 44 text

Ahora toca programar