Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Cycle.jsを使ってみた話 / Introductory talk about Cycle.js
tipo159
October 02, 2017
Programming
1
390
Cycle.jsを使ってみた話 / Introductory talk about Cycle.js
Cycle.jsの概要紹介
tipo159
October 02, 2017
Tweet
Share
More Decks by tipo159
See All by tipo159
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
370
REASONの紹介 / Introductory talk about REASON
tipo159
1
330
PWAで何ができるようになるのか / What does PWA do
tipo159
1
780
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
400
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
380
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
460
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
490
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
3.7k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
830
Other Decks in Programming
See All in Programming
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
320
Cloudflare Workersと状態管理
chimame
2
430
TokyoR#103_DataProcessing
kilometer
0
350
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
170
OSSから学んだPR Descriptionの書き方
fugakkbn
4
120
GitHub Flowでの高速なデリバリーをささえるテスト基盤について
kyong0612
0
130
Git Rebase
bkuhlmann
10
1.2k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
200
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
120
中小企業開発事例から見るサーバーレス
seike460
PRO
4
1.5k
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
130
はてなリモートインターンシップ2022 フロントエンドブートキャンプ 講義資料
hatena
0
110
Featured
See All Featured
KATA
mclloyd
12
9.7k
Making Projects Easy
brettharned
102
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Git: the NoSQL Database
bkeepers
PRO
418
60k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
A better future with KSS
kneath
230
16k
Facilitating Awesome Meetings
lara
33
4.6k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
830
GitHub's CSS Performance
jonrohan
1020
430k
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