Tweet
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!