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

LiveScript - tax-free JavaScript

LiveScript - tax-free JavaScript

COSCUP 2012

F0cc4b511c06b73afb23beb5695a83d6?s=128

Chia-liang Kao

August 19, 2012
Tweet

More Decks by Chia-liang Kao

Other Decks in Programming

Transcript

  1. LiveScript tax-free JavaScript Chia-liang Kao clkao@clkao.org COSCUP Taipei 2012

  2. @clkao Perl Hacker Emacs User Paraglider Pilot

  3. None
  4. None
  5. None
  6. New Spine New Life New Project New Language New Editor

  7. JavaScript

  8. • has Good Parts JavaScript

  9. 好⼈人卡 • has Good Parts JavaScript

  10. • has Good Parts • was originally called LiveScript JavaScript

  11. • has Good Parts • was originally called LiveScript •

    renamed to JavaScript when Netscape shipped browser with Java support (?!) JavaScript
  12. “What’s the difference between Java and Javascript?”

  13. Java -vs- JavaScript

  14. JavaScript (cont.)

  15. JavaScript (cont.) • ubiquitous

  16. JavaScript (cont.) • ubiquitous • node.js++

  17. JavaScript (cont.) • ubiquitous • node.js++ 我想做好⼈人

  18. Tax

  19. 台北好好拆

  20. ⼤大埔, 苗栗

  21. None
  22. 60 penguins NT$300,000,000

  23. 60 penguins NT$300,000,000

  24. None
  25. Language Tax (perl) sub { my $self = shift; $self->foo;

    }
  26. Language Tax (perl) sub { my $self = shift; $self->foo;

    } use method-invoker; method { $->foo; }
  27. Language Tax (JavaScript) var x = function(foo) { return foo*foo

    } x(10) # LiveScript x = -> it*it x 10
  28. Language Tax (JavaScript) [1,2,3].map(function(it) { return it * 2 })

    # LiveScript [1,2,3].map (* 2)
  29. != golf

  30. Less taxcode

  31. Less taxcode • fewer bugs

  32. Less taxcode • fewer bugs • more time

  33. Less taxcode • fewer bugs • more time • more

    fun
  34. Less taxcode • fewer bugs • more time • more

    fun • more care
  35. LiveScript • forked from Coco Feb 2012 • concise syntax

    • backcall • comprehension • destructuring • http://gkz.github.com/LiveScript
  36. LiveScript • forked from Coco Feb 2012 • concise syntax

    • backcall • comprehension • destructuring • http://gkz.github.com/LiveScript Go there and try compiling
  37. None
  38. Language Tax $('#element').click(function(){ this.dothis().dothat(); var that = this; $('.elements').each(function(e){ that.method(e);

    }); });
  39. Language Tax $('#element').click(function(){ this.dothis().dothat(); var that = this; $('.elements').each(function(e){ that.method(e);

    }); }); $('#element').click -> this.dothis().dothat() that = this $('.elements').each (e) -> that.method e use ->, minimum livescript requirement {} ()
  40. $('#element').click -> this.dothis().dothat() $('.elements').each (e) ~> this.method e $('#element').click ->

    this.dothis().dothat() that = this $('.elements').each (e) -> that.method e bound call, => in coffee script
  41. $('#element').click -> @dothis().dothat() $('.elements').each (e) ~> @method e $('#element').click ->

    this.dothis().dothat() $('.elements').each (e) ~> this.method e @ ≡ this
  42. $('#element').click -> @dothis!.dothat! $('.elements').each (e) ~> @method e $('#element').click ->

    @dothis().dothat() $('.elements').each (e) ~> @method e func! ≡ func()
  43. $('#element')click -> @dothis!dothat! $('.elements')each (e) ~> @method e $('#element').click ->

    @dothis!.dothat! $('.elements').each (e) ~> @method e . after ) ] ! are optional
  44. $(\#element)click -> @dothis!dothat! $(\.elements)each (e) ~> @method e $('#element')click ->

    @dothis!dothat! $('.elements')each (e) ~> @method e \foo ≡ ‘foo’
  45. <- $(\#element)click @dothis!dothat! $(\.elements)each (e) ~> @method e $(\#element)click ->

    @dothis!dothat! $(\.elements)each (e) ~> @method e backcall FTW! Backcall
  46. <- $(\#element)click @dothis!dothat! e <~ $(\.elements)each @method e <- $(\#element)click

    @dothis!dothat! $(\.elements)each (e) ~> @method e bound back call too Backcall (cont.)
  47. Language Tax $('#element').click(function(){ this.dothis().dothat(); var that = this; $('.elements').each(function(e){ that.method(e);

    }); }); <- $(\#element)click @dothis!dothat! e <~ $(\.elements)each @method e LS JS
  48. $('#element').click(function(){ var this$ = this; this.dothis().dothat(); return $('.elements').each(function(e){ return this$.method(e);

    }); }); <- $(\#element)click @dothis!dothat! e <~ $(\.elements)each @method e % livescript --bare -c
  49. Comprehension r = {[key, val * 2] for key, val

    of {a: 1, b: 2}} # r => {a: 2, b: 4} r = ["#x#y" for x in [\a \b] for y in [1 2]] # r => ['a1','a2','b1','b2']
  50. Destructuring [first, second] = [1, 2] [head, ...tail] = [1

    to 5]
  51. Destructuring [first, second] = [1, 2] [head, ...tail] = [1

    to 5] {name:name, age:age} = {weight: 110, name: 'emma', age: 20} {name, age} = {weight: 110, name: 'emma', age: 20} {Foo:{name, age}} = {Foo: {weight: 110, name: 'emma', age: 20}}
  52. Destructuring (cont.)

  53. Destructuring (cont.) # assignment a = {foo: bar, baz: baz,

    woot: [a1, a2] } a = {foo: bar, baz, woot: [a1, a2] } # vs { foo: bar, baz: baz, woot: [a1, a2] } = a { foo: bar, baz, woot: [a1, a2] } = a { foo: bar, baz, woot: [a1, a2] }:res = foo!
  54. Examples

  55. CWB current weather xml Examples <AnalysisData> <IssueTime>2012-08-02T20:00+08:00</IssueTime> <Area lat="25.134132" lon="121.494598"

    AreaID="6301200" > <Value> <Temp>26</Temp> <RH>86</RH> <Rain>0.0</Rain> <Cloud>100</Cloud> <WS>3</WS> <WD>47</WD> </Value> </Area> <Area lat="25.094612" lon="121.511459" AreaID="6301100" >......</Area> </AnalysisData>
  56. CWB current weather xml Examples <AnalysisData> <IssueTime>2012-08-02T20:00+08:00</IssueTime> <Area lat="25.134132" lon="121.494598"

    AreaID="6301200" > <Value> <Temp>26</Temp> <RH>86</RH> <Rain>0.0</Rain> <Cloud>100</Cloud> <WS>3</WS> <WD>47</WD> </Value> </Area> <Area lat="25.094612" lon="121.511459" AreaID="6301100" >......</Area> </AnalysisData> xml2js = require \xml2js parser = new xml2js.Parser! parser.parseString data, (err, results) -> console.log(results) ### or use backcall (err, results) <- parser.parseString data console.log(results)
  57. CWB current weather xml Examples <AnalysisData> <IssueTime>2012-08-02T20:00+08:00</IssueTime> <Area lat="25.134132" lon="121.494598"

    AreaID="6301200" > <Value> <Temp>26</Temp> <RH>86</RH> <Rain>0.0</Rain> <Cloud>100</Cloud> <WS>3</WS> <WD>47</WD> </Value> </Area> <Area lat="25.094612" lon="121.511459" AreaID="6301100" >......</Area> </AnalysisData> xml2js = require \xml2js parser = new xml2js.Parser! parser.parseString data, (err, results) -> console.log(results) ### or use backcall (err, results) <- parser.parseString data console.log(results)
  58. Examples (cont.) xml2js = require \xml2js parser = new xml2js.Parser!

    (err, {AnalysisData:{IssueTime:issued,Area:area}}) <- parser.parseString data # for entry in area ... for { Value, '@':{AreaID:areaid}} in area console.log do area: areaid ts: new Date(issued) weather: Value { IssueTime: '2012-08-02T20:00+08:00', Area: [ { '@': { lat: '25.134132', lon: '121.494598', AreaID: '6301200' }, Value: { Temp: '26', RH: '86', Rain: '0.0', Cloud: '100', WS: '3', WD: '47' } }, ....] ] }
  59. Many more

  60. Many more a = [2 7 1 8] ..push 3

    ..shift! ..sort! a #=> [1,3,7,8]
  61. Many more x = 10 do -> x = 5

    x #=> 10 do -> x := 2 x #=> 2 a = [2 7 1 8] ..push 3 ..shift! ..sort! a #=> [1,3,7,8]
  62. Too new a language? • new languages are no longer

    big deals • compiles to JavaScript, still readable • and (sort of) back, js2coffee • ambiguity? sugar that makes sense • language stability? 1.0.0 released!
  63. We are hiring! come work with @clkao, @audreyt, @gkz and

    many others!
  64. Questions?

  65. Thank You!