LiveScript - tax-free JavaScript

Transcript

1. LiveScript tax-free JavaScript Chia-liang Kao [email protected] 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!