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
430
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
960
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
630
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
500
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
630
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
590
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Programming
See All in Programming
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
330
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
テスト駆動Kaggle
isax1015
1
530
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.6k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
770
TypeScriptでDXを上げろ! Hono編
yusukebe
3
740
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
480
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
180
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
30
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
A designer walks into a library…
pauljervisheath
207
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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