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
350
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
450
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
880
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
550
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
570
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
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
XStateでReactに秩序を与えたい
gizm000
0
730
Prolog入門
qnighy
4
1k
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
GoのIteratorに詳しくなってしまう
inatonix
1
200
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
800
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
560
Jakarta EE meets AI
ivargrimstad
1
520
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
GitHub's CSS Performance
jonrohan
1030
450k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Embracing the Ebb and Flow
colly
83
4.4k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Building Adaptive Systems
keathley
36
2.1k
Music & Morning Musume
bryan
46
6k
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