React/FluxベースのElectronアプリをリモートチームで開発した話

Transcript

1. 1.

   React/Fluxϕʔεͷ ElectronΞϓϦΛ ϦϞʔτνʔϜͰ։ൃͨ͠࿩ ଠా ֆҰ࿠ Frontend Conference 2017 ࣾ಺ϋοΧιϯͰ

2. 2.

   ࣗݾ঺հ • ଠా ֆҰ࿠ (͓͓ͨ ͔͍͍ͪΖ͏) • αΠϘ΢ζגࣜձࣾ େࡕ։ൃ෦ •

   ࣾྺ/WebΤϯδχΞྺɿ2೥ • ීஈ͔ΒϦϞʔτνʔϜ։ൃʢେࡕ1/দࢁ4/౦ژ2) • ۀ຿Ͱ࢖͏ٕज़ɿC/C++, Java, JavaScript/ TypeScript, jQuery, MySQL, etc.
3. 3.

   ࿩͢಺༰ 1.ϦϞʔτνʔϜͰࣾ಺ϋοΧιϯͨ͠࿩ • Ͳ͏ਐΊ͔ͨ • ΍ͬͯΈֶͯΜͩ͜ͱ 2.࢖ͬͨϑϩϯτٕज़ͷ঺հʴͲ͏໾ཱ͔ͬͨ • React •

   Flux • Electron
4. 4.

   1. ϦϞʔτνʔϜͰ ࣾ಺ϋοΧιϯͨ͠࿩

5. 5.

   ࣾ಺ϋοΧιϯ • ೥1ճ։࠵ɺ3೔ؒ • ςʔϚ͸ఆΊͣ • νʔϜ or ݸਓ (ر๬੍)

   • ౦ژ/দࢁ/େࡕ͔ΒࢀՃ • νʔϜ͸جຊϥϯμϜ
6. 6.

   3ڌ఺ϦϞʔτνʔϜ ཚ਺ͷ۩߹ ʴ ୭΋ग़ுͰ͖ͳ͍౎߹ ʹΑΓ… 3ڌ఺ϦϞʔτνʔϜͷ஀ੜ

7. 7.

   ෆ҆ • ۭؒత੍໿ɿҰ౓΋ର໘Ͱ࿩͠߹͑ͳ͍ • ࣌ؒత੍໿ɿ࣌ؒʹ੍ݶ͕͋Δ • ٕज़త੍໿ɿಘҙ෼໺ɾ୲౰੡඼ɾεΩϧͷࠩ ׬੒Ͱ͖Δ͔ͳ ్தͰςϯγϣϯԼ͕ͬͨΒਏ͍

8. 8.

   ! ! ! ࡞Δ΋ͷɿࣾ಺޲͚௨஌ॲཧπʔϧ • ࣾһ͸ෳ਺ͷࣗࣾαʔϏεΛซ༻ͯ͠࢓ࣄΛ͢Δ • "௨஌"Λݟಀͨ͘͠ͳ͍ ɾ1αʔϏε1λϒ ɾ໘౗/ݟಀ͕ͪ͠

   ΞϓϦ ! ! ! API API API !!!
9. 9.

   Ͳ͏ਐΊ͔ͨʁ • ٕज़બఆ • ৄ͍͠ਓ͕τοϓμ΢ϯͰɹ • Electron, React, Flux

10. 10.

    Ͳ͏ਐΊ͔ͨʁ • ࣮૷த • GitͰ௚pushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ

11. 11.

    Ͳ͏ਐΊ͔ͨʁ • ࣮૷த • GitͰ௚pushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ ਐḿɾ෼୲

    ࡶஊ ࣭໰ɾൈ͚·͢ɾetc.
12. 12.

    ݁Ռ… • 3೔ؒͰͪΌΜͱ࡞Εͨʂ • େ৆ʹ͸͋ͱ1ථಧ͔ͣ (26 vs 27) • ࣮ࡍ࢖ͬͨਓ͔Βخ͍͠൓ڹ͕

    ௨஌ॲཧ͕ͱͯ΋ָʹͳΓ·ͨ͠ʂ શମͷϏδϡΞϧσβΠϯ͕ྑ͍ͱࢥ͍·͢ʂ ϝϯγϣϯͷ10161௨஌͕ศརͰ͢ʂ
13. 13.

    ௨஌ϏϡʔΞ αʔϏε Ұཡ ௨஌Ұཡ

14. 14.

    ϦϞʔτνʔϜͰϋοΧιϯɿ ΋͜͠͏ͩͱݫ͔ͬͨ͠ • ର໘ͷٞ࿦Ͱͳ͍ͱ೉͍͜͠ͱʹ௅ઓͯ͠͠·͏ • ཁٻ/ཁ݅ͷ෼ੳ • ΞʔΩςΫνϟ΍DBઃܭͷਂ͍ٞ࿦ • ద੾ͳٕज़͕બ΂ͳ͍

15. 15.

    ϦϞʔτνʔϜͰϋοΧιϯɿ ֶͼ • νϟοτͰҊ֎ͳΜͱ͔ͳΔ • ୲౰੡඼ͷ͕ࠩڧΈʹ΋ͳΔ • ద੾ͳٕज़બఆ͸େࣄʢˠޙ൒ͷ࿩΁ʣ ΞϓϦ

16. 16.

    2. ࢖ͬͨϑϩϯτٕज़ʹ͍ͭͯ

17. 17.

    React, Flux, Electron

18. 18.

    React

19. 19.

    React: ֓ཁ • JavaScriptϥΠϒϥϦ $ npm install react react-dom •

    MVCͰ͍͏V(Ϗϡʔ)෦෼Λ୲౰ • jQueryͱԿ͕ҧ͏ʁ • ඞͣίϯϙʔωϯτ(Ϋϥε)Λ࣮૷͢Δ • DOMͰ͸ͳ͘ίϯϙʔωϯτ͕ঢ়ଶΛอ࣋ • ঢ়ଶΛͲΜͳDOMͱͯ͠ඳը͢Δ͔Λએݴతʹهड़ • DOM͸ɺঢ়ଶมߋʹ൐ͬͯมΘΔ("react"͢Δ) [ { text: "hoge" }, { text: "fuga" } ] <ul> <li>hoge</li> <li>fuga</li> </ul> σʔλ(ঢ়ଶ) DOM
20. 20.

    React: ۩ମྫ class NotificationList extends React.Component { // … render()

    { // ঢ়ଶมߋ͞ΕͨΒࣗಈతʹݺ͹ΕΔ const cards = this.state.ntfs.map(ntf => { return <Notification id=ntf.id ntf=ntf.data /> }); return ( <div>{cards}</div> ); } // … } /PUJpDBUJPO-JTU ௨஌σʔλΛঢ়ଶʹ࣋ͭ NotificationList /PUJpDBUJPO /PUJpDBUJPO ộ
21. 21.

    React: ۩ମྫ class Notification extends React.Component { // … render()

    { return ( <div> <img src={this.props.ntf.iconUrl} /> <div className="content">{this.props.ntf.content}</div> // … </div> ); } // … } Notification /PUJpDBUJPO 1ͭͷ௨஌σʔλΛ ड͚औͬͯඳը /PUJpDBUJPO-JTU ௨஌σʔλΛঢ়ଶʹ࣋ͭ /PUJpDBUJPO ộ JNH
    TSDʜ EJW
    DMBTTDPOUFOU ộ
22. 22.

    React: ϝϦοτ • ঢ়ଶ(σʔλ)͕ू໿Ͱ͖Δ • → DOMͷؒͷ੔߹ੑ͕औΓ΍͍͢ • Ͳͷঢ়ଶ͕ߋ৽͞Ε͔ͨɺReact͕؂ࢹͯ͠DOMʹࠩ෼൓ө •

    → ແବͳDOMͷߋ৽͕ى͖ͣߴ଎ • Өڹൣғ͕೺Ѳ͠΍͍͢
23. 23.

    Flux

24. 24.

    Flux: ֓ཁ • ΞʔΩςΫνϟʔύλʔϯͷҰͭ • ReactͱҧͬͯϥΠϒϥϦΛࢦ͢Θ͚Ͱ͸ͳ͍ • ReactҎ֎ʹద༻ͯ͠΋ྑ͍ • σʔλͷྲྀΕΛҰํ޲ʹݶఆ

    • ঢ়ଶ(σʔλ)มߋͷखଓ͖Λنఆ
25. 25.

    Flux: ۩ମతʹ • ঢ়ଶͷஔ͖৔ॴͱมߋܦ࿏ΛҰݩԽ • "Store"͕શͯͷঢ়ଶΛ࣋ͭ • "Action"Λੜ੒ͯ͠"Dispatcher"͕ൃߦ શ௨஌ σʔλ

    ಺෦API ྫɿ௨஌Λফ͢ ௨஌Ϧετ Λදࣔ (React)
26. 26.

    Flux: ϝϦοτ • ͜ΜͳϞϠϞϠ͕ආ͚ΒΕΔ • ʮ͜ͷσʔλ(ঢ়ଶ)͓͔͍͚͠ͲɺͲ͜Ͱॻ͖׵͑ͯΔͷ…ʁʯ • ·ͣɺStoreʹରԠ͢ΔActionΛ୳ͤ͹Α͍ • ʮ͜ͷσʔλ͸Ͳ͔͜Βॻ͖׵͑Δͷ͕ਖ਼͍͠ઃܭ…ʁʯ

27. 27.

    React/Flux: ϦϞʔτϋοΧιϯత؍఺ • ઃܭΛ੍ݶͯ͘͠ΕΔ → ໎Θͳ͍ • Conflict࣌ͷରԠ͕͠΍͍͢ • ࣮૷্ͷίϛϡχέʔγϣϯͷઅ໿

    • ࣮૷ྔ͸Ͳ͏ͯ͠΋૿͑Δʢྫɿ<td>ཁૉΛ1ݸมߋ ͢ΔͨΊʹActionΛൃߦͯ͠ͷঢ়ଶมߋ͕ඞཁʣ • ֶशίετ େن໛։ൃͷจ຺ͰޠΔͷ͕Ԧಓͱࢥ͏͚Ͳɺ
28. 28.

    Electron

29. 29.

    Electron: ֓ཁ • HTML/CSS/JS ͰσεΫτοϓΞϓϦ࡞੒Ͱ͖ ΔϥΠϒϥϦ • Windows/macOS/Linux ରԠ •

    Chromium/Node.js ϕʔε • AtomɺVisual Studio CodeɺSlack • खܰײ͕ڧ͍
30. 30.

    Electron: ىಈʙ΢Οϯυ΢දࣔ $ electron . .BJO
    1SPDFTT → ./package.jsonͰࢦఆͨ͠ JavaScript Λ࣮ߦ

    win = new BrowserWindow({width: 900, height: 700}); win.loadURL(`file://${app.getAppPath()}/../index.html`); 3FOEFSFS
    1SPDFTT ίϚϯυϥΠϯ͔Β࣮ߦ → ΢Οϯυ΢Λ։͍ͯதʹindex.htmlΛදࣔ ɹ - Renderer Process Λෳ਺ੜ੒͢Ε͹ෳ਺΢Οϯυ΢ - Chrome DevTools Ͱσόοά
31. 31.

    σεΫτοϓ௨஌ const ntf = new Notification(title, { body: content });

32. 32.

    όοδΞΠίϯ (mac only) if (process.platform === 'darwin') { app.setBadgeCount(count); }

33. 33.

    ֤؀ڥ޲͚Πϯετʔϥ࡞੒ • $ npm install electron-builder • $ npm run

    dist • → dist/myApp-1.0.0.dmg ͕Ͱ͖Δ (macͷྫ) "scripts": { "dist": "build" } package.json:
34. 34.

    Electron: ϝϦοτ • Webٕज़ͰखܰʹϚϧνϓϥοτϑΥʔϜΞϓϦ • ϒϥ΢βޓ׵ੑˠߟྀෆཁ • ʮͱΓ͋͑ͣ഑෍ʯ΋͚ͬ͜͏؆୯ • ஫ɿWindows͸ύεࢦఆͰ͠͹͠͹ϋϚΔ

35. 35.

    ·ͱΊ

36. 36.

    ·ͱΊ • ׬શϦϞʔτνʔϜͰ΋ϋοΧιϯ͸Ͱ͖Δ • React/Flux → νʔϜ։ൃʹ໾ཱͭ • Electron →

    ؆୯ʹଟ͘ͷਓʹ࢖ͬͯ΋Β͑Δ
37. 37.

    Thank you!