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
Being Flux on Electron
Search
Rize MISUMI
April 24, 2015
Technology
2
1.3k
Being Flux on Electron
Electron (Atom Shell) 勉強会 #1
Rize MISUMI
April 24, 2015
Tweet
Share
More Decks by Rize MISUMI
See All by Rize MISUMI
5 Smashing Changes Your Extension Will Encounter #phpblt
misumirize
0
2.9k
Effective Espresso #roppongi_aar
misumirize
0
2.3k
Build your APK beyond Docker #dockerlt
misumirize
2
2.9k
某イベントを支えるRuby
misumirize
0
970
Other Decks in Technology
See All in Technology
Connect 100+を支える技術
kanyamaguc
0
180
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
モバイル界のMCPを考える
naoto33
0
410
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
13k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
310
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
360
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
140
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
410
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Language of Interfaces
destraynor
158
25k
Producing Creativity
orderedlist
PRO
346
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Six Lessons from altMBA
skipperchong
28
3.9k
KATA
mclloyd
30
14k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Done Done
chrislema
184
16k
Transcript
Being Flux on Electron Apr. 24, 2015 / Electron (Atom
Shell) ษڧձ #1 @Misumi_Rize
console.log(me); Twitter @Misumi_Rize GitHub @MisumiRize http://misumirize.hatenablog.com ࠷ۙ React Native Λ
Android Ͱಈ͔ͨ͠Γͯͨ͠
Demo GHCache GitHub Λϒϥζ͠ͳ͕ΒཪଆͰ git clone https://github.com/MisumiRize/GHCache
GHClone Electron WebView, GlobalShortcut, Remote, Shell CoffeeScript ී௨ͷ͍ํ React ී௨ͷ͍ํ
Flux Architecture ޙड़
WebView ϨϯμϥʔͱผϓϩηεͰϖʔδඳը σϑΥϧτͰ Node ػೳͳ͠ ෦తʹ Custom Component
CoffeeScript આ໌ུ require('coffee-script/register')Ͱಈ͘
Flux architecture આ໌ུ
Problem Flux architecture ॲཧ͕Ϩϯμϥʔϓϩηε෦Ͱ݁͢ΔͳΒ ༗ޮ BrowserWindow ؒͰঢ়ଶΛڞ༗͍ͨ͠
Solution: Remote IPC ϝΠϯϓϩηεͱϨϯμϥʔͷؒͰ௨৴ ͦΕΛநԽͨ͠ػೳ͕ Remote େࡶʹݴ͏ͱɺϝΠϯϓϩηεͰಈ͘ API ΛϨϯμϥʔ͔Βݺ Δ
Using Remote ϝΠϯϓϩηεଆʹ Dispatcher, Store ͷηοτΛ࡞ΕΞϓϦέ ʔγϣϯશମʹมߋ௨Ͱ͖Δ
Flux on Electron rev.1
Problem again ϨϯμϥʔϓϩηεͷΦϒδΣΫτ͕ React ͷϥΠϑαΠΫϧΛ֎ ΕΔ e.g. ΟϯυΛด͡ΔͱɺϝΠϯϓϩηεͷ Store ʹͭͳ͗ࠐΜ
ͩ Listener ͕औΓআ͔Εͳ͍··Ϩϯμϥʔ͕ࣺͯΒΕΔ
Dispose of Renderer ϝΠϯϓϩηε͕ϨϯμϥʔଆͷΦϒδΣΫτΛࢀর͍ͯͨ͠ ߹ɺϨϯμϥʔ͕ഁغ͞ΕΔͱແޮͳࢀরͱͳΔ ࢀর͢Δͱ NullPointerException ঢ়ଶ
Deja vu ωΠςΟϒΞϓϦέʔγϣϯతͳਏ͞ IPC ͕ࣦഊ͢Δ͚͔ͩͩΒϚγͱݴ͑Δ
Flux is not enough Flux Architecture ϥΠϑαΠΫϧͷϢʔβૢ࡞͕શͯഁյతͰ ͳ͍߹ͷΈ༗ޮ ϥΠϑαΠΫϧதʹը໘͕ด͡ΒΕͯഁغ͞ΕΔͷఆͷൣғ֎
Dispose of View at Flux ࠷ऴతͳഁغ View
Activity BrowserWindow ͷഁغΛୡ MVP ͬΆ͍͚Ͳҧ͏
Flux on Electron rev.2
Conclusion ࣗ༝͕ߴ͍ωΠσΟϒΞϓ Ϧέʔγϣϯʹ͍ۙਏ͕͋͞Δ Flux શ໘ల։ແཧ͕͋Δ ͍Ζ͍ΖߏΛߟ͑Δͱ໘നͦ ͏
cyclotron by Robert Couse-Baker https://www.flickr.com/photos/29233640@N07/6781174568