Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Coffescript

 Coffescript

Presentació de Pau sobre Coffescript i la seva utilització

creantbits

July 26, 2013
Tweet

More Decks by creantbits

Other Decks in Programming

Transcript

  1. Com fer-nos la vida una mica més fàcil programant per

    navegadors paurullan@apsl. net Què pot fer CoffeeScript per nosaltres
  2. programar pel navegador és JavaScript

  3. JS com a llenguatge no és dolent

  4. simplement no està pensat pel que s'usa avui

  5. volem augmentar el rendiment humà

  6. CoffeeScript: pre-parser que genera codi JavaScript

  7. generam codi JS manco esforç més clar

  8. No és un complet substitut sinó una ajuda (cal saber

    JS)
  9. semblança al SASS/LESS (pre-parser CSS)

  10. The Zen of Python Beautiful is better than ugly. Explicit

    is better than implicit. Simple is better than complex. Flat is better than nested. Sparse is better than dense. Readability counts.
  11. objectiu: programar JS amb la mentalitat de Python

  12. CoffeeScript http: //coffeescript. org

  13. instaŀlació apt-get install coffeescript nmp install coffee-script

  14. coffee -wc x. coffee watch + compile

  15. $ = jQuery $(document). ready -> $("#a"). click(-> $("#b"). toggle()

    )
  16. (function() { var $; $ = jQuery; $(document). ready(function() {

    return $("#a"). click(function() { return $("#b"). toggle(); }); }); }). call(this);
  17. coffee -b x. coffee bare generació de text sense autoexecució

  18. var $; $ = jQuery; $(document). ready(function() { return $("#a").

    click(function() { return $("#b"). toggle(); }); }); bare
  19. coffee -wc x. coffee coffee -bcw x. coffee

  20. coffeelint npm install coffeelint http: //www. coffeelint. org/

  21. plugins pels editors eines limitades però més que suficients

  22. http: //coffeescriptcookbook. com CoffeeScript cook book

  23. http: //ristrettolo. gy/ CoffeeScript Ristretto

  24. sense problemes amb jQuery o altres llibreries

  25. inspiració sintàtica de Ruby, Python, Haskell i Erlang

  26. programació una mica més funcional

  27. molt flexible, cal decidir algun idioma nosaltres som pythonistes

  28. ús d'espais per indentació i determinar els blocs

  29. if / else amb indentació if x < 4 console.

    log(x) else alert(x)
  30. variables sense punt i coma ni var inicial x =

    1
  31. comparació amb rangs x < a < y

  32. funcions amb -> $("#a"). click(-> $("#b"). toggle() )

  33. returns implícits square = (x) -> x*x

  34. returns implícits necessari per l'estil de programació que farem

  35. paràmetres per defecte f = (x, y=3) -> x*y

  36. parèntesis implícits com en Ruby qx. Class. define("x. Application", extend:

    qx. application. Standalone, … ) --------------------------- qx. Class. define "x. Application", extend: qx. application. Standalone,
  37. parèntesis implícits readibility counts

  38. diccionaris implícits bros = brother: name: "Gabriel" age: 23 sister:

    name: "Carme" age: null
  39. interpolació x = "Pau" y = "Xisco" cadena = "hola

    #{x} i #{y}"
  40. intercanvi de variables [x, y] = [1 , 2, ]

    [a, b] = [b, a] (semblant al de Python però cal ficar-ho en llistes)
  41. array destructuring weather = (location) -> # aquí obtindríem alguns

    valors útils [location, 32, "Caloreta"] [city, temp, forecast] = weather("Palma")
  42. splats tercer_endavant = (a, b, rest. . . ) ->

    rest x = tercer_endavant(1 , 2, 3, 4, 5, 6) # x = 3, 4, 5, 6 *args en Python splat de Ruby
  43. splats + destructuring s = "text a xepar per espais"

    [inici, cos. . . , final] = s. split(" ") # inici = "text" # cos = ["a", "xepar", "per"] # final = "espais"
  44. generació de rangs [1 . . 4] # [1 ,

    2, 3, 4] [1 . . . 4] # [1 , 2, 3] com en Ruby range de Python
  45. generació de rangs //[1 . . 22] var _i, _results;

    (fucntion() { _results = []; for (_i = 1 ; _i <= 22; _i++){ _results. push(_i); } return _results; }). apply(this);
  46. slicing n = [1 , 2, 3, 4, ] n[2.

    . 4] n[3. . 5] = [-1 , ' a' , "bb"] [a, b. . . , x] = [1 , 2, 3, 4]
  47. for sobre llistes for x in [1 . . 1

    0] console. log(x)
  48. list comprehension x*x for x in [1 . . 1

    0] item. map((x) -> x*x) de moment no amb diccionaris
  49. operador «@» pel «this» l = [1 , 2, 3,

    4, ] h = (a, b, c, d) -> a+b+c+d l. apply(@, h)
  50. sistema de classes class Person constructor: (opt) -> {@name, @age,

    @height} = opt
  51. source-maps mapeig del codi CoffeeScript amb el generat útil per

    depurar
  52. Preguntes?

  53. gràcies!