Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
React/Fluxϕʔεͷ ElectronΞϓϦΛ ϦϞʔτνʔϜͰ։ൃͨ͠ ଠా ֆҰ Frontend Conference 2017 ࣾϋοΧιϯͰ
Slide 2
Slide 2 text
ࣗݾհ • ଠా ֆҰ (͓͓ͨ ͔͍͍ͪΖ͏) • αΠϘζגࣜձࣾ େࡕ։ൃ෦ • ࣾྺ/WebΤϯδχΞྺɿ2 • ීஈ͔ΒϦϞʔτνʔϜ։ൃʢେࡕ1/দࢁ4/౦ژ2) • ۀͰ͏ٕज़ɿC/C++, Java, JavaScript/ TypeScript, jQuery, MySQL, etc.
Slide 3
Slide 3 text
͢༰ 1.ϦϞʔτνʔϜͰࣾϋοΧιϯͨ͠ • Ͳ͏ਐΊ͔ͨ • ͬͯΈֶͯΜͩ͜ͱ 2.ͬͨϑϩϯτٕज़ͷհʴͲ͏ཱ͔ͬͨ • React • Flux • Electron
Slide 4
Slide 4 text
1. ϦϞʔτνʔϜͰ ࣾϋοΧιϯͨ͠
Slide 5
Slide 5 text
ࣾϋοΧιϯ • 1ճ։࠵ɺ3ؒ • ςʔϚఆΊͣ • νʔϜ or ݸਓ (ر੍) • ౦ژ/দࢁ/େࡕ͔ΒࢀՃ • νʔϜجຊϥϯμϜ
Slide 6
Slide 6 text
3ڌϦϞʔτνʔϜ ཚͷ۩߹ ʴ ୭ग़ுͰ͖ͳ͍߹ ʹΑΓ… 3ڌϦϞʔτνʔϜͷੜ
Slide 7
Slide 7 text
ෆ҆ • ۭؒత੍ɿҰର໘Ͱ͠߹͑ͳ͍ • ࣌ؒత੍ɿ࣌ؒʹ੍ݶ͕͋Δ • ٕज़త੍ɿಘҙɾ୲ɾεΩϧͷࠩ Ͱ͖Δ͔ͳ ్தͰςϯγϣϯԼ͕ͬͨΒਏ͍
Slide 8
Slide 8 text
! ! ! ࡞Δͷɿ͚ࣾ௨ॲཧπʔϧ • ࣾһෳͷࣗࣾαʔϏεΛซ༻ͯ͠ࣄΛ͢Δ • "௨"Λݟಀͨ͘͠ͳ͍ ɾ1αʔϏε1λϒ ɾ໘/ݟಀ͕ͪ͠ ΞϓϦ ! ! ! API API API !!!
Slide 9
Slide 9 text
Ͳ͏ਐΊ͔ͨʁ • ٕज़બఆ • ৄ͍͠ਓ͕τοϓμϯͰɹ • Electron, React, Flux
Slide 10
Slide 10 text
Ͳ͏ਐΊ͔ͨʁ • ࣮த • GitͰpushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ
Slide 11
Slide 11 text
Ͳ͏ਐΊ͔ͨʁ • ࣮த • GitͰpushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ ਐḿɾ୲ ࡶஊ ࣭ɾൈ͚·͢ɾetc.
Slide 12
Slide 12 text
݁Ռ… • 3ؒͰͪΌΜͱ࡞Εͨʂ • େʹ͋ͱ1ථಧ͔ͣ (26 vs 27) • ࣮ࡍͬͨਓ͔Βخ͍͠ڹ͕ ௨ॲཧ͕ͱָͯʹͳΓ·ͨ͠ʂ શମͷϏδϡΞϧσβΠϯ͕ྑ͍ͱࢥ͍·͢ʂ ϝϯγϣϯͷ10161௨͕ศརͰ͢ʂ
Slide 13
Slide 13 text
௨ϏϡʔΞ αʔϏε Ұཡ ௨Ұཡ
Slide 14
Slide 14 text
ϦϞʔτνʔϜͰϋοΧιϯɿ ͜͠͏ͩͱݫ͔ͬͨ͠ • ର໘ͷٞͰͳ͍ͱ͍͜͠ͱʹઓͯ͠͠·͏ • ཁٻ/ཁ݅ͷੳ • ΞʔΩςΫνϟDBઃܭͷਂ͍ٞ • దͳٕज़͕બͳ͍
Slide 15
Slide 15 text
ϦϞʔτνʔϜͰϋοΧιϯɿ ֶͼ • νϟοτͰҊ֎ͳΜͱ͔ͳΔ • ୲ͷ͕ࠩڧΈʹͳΔ • దͳٕज़બఆେࣄʢˠޙͷʣ ΞϓϦ
Slide 16
Slide 16 text
2. ͬͨϑϩϯτٕज़ʹ͍ͭͯ
Slide 17
Slide 17 text
React, Flux, Electron
Slide 18
Slide 18 text
React
Slide 19
Slide 19 text
React: ֓ཁ • JavaScriptϥΠϒϥϦ $ npm install react react-dom • MVCͰ͍͏V(Ϗϡʔ)෦Λ୲ • jQueryͱԿ͕ҧ͏ʁ • ඞͣίϯϙʔωϯτ(Ϋϥε)Λ࣮͢Δ • DOMͰͳ͘ίϯϙʔωϯτ͕ঢ়ଶΛอ࣋ • ঢ়ଶΛͲΜͳDOMͱͯ͠ඳը͢Δ͔Λએݴతʹهड़ • DOMɺঢ়ଶมߋʹͬͯมΘΔ("react"͢Δ) [ { text: "hoge" }, { text: "fuga" } ]
hoge
fuga
σʔλ(ঢ়ଶ) DOM
Slide 20
Slide 20 text
React: ۩ମྫ class NotificationList extends React.Component { // … render() { // ঢ়ଶมߋ͞ΕͨΒࣗಈతʹݺΕΔ const cards = this.state.ntfs.map(ntf => { return }); return (
{cards}
); } // … } /PUJpDBUJPO-JTU ௨σʔλΛঢ়ଶʹ࣋ͭ NotificationList /PUJpDBUJPO /PUJpDBUJPO ộ
Slide 21
Slide 21 text
React: ۩ମྫ class Notification extends React.Component { // … render() { return (
{this.props.ntf.content}
// …
); } // … } Notification /PUJpDBUJPO 1ͭͷ௨σʔλΛ ड͚औͬͯඳը /PUJpDBUJPO-JTU ௨σʔλΛঢ়ଶʹ࣋ͭ /PUJpDBUJPO ộ JNHTSDʜ EJWDMBTTDPOUFOU ộ
Slide 22
Slide 22 text
React: ϝϦοτ • ঢ়ଶ(σʔλ)͕ूͰ͖Δ • → DOMͷؒͷ߹ੑ͕औΓ͍͢ • Ͳͷঢ়ଶ͕ߋ৽͞Ε͔ͨɺReact͕ࢹͯ͠DOMʹࠩө • → ແବͳDOMͷߋ৽͕ى͖ͣߴ • Өڹൣғ͕Ѳ͍͢͠
Slide 23
Slide 23 text
Flux
Slide 24
Slide 24 text
Flux: ֓ཁ • ΞʔΩςΫνϟʔύλʔϯͷҰͭ • ReactͱҧͬͯϥΠϒϥϦΛࢦ͢Θ͚Ͱͳ͍ • ReactҎ֎ʹద༻ͯ͠ྑ͍ • σʔλͷྲྀΕΛҰํʹݶఆ • ঢ়ଶ(σʔλ)มߋͷखଓ͖Λنఆ
Slide 25
Slide 25 text
Flux: ۩ମతʹ • ঢ়ଶͷஔ͖ॴͱมߋܦ࿏ΛҰݩԽ • "Store"͕શͯͷঢ়ଶΛ࣋ͭ • "Action"Λੜͯ͠"Dispatcher"͕ൃߦ શ௨ σʔλ ෦API ྫɿ௨Λফ͢ ௨Ϧετ Λදࣔ (React)
Slide 26
Slide 26 text
Flux: ϝϦοτ • ͜ΜͳϞϠϞϠ͕ආ͚ΒΕΔ • ʮ͜ͷσʔλ(ঢ়ଶ)͓͔͍͚͠ͲɺͲ͜Ͱॻ͖͑ͯΔͷ…ʁʯ • ·ͣɺStoreʹରԠ͢ΔActionΛ୳ͤΑ͍ • ʮ͜ͷσʔλͲ͔͜Βॻ͖͑Δͷ͕ਖ਼͍͠ઃܭ…ʁʯ
Slide 27
Slide 27 text
React/Flux: ϦϞʔτϋοΧιϯత؍ • ઃܭΛ੍ݶͯ͘͠ΕΔ → ໎Θͳ͍ • Conflict࣌ͷରԠ͕͍͢͠ • ্࣮ͷίϛϡχέʔγϣϯͷઅ • ࣮ྔͲ͏ͯ͠૿͑ΔʢྫɿཁૉΛ1ݸมߋ ͢ΔͨΊʹActionΛൃߦͯ͠ͷঢ়ଶมߋ͕ඞཁʣ • ֶशίετ େن։ൃͷจ຺ͰޠΔͷ͕Ԧಓͱࢥ͏͚Ͳɺ
Slide 28
Slide 28 text
Electron
Slide 29
Slide 29 text
Electron: ֓ཁ • HTML/CSS/JS ͰσεΫτοϓΞϓϦ࡞Ͱ͖ ΔϥΠϒϥϦ • Windows/macOS/Linux ରԠ • Chromium/Node.js ϕʔε • AtomɺVisual Studio CodeɺSlack • खܰײ͕ڧ͍
Slide 30
Slide 30 text
Electron: ىಈʙΟϯυදࣔ $ electron . .BJO1SPDFTT → ./package.jsonͰࢦఆͨ͠ JavaScript Λ࣮ߦ win = new BrowserWindow({width: 900, height: 700}); win.loadURL(`file://${app.getAppPath()}/../index.html`); 3FOEFSFS1SPDFTT ίϚϯυϥΠϯ͔Β࣮ߦ → ΟϯυΛ։͍ͯதʹindex.htmlΛදࣔ ɹ - Renderer Process Λෳੜ͢ΕෳΟϯυ - Chrome DevTools Ͱσόοά
Slide 31
Slide 31 text
σεΫτοϓ௨ const ntf = new Notification(title, { body: content });
Slide 32
Slide 32 text
όοδΞΠίϯ (mac only) if (process.platform === 'darwin') { app.setBadgeCount(count); }
Slide 33
Slide 33 text
֤ڥ͚Πϯετʔϥ࡞ • $ npm install electron-builder • $ npm run dist • → dist/myApp-1.0.0.dmg ͕Ͱ͖Δ (macͷྫ) "scripts": { "dist": "build" } package.json:
Slide 34
Slide 34 text
Electron: ϝϦοτ • Webٕज़ͰखܰʹϚϧνϓϥοτϑΥʔϜΞϓϦ • ϒϥβޓੑˠߟྀෆཁ • ʮͱΓ͋͑ͣʯ͚ͬ͜͏؆୯ • ɿWindowsύεࢦఆͰ͠͠ϋϚΔ
Slide 35
Slide 35 text
·ͱΊ
Slide 36
Slide 36 text
·ͱΊ • શϦϞʔτνʔϜͰϋοΧιϯͰ͖Δ • React/Flux → νʔϜ։ൃʹཱͭ • Electron → ؆୯ʹଟ͘ͷਓʹͬͯΒ͑Δ
Slide 37
Slide 37 text
Thank you!