Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LiveScript @ Front-End Developers Taiwan Party#5
Search
Chia-liang Kao
February 16, 2014
Technology
8
1k
LiveScript @ Front-End Developers Taiwan Party#5
Chia-liang Kao
February 16, 2014
Tweet
Share
More Decks by Chia-liang Kao
See All by Chia-liang Kao
Civic Tech as PPP
clkao
0
140
開放政府開了沒?
clkao
0
290
Scaling Civic Tech & Open Source
clkao
0
200
Fork and Merge: Collaboration in Civic Tech
clkao
0
260
Civic Tech & Public Services
clkao
0
120
g0v @ GSDI
clkao
0
250
g0v @ GEO-7
clkao
1
200
g0v @ NYC: Fork & Merge
clkao
0
340
Civic Tech Party
clkao
0
260
Other Decks in Technology
See All in Technology
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
slog.Handlerのよくある実装ミス
sakiengineer
4
400
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
530
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
200
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Designing for humans not robots
tammielis
253
25k
Designing for Performance
lara
610
69k
Writing Fast Ruby
sferik
628
62k
Bash Introduction
62gerente
615
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Speed Design
sergeychernyshev
32
1.1k
How to Ace a Technical Interview
jacobian
279
23k
Transcript
LiveScript Chia-liang Kao
[email protected]
@clkao Perl Hacker Emacs User Paraglider Pilot
None
New Spine New Life New Project New Language New Editor
None
好⼈人卡 • has Good Parts • was originally called LiveScript
• renamed to JavaScript when Netscape shipped browser with Java support (?!) JavaScript
“What’s the difference between Java and Javascript?”
Java -vs- JavaScript
Language Tax (perl) sub {! my $self = shift;! $self->foo;!
} use method-invoker;! method {! $->foo;! }
Language Tax var x = function(foo) { return foo*foo }!
x(10) # LiveScript x = -> it * it x 10
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
LiveScript • forked from Coco Feb 2012 • concise syntax
• backcall • comprehension • destructuring • http://livescript.net Go there and try compiling
None
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 {} ()
$('#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
$('#element').click ->! @dothis().dothat()! $('.elements').each (e) ~>! @method e $('#element').click ->!
this.dothis().dothat()! $('.elements').each (e) ~>! this.method e @ ≡ this
$('#element').click ->! @dothis!.dothat!! $('.elements').each (e) ~>! @method e $('#element').click ->!
@dothis().dothat()! $('.elements').each (e) ~>! @method e func! ≡ func()
$('#element')click ->! @dothis!dothat!! $('.elements')each (e) ~>! @method e $('#element').click ->!
@dothis!.dothat!! $('.elements').each (e) ~>! @method e . after ) ] ! are optional
<- $('#element').click! @dothis!dothat!! $('#element').each (e) ~>! @method e $('#element').click ->!
@dothis!dothat!! $('#element').each (e) ~>! @method e backcall FTW! Backcall
<- $(’#element’).click! @dothis!dothat!! e <~ $(’.elements’).each! @method e <- $(’#element’).click!
@dothis!dothat!! $(’.elements’).each (e) ~>! @method e bound back call too Backcall (cont.)
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
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 ()
$('#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
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)
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
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']!
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}}! !
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!
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]!
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!
Questions?
Thank You!