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
Cycle.jsを使ってみた話 / Introductory talk about Cycle.js
Search
tipo159
October 02, 2017
Programming
1
440
Cycle.jsを使ってみた話 / Introductory talk about Cycle.js
Cycle.jsの概要紹介
tipo159
October 02, 2017
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
530
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
640
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
520
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
610
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
CSC305 Lecture 12
javiergs
PRO
0
240
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
230
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Music & Morning Musume
bryan
46
6.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Done Done
chrislema
185
16k
Visualization
eitanlees
149
16k
We Have a Design System, Now What?
morganepeng
53
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Transcript
Cycle.jsΛͬͯΈͨ We Are JavaScripters! @12th 2017.10.2 tipo159
Cycle.jsͱ • ϦΞΫςΟϒϓϩάϥϛϯά(Observable)ͰԾDOMΛૢ࡞͢Δϑ ϨʔϜϫʔΫ • xstreamͱ͍͏ϦΞΫςΟϒϓϩάϥϛϯάͷϥΠϒϥϦΛ༻ • xstreamRxJSͷܰྔ൛ • RxJSͱmost.js(Monadic
Streams)༻Մೳ 2
ԾDOM • SnabbdomΛ༻ • HyperScript HelpersͰDOMੜΛهड़ div('.myClass', {style: {color: 'red'}},
[]) 3
Cycle.jsͷߟ͑ํ • Cycle.jsͷΞϓϦέʔγϣϯͰɼ७ਮؔ(෭࡞༻ͷͳ ͍)main()͕ɼ֎෦͔ΒͷೖྗΛSources͔ΒಡΈࠐΈɼ ֎෦ͷ࡞༻ΛSinksॻ͖ग़͢ɽ 4 main() Sources Sinks DOMHTTPͷ෭࡞༻
७ਮؔ
σϞ 5
ιʔείʔυ 6
ϋϚͬͨϙΠϯτ • hyperscript helperͰͷselect()(<select>ͷ<option>)ͷ هड़ํ๏͕͔Βͳ͍ • html-to-hyperscript.paqmind.comͱ͍͏HTML͔Β hyperscriptʹม͢ΔαΠτͷग़ྗ௨Γʹهड़ͯ͠ ಈ࡞͠ͳ͍ •
ηϨΫλ༻ؔ(DOM.select())ͷݕࡧ݁Ռ͕ଟ͗͢ ͯɼ<select>ͷαϯϓϧΛݕࡧͰ͖ͳ͔ͬͨ 7
ࠂ We Are PureScripters #3 • ॳ৺ऀܴ ؔܕJavaScript LTେձ •
PureScriptElmͳͲͷؔܕϓϩάϥϛϯάݴޠ͚ͩͰͳ ͘ɺImmutable.jsLodashͳͲͷJavaScript༻ؔܕϥΠϒ ϥϦͳͲؚΊͨLTେձ • ࣌: 2017.10.20 19:30ʙ21:30 • ձ: ະఆ • LTొஃऀ ืूத 8