Slide 1
Slide 1 text
LiveScript
tax-free JavaScript
Chia-liang Kao
[email protected]
COSCUP Taipei 2012
Slide 2
Slide 2 text
@clkao
Perl Hacker
Emacs User
Paraglider Pilot
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
New Spine
New Life
New Project
New Language
New Editor
Slide 7
Slide 7 text
JavaScript
Slide 8
Slide 8 text
• has Good Parts
JavaScript
Slide 9
Slide 9 text
好⼈人卡
• has Good Parts
JavaScript
Slide 10
Slide 10 text
• has Good Parts
• was originally called LiveScript
JavaScript
Slide 11
Slide 11 text
• has Good Parts
• was originally called LiveScript
• renamed to JavaScript when Netscape
shipped browser with Java support (?!)
JavaScript
Slide 12
Slide 12 text
“What’s the difference
between Java and
Javascript?”
Slide 13
Slide 13 text
Java -vs- JavaScript
Slide 14
Slide 14 text
JavaScript (cont.)
Slide 15
Slide 15 text
JavaScript (cont.)
• ubiquitous
Slide 16
Slide 16 text
JavaScript (cont.)
• ubiquitous
• node.js++
Slide 17
Slide 17 text
JavaScript (cont.)
• ubiquitous
• node.js++
我想做好⼈人
Slide 18
Slide 18 text
Tax
Slide 19
Slide 19 text
台北好好拆
Slide 20
Slide 20 text
⼤大埔, 苗栗
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
60 penguins
NT$300,000,000
Slide 23
Slide 23 text
60 penguins
NT$300,000,000
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Language Tax (perl)
sub {
my $self = shift;
$self->foo;
}
Slide 26
Slide 26 text
Language Tax (perl)
sub {
my $self = shift;
$self->foo;
}
use method-invoker;
method {
$->foo;
}
Slide 27
Slide 27 text
Language Tax (JavaScript)
var x = function(foo) { return foo*foo }
x(10)
# LiveScript
x = -> it*it
x 10
Slide 28
Slide 28 text
Language Tax (JavaScript)
[1,2,3].map(function(it) { return it * 2 })
# LiveScript
[1,2,3].map (* 2)
Slide 29
Slide 29 text
!= golf
Slide 30
Slide 30 text
Less taxcode
Slide 31
Slide 31 text
Less taxcode
• fewer bugs
Slide 32
Slide 32 text
Less taxcode
• fewer bugs
• more time
Slide 33
Slide 33 text
Less taxcode
• fewer bugs
• more time
• more fun
Slide 34
Slide 34 text
Less taxcode
• fewer bugs
• more time
• more fun
• more care
Slide 35
Slide 35 text
LiveScript
• forked from Coco Feb 2012
• concise syntax
• backcall
• comprehension
• destructuring
• http://gkz.github.com/LiveScript
Slide 36
Slide 36 text
LiveScript
• forked from Coco Feb 2012
• concise syntax
• backcall
• comprehension
• destructuring
• http://gkz.github.com/LiveScript
Go there and try compiling
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Language Tax
$('#element').click(function(){
this.dothis().dothat();
var that = this;
$('.elements').each(function(e){
that.method(e);
});
});
Slide 39
Slide 39 text
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
{} ()
Slide 40
Slide 40 text
$('#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
Slide 41
Slide 41 text
$('#element').click ->
@dothis().dothat()
$('.elements').each (e) ~>
@method e
$('#element').click ->
this.dothis().dothat()
$('.elements').each (e) ~>
this.method e
@ ≡ this
Slide 42
Slide 42 text
$('#element').click ->
@dothis!.dothat!
$('.elements').each (e) ~>
@method e
$('#element').click ->
@dothis().dothat()
$('.elements').each (e) ~>
@method e
func! ≡ func()
Slide 43
Slide 43 text
$('#element')click ->
@dothis!dothat!
$('.elements')each (e) ~>
@method e
$('#element').click ->
@dothis!.dothat!
$('.elements').each (e) ~>
@method e
. after ) ] ! are optional
Slide 44
Slide 44 text
$(\#element)click ->
@dothis!dothat!
$(\.elements)each (e) ~>
@method e
$('#element')click ->
@dothis!dothat!
$('.elements')each (e) ~>
@method e
\foo ≡ ‘foo’
Slide 45
Slide 45 text
<- $(\#element)click
@dothis!dothat!
$(\.elements)each (e) ~>
@method e
$(\#element)click ->
@dothis!dothat!
$(\.elements)each (e) ~>
@method e
backcall FTW!
Backcall
Slide 46
Slide 46 text
<- $(\#element)click
@dothis!dothat!
e <~ $(\.elements)each
@method e
<- $(\#element)click
@dothis!dothat!
$(\.elements)each (e) ~>
@method e
bound back call too
Backcall (cont.)
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
$('#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
Slide 49
Slide 49 text
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']
Slide 50
Slide 50 text
Destructuring
[first, second] = [1, 2]
[head, ...tail] = [1 to 5]
Slide 51
Slide 51 text
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}}
Slide 52
Slide 52 text
Destructuring (cont.)
Slide 53
Slide 53 text
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!
Slide 54
Slide 54 text
Examples
Slide 55
Slide 55 text
CWB current weather xml
Examples
2012-08-02T20:00+08:00
26
86
0.0
100
3
47
......
Slide 56
Slide 56 text
CWB current weather xml
Examples
2012-08-02T20:00+08:00
26
86
0.0
100
3
47
......
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)
Slide 57
Slide 57 text
CWB current weather xml
Examples
2012-08-02T20:00+08:00
26
86
0.0
100
3
47
......
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)
Slide 58
Slide 58 text
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' } },
....] ] }
Slide 59
Slide 59 text
Many more
Slide 60
Slide 60 text
Many more
a = [2 7 1 8]
..push 3
..shift!
..sort!
a #=> [1,3,7,8]
Slide 61
Slide 61 text
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]
Slide 62
Slide 62 text
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!
Slide 63
Slide 63 text
We are hiring!
come work with
@clkao, @audreyt, @gkz
and many others!
Slide 64
Slide 64 text
Questions?
Slide 65
Slide 65 text
Thank You!