Being Flux on Electron - Speaker Deck

Being Flux on Electron

by Rize MISUMI

Slide 1

Slide 1 text

Being Flux on Electron Apr. 24, 2015 / Electron (Atom Shell) ษڧձ #1 @Misumi_Rize

Slide 2

Slide 2 text

console.log(me); Twitter @Misumi_Rize GitHub @MisumiRize http://misumirize.hatenablog.com ࠷ۙ͸ React Native Λ Android Ͱಈ͔ͨ͠Γͯͨ͠

Slide 3

Slide 3 text

Demo GHCache GitHub Λϒϥ΢ζ͠ͳ͕ΒཪଆͰ git clone https://github.com/MisumiRize/GHCache

Slide 4

Slide 4 text

GHClone Electron WebView, GlobalShortcut, Remote, Shell CoﬀeeScript ී௨ͷ࢖͍ํ React ී௨ͷ࢖͍ํ Flux Architecture ޙड़

Slide 5

Slide 5 text

WebView ϨϯμϥʔͱผϓϩηεͰϖʔδඳը σϑΥϧτͰ͸ Node ػೳͳ͠ ಺෦తʹ͸ Custom Component

Slide 6

Slide 6 text

CoﬀeeScript આ໌ུ require('coffee-script/register')Ͱಈ͘

Slide 7

Slide 7 text

Flux architecture આ໌ུ

Slide 8

Slide 8 text

Problem Flux architecture ͸ॲཧ͕Ϩϯμϥʔϓϩηε಺෦Ͱ׬݁͢ΔͳΒ ༗ޮ BrowserWindow ؒͰঢ়ଶΛڞ༗͍ͨ͠

Slide 9

Slide 9 text

Solution: Remote IPC ϝΠϯϓϩηεͱϨϯμϥʔͷؒͰ௨৴ ͦΕΛந৅Խͨ͠ػೳ͕ Remote େࡶ೺ʹݴ͏ͱɺϝΠϯϓϩηεͰಈ͘ API ΛϨϯμϥʔ͔Βݺ ΂Δ

Slide 10

Slide 10 text

Using Remote ϝΠϯϓϩηεଆʹ Dispatcher, Store ͷηοτΛ࡞Ε͹ΞϓϦέ ʔγϣϯશମʹมߋ௨஌Ͱ͖Δ

Slide 11

Slide 11 text

Flux on Electron rev.1

Slide 12

Slide 12 text

Problem again ϨϯμϥʔϓϩηεͷΦϒδΣΫτ͕ React ͷϥΠϑαΠΫϧΛ֎ ΕΔ e.g. ΢Οϯυ΢Λด͡ΔͱɺϝΠϯϓϩηεͷ Store ʹͭͳ͗ࠐΜ ͩ Listener ͕औΓআ͔Εͳ͍··Ϩϯμϥʔ͕ࣺͯΒΕΔ

Slide 13

Slide 13 text

Dispose of Renderer ϝΠϯϓϩηε͕ϨϯμϥʔଆͷΦϒδΣΫτΛࢀর͍ͯͨ͠৔ ߹ɺϨϯμϥʔ͕ഁغ͞ΕΔͱແޮͳࢀরͱͳΔ ࢀর͢Δͱ NullPointerException ঢ়ଶ

Slide 14

Slide 14 text

Deja vu ωΠςΟϒΞϓϦέʔγϣϯతͳਏ͞ IPC ͕ࣦഊ͢Δ͚͔ͩͩΒϚγͱ͸ݴ͑Δ

Slide 15

Slide 15 text

Flux is not enough Flux Architecture ͸ϥΠϑαΠΫϧ಺ͷϢʔβૢ࡞͕શͯഁյతͰ ͳ͍৔߹ͷΈ༗ޮ ϥΠϑαΠΫϧதʹը໘͕ด͡ΒΕͯഁغ͞ΕΔͷ͸૝ఆͷൣғ֎

Slide 16

Slide 16 text

Dispose of View at Flux ࠷ऴతͳഁغ͸ View

Slide 17

Slide 17 text

Activity BrowserWindow ͷഁغΛ఻ୡ MVP ͬΆ͍͚Ͳҧ͏

Slide 18

Slide 18 text

Flux on Electron rev.2

Slide 19

Slide 19 text

Conclusion ࣗ༝౓͕ߴ͍෼ωΠσΟϒΞϓ Ϧέʔγϣϯʹ͍ۙਏ͕͋͞Δ Flux શ໘ల։͸ແཧ͕͋Δ ͍Ζ͍Ζߏ੒Λߟ͑Δͱ໘നͦ ͏

Slide 20

Slide 20 text

cyclotron by Robert Couse-Baker https://www.ﬂickr.com/photos/29233640@N07/6781174568