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
410
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
320
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
440
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
870
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
530
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
550
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
540
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
Other Decks in Programming
See All in Programming
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Rust.Nagoya #1
codemountains
0
170
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
継続的な活動で築く地方エンジニアの道
myamashii
2
350
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Documentation Writing (for coders)
carmenintech
63
4.2k
For a Future-Friendly Web
brad_frost
173
9.2k
Unsuck your backbone
ammeep
666
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
A better future with KSS
kneath
231
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Web development in the modern age
philhawksworth
203
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
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