LiveScript - tax-free JavaScript

COSCUP 2012

Transcript

1. LiveScript tax-free JavaScript Chia-liang Kao clkao@clkao.org COSCUP Taipei 2012
2. @clkao Perl Hacker Emacs User Paraglider Pilot
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. ⼤大埔, 苗栗
22. 60 penguins NT$300,000,000
23. 60 penguins NT$300,000,000
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
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!