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
88
開放政府開了沒?
clkao
0
140
Scaling Civic Tech & Open Source
clkao
0
150
Fork and Merge: Collaboration in Civic Tech
clkao
0
200
Civic Tech & Public Services
clkao
0
85
g0v @ GSDI
clkao
0
120
g0v @ GEO-7
clkao
1
130
g0v @ NYC: Fork & Merge
clkao
0
270
Civic Tech Party
clkao
0
220
Other Decks in Technology
See All in Technology
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
640
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Databricks におけるデータエンジニアリング
databricksjapan
0
380
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
700
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
340
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
600
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
Featured
See All Featured
BBQ
matthewcrist
80
8.7k
Building Your Own Lightsaber
phodgson
98
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
YesSQL, Process and Tooling at Scale
rocio
163
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Clear Off the Table
cherdarchuk
83
310k
The Pragmatic Product Professional
lauravandoore
24
5.8k
A better future with KSS
kneath
231
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
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!