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
990
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
98
開放政府開了沒?
clkao
0
170
Scaling Civic Tech & Open Source
clkao
0
160
Fork and Merge: Collaboration in Civic Tech
clkao
0
210
Civic Tech & Public Services
clkao
0
90
g0v @ GSDI
clkao
0
140
g0v @ GEO-7
clkao
1
140
g0v @ NYC: Fork & Merge
clkao
0
280
Civic Tech Party
clkao
0
230
Other Decks in Technology
See All in Technology
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
Azure AI ことはじめ
tsubakimoto_s
0
130
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
How to Think Like a Performance Engineer
csswizardry
4
590
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Featured
See All Featured
BBQ
matthewcrist
82
9k
Leading Effective Engineering Teams 2024
addyosmani
3
300
The Cult of Friendly URLs
andyhume
75
5.9k
How to name files
jennybc
67
96k
A designer walks into a library…
pauljervisheath
201
24k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Visualization
eitanlees
139
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
YesSQL, Process and Tooling at Scale
rocio
166
14k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Producing Creativity
orderedlist
PRO
340
39k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
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!