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

LiveScript - tax-free JavaScript

LiveScript - tax-free JavaScript

COSCUP 2012

Chia-liang Kao

August 19, 2012
Tweet

More Decks by Chia-liang Kao

Other Decks in Programming

Transcript

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

    renamed to JavaScript when Netscape shipped browser with Java support (?!) JavaScript
  2. Tax

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

    } use method-invoker; method { $->foo; }
  4. LiveScript • forked from Coco Feb 2012 • concise syntax

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

    • backcall • comprehension • destructuring • http://gkz.github.com/LiveScript Go there and try compiling
  6. 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 {} ()
  7. $('#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
  8. $('#element').click -> @dothis().dothat() $('.elements').each (e) ~> @method e $('#element').click ->

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

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

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

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

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

    @dothis!dothat! $(\.elements)each (e) ~> @method e bound back call too Backcall (cont.)
  14. $('#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
  15. 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']
  16. 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}}
  17. 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!
  18. 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>
  19. 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)
  20. 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)
  21. 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' } }, ....] ] }
  22. Many more a = [2 7 1 8] ..push 3

    ..shift! ..sort! a #=> [1,3,7,8]
  23. 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]
  24. 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!