LiveScript @ Front-End Developers Taiwan Party#5

Transcript

1. LiveScript
   Chia-liang Kao clkao@clkao.org
2. @clkao Perl Hacker Emacs User Paraglider Pilot
4. New Spine New Life New Project New Language New Editor
6. 好⼈人卡 • has Good Parts • was originally called LiveScript • renamed to JavaScript when Netscape shipped browser with Java support (?!) JavaScript
7. “What’s the difference between Java and Javascript?”
8. Java -vs- JavaScript
9. Language Tax (perl) sub {! my $self = shift;! $self->foo;! } use method-invoker;! method {! $->foo;! }
10. Language Tax var x = function(foo) { return foo*foo }! x(10) # LiveScript x = -> it * it x 10
11. Language Tax (JavaScript) [1,2,3].map(function(it) { return it * 2 }) Implicit return # LiveScript [1,2,3].map (d) -> d * 2 [1,2,3].map -> it * 2 [1,2,3].map (* 2) Implicit argument shorthand
12. LiveScript • forked from Coco Feb 2012 • concise syntax • backcall • comprehension • destructuring • http://livescript.net Go there and try compiling
14. 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 {} ()
15. $('#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
16. $('#element').click ->! @dothis().dothat()! $('.elements').each (e) ~>! @method e $('#element').click ->! this.dothis().dothat()! $('.elements').each (e) ~>! this.method e @ ≡ this
17. $('#element').click ->! @dothis!.dothat!! $('.elements').each (e) ~>! @method e $('#element').click ->! @dothis().dothat()! $('.elements').each (e) ~>! @method e func! ≡ func()
18. $('#element')click ->! @dothis!dothat!! $('.elements')each (e) ~>! @method e $('#element').click ->! @dothis!.dothat!! $('.elements').each (e) ~>! @method e . after ) ] ! are optional
19. <- $('#element').click! @dothis!dothat!! $('#element').each (e) ~>! @method e $('#element').click ->! @dothis!dothat!! $('#element').each (e) ~>! @method e backcall FTW! Backcall
20. <- $(’#element’).click! @dothis!dothat!! e <~ $(’.elements’).each! @method e <- $(’#element’).click! @dothis!dothat!! $(’.elements’).each (e) ~>! @method e bound back call too Backcall (cont.)
21. Language Tax $('#element').click(function(){! this.dothis().dothat();! var that = this;! $('.elements').each(function(e){! that.method(e);! });! }); LS JS <- $(’#element’).click! @dothis!dothat!! e <~ $(’.elements’).each! @method e
22. 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 optional ()
23. $('#element').click(function(){! var this$ = this;! this.dothis().dothat();! return $('.elements').each(function(e){! return this$.method(e);! });! }); <- $('#element').click! @dothis!dothat!! e <~ $('#element').each! @method e % livescript --bare -c
24. Function Helpers [1,2,3].map(function(it) { return it * 2 }) [1,2,3].map (* 2) [{k:1},{k.2}].map(function(it) { return it.k }) [1,2,3].map (it) -> it.k [1,2,3].map -> it.k [1,2,3].map (.k) [1,2,3].filter(function(it) { return it > 2}) [1,2,3].filter (it) -> it > 2 [1,2,3].filter (> 2)
25. Object Helper # some data users = * name: 'clkao' tags: <[g0v ly livescript]> * name: 'tyler' tags: <[clbc]> * name: 'BoBChao' tags: <[kktix coscup]> List of strings List of objects
26. 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']!
27. 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}}! !
28. 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!
29. 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]!
30. 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.2.0 released!
31. Questions?
32. Thank You!