マルチプラットフォーム時代の JavaScript x React 戦略

Slide 1

Slide 1 text

ϚϧνϓϥοτϑΥʔϜ࣌୅ͷ JavaScript x React ઓུ 2016/06/10 react-native meetup #2 janus_wel

Slide 2

Slide 2 text

ࣗݾ঺հ janus_wel ΍͵͢ CureApp tech lead • Twitter janus_wel • github januswel • Qiita janus_wel

Slide 3

Slide 3 text

http://cureapp.co.jp/

Slide 4

Slide 4 text

͠Ό΂Δ͜ͱ • ϚϧνϓϥοτϑΥʔϜͰ ϓϩμΫτΛఏڙ͢Δࡍͷ ઓུͷͻͱͭ • ઃܭ࿦ͳͲ • ଟ෼ʹझຯ͕ೖΓ·͢

Slide 5

Slide 5 text

͠Ό΂Βͳ͍͜ͱ • ۩ମతͳϚϧνϓϥοτ ϑΥʔϜͰͷϓϩμΫτఏ ڙํ๏

Slide 6

Slide 6 text

ϚϧνϓϥοτϑΥʔϜ • iOS • Android • Web • CLI • others…

Slide 7

Slide 7 text

React Native ͷཧ೦

Slide 8

Slide 8 text

learn once, write anywhere

Slide 9

Slide 9 text

https://code.facebook.com/posts/1014532261909640/react-native- bringing-modern-web-techniques-to-mobile/ It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”

Slide 10

Slide 10 text

ϓϥοτϑΥʔϜ͝ͱͷҧ͍ https://developer.android.com/design/get-started/principles.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/ MobileHIG/ iOS • Deference • Clarity • Depth Android • Enchant Me • Simplify My Life • Make Me Amazing ͪͳΈʹ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

learn once, write anywhere

Slide 13

Slide 13 text

͜ΕΛૉ௚ʹ΍Δͱ

Slide 14

Slide 14 text

֤ϓϥοτϑΥʔϜʹ ϩδοΫ͕ࢄΒ͹Δ

Slide 15

Slide 15 text

ϝϯςφϯεͮ͠Β͍ • Ͳ͜ʹϩδοΫॻ͍͔ͨΘ͔Βͳ͍໰୊ • ϩδοΫ͕֤ϓϥοτϑΥʔϜͰಉ͔͡ Θ͔Βͳ͍໰୊ • ςετ΋෼ࢄͯ͠͠·͏໰୊ ϓϥοτϑΥʔϜ͝ͱʹػೳࠩҟ ͕ग़ͯ͠·͏Մೳੑ΋…

Slide 16

Slide 16 text

ϓϥοτϑΥʔϜʹΑΒͣ ϩδοΫ͸ڞ௨Ͱ͍͍

Slide 17

Slide 17 text

ࠓॻ͍͍ͯΔϩδοΫ͸ ͳΜͷͨΊͷ΋ͷ ?

Slide 18

Slide 18 text

UI Λ࣮ݱ͢Δ΋ͷ or ͦΕҎ֎

Slide 19

Slide 19 text

ͦΕҎ֎ ?

Slide 20

Slide 20 text

3૚ΞʔΩςΫνϟʔ

Slide 21

Slide 21 text

3૚ΞʔΩςΫνϟʔ

Slide 22

Slide 22 text

UI͚ͩͰ׬݁͢Δ ΞϓϦ͸ͳ͍

Slide 23

Slide 23 text

୯७ͳϙϞυʔϩςΫχοΫλΠϚʔ • ࣌ؒͷΧ΢ϯτμ΢ϯ • 25 ෼ޙʹ௨஌͢Δ

Slide 24

Slide 24 text

୯७ͳϙϞυʔϩςΫχοΫλΠϚʔ • ࣌ؒͷΧ΢ϯτμ΢ϯ • 25 ෼ޙʹ௨஌͢Δ ϩδοΫ!!

Slide 25

Slide 25 text

Ͳ͏΍ͬͯϩδοΫΛ ݟ͚ͭग़͔͢ ?

Slide 26

Slide 26 text

ϓϩτλΠϓ͔Β ݟ͚ͭग़͢ ͨͱ͑͹

Slide 27

Slide 27 text

1. ಛఆͷϓϥοτϑΥʔϜͰϓϩτλΠϐϯά ͢Δ 2. ϓϥοτϑΥʔϜ͕มΘͬͯ΋ڞ௨͢Δ෦෼ Λ୳͢ 3. ڞ௨͢Δ෦෼Λ੾Γ෼͚Δ

Slide 28

Slide 28 text

খ͘͞͸͡ΊΔ৔߹͸ ͍͍

Slide 29

Slide 29 text

ϚϧνϓϥοτϑΥʔϜ͕ લఏͷ৔߹ɺଞͷ΍Γํ͕ ͋Γͦ͏

Slide 30

Slide 30 text

Domain Driven Design Φεεϝ

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

538 ϖʔδ

Slide 33

Slide 33 text

• Place the project’s primary focus on the core domain and domain logic • Base complex designs on a model • Initiate a creative collaboration between technical and domain experts to iteratively cut ever closer to the conceptual heart of the problem. http://dddcommunity.org/learning-ddd/what_is_ddd/

Slide 34

Slide 34 text

ݴ༿ ҙຯ υϝΠϯ ϓϩμΫτ͕ղܾ͢΂͖ ໰୊ υϝΠϯϩδοΫ UI ʹΑΒͳ͍ϩδοΫ Ϟσϧ ղܾ͢΂͖໰୊͔Βݟͨ ෺ࣄͷଊ͑ํ υϝΠϯΤΩεύʔτ ໰୊΁ͷ଄ܮ͕ਂ͍ ݸਓɾάϧʔϓ

Slide 35

Slide 35 text

ݴ༿ ҙຯ υϝΠϯ ϓϩμΫτ͕ղܾ͢΂͖ ໰୊ υϝΠϯϩδοΫ UI ʹΑΒͳ͍ϩδοΫ Ϟσϧ ղܾ͢΂͖໰୊͔Βݟͨ ෺ࣄͷଊ͑ํ υϝΠϯΤΩεύʔτ ໰୊΁ͷ଄ܮ͕ਂ͍ ݸਓɾάϧʔϓ

Slide 36

Slide 36 text

υϝΠϯΛද͢૚Λ࡞ͬͯ ͦ͜ʹ஫ྗ͠Α͏

Slide 37

Slide 37 text

͜ΕͰϩδοΫ͕ ࢄΒ͹Δ৺഑͸ͳ͘ͳͬͨ

Slide 38

Slide 38 text

͍͔͍ͬ·ͱΊ

Slide 39

Slide 39 text

3૚ΞʔΩςΫνϟʔ ͓͔ΘΓ ! UI " Domain  Infrastructure

Slide 40

Slide 40 text

ϚϧνϓϥοτϑΥʔϜ ͚ͩͲ React ͰָͰ͖Δ !UI

Slide 41

Slide 41 text

UI ͕௚઀࢖͏ͷͰ JavaScript Ͱॻ͘ "Domain ͨͩ͠ϚϧνϓϥοτϑΥʔϜΛҙࣝ͢Δ Universal JavaScript

Slide 42

Slide 42 text

Infrastructure Ͳ͏͠Α͏?

Slide 43

Slide 43 text

ඞཁͳ΋ͷΛ༻ҙ͢Δ

Slide 44

Slide 44 text

Πϯϑϥ΁ͷཁٻ • σʔλӬଓԽ • σʔλڞ༗ • Web ΞϓϦ഑৴ • αʔόʔαΠυϨϯμϦϯά

Slide 45

Slide 45 text

͜͏͍ͬͨཁٻ͸ υϝΠϯʹΑͬͯมԽ͢Δ

Slide 46

Slide 46 text

ϙϞυʔϩλΠϚʔ ୯७ͳλΠϚʔͷ৔߹ɺཁٻͳ͠ • +λεΫ؅ཧػೳ • σʔλӬଓԽ • +ιʔγϟϧػೳ • σʔλڞ༗ • +Web ΠϯλʔϑΣΠε • Web ΞϓϦ഑৴

Slide 47

Slide 47 text

෺ཧ഑ஔͷҰྫ  $ " % & ' ( ) * + Web ΞϓϦ഑৴ σʔλڞ༗ σʔλӬଓԽ

Slide 48

Slide 48 text

ࠓ͸ JS ϑϨϯυϦʔͳબ୒ࢶ ͕ͨ͘͞Μ͋Δ • mBaaS • NoSQL • ؾ߹Ͱࣗલ։ൃ

Slide 49

Slide 49 text

3૚ΞʔΩςΫνϟʔ ࡾഋ໨ ! UI React = JS " Domain JS  Infrastructure JS friendly

Slide 50

Slide 50 text

React Native ͷొ৔ʹΑͬͯ ࣮ߦ଎౓ɾ։ൃ଎౓ͱ΋ʹݱ࣮తͳ ϚϧνϓϥοτϑΥʔϜ޲͚ JS ελοΫ͕Ͱ͖ͨ

Slide 51

Slide 51 text

͜ͷ JS ελοΫΛ࢖ͬͯ Ұॹʹ։ൃ͠·ͤΜ͔ ?

Slide 52

Slide 52 text

DDD ͷΠϕϯτͳͲ ΋΍ͬͯ·͢ http://cureapp.connpass.com/ ձ৔Λఏڙͯͩ͘͠͞ΔํΛ୳͍ͯ͠·͢

Slide 53

Slide 53 text

ิ଍

Slide 54

Slide 54 text

DDD ͷ໰୊ղܾ΁ͷ Ξϓϩʔν • ϢϏΩλεݴޠʹΑΔυϝΠϯͷཧղɺ ϞσϧʹΑΔදݱʹॏ͖Λ͓͘ • υϝΠϯΛద੾ʹϞσϧͰදݱͰ͖ ͍ͯΕ͹໰୊΋ղܾ͞ΕΔͱ͍͏ε λϯε • υϝΠϯΤΩεύʔτ͕ଘࡏ͠ͳ͍ ৔߹ ?

Slide 55

Slide 55 text

໰୊ղܾʹదͨ͠ ํ๏࿦ͷซ༻ • ϢʔβʔετʔϦʔϚοϐϯά • RUNNING LEAN

Slide 56

Slide 56 text

DDDϚωδϝϯτͮ͠Β͍໰୊ • υϝΠϯ஌ࣝͷڞ༗ʹίετ͕͔͔Δ • ํ๏࿦ͱͯ͠ϔϰΟ • มߋ͕ෳ਺ϨΠϠʔʹ೿ੜ͢Δࣄ͕ଟ ͍ • λεΫͷফԽ๨ΕͳͲ͕ͨ·ʹൃੜ ͢Δ

Slide 57

Slide 57 text

DDDΛద༻͢΂͖ϓϩδΣΫτ ͸ݶΒΕΔ • ෳࡶͳυϝΠϯΛ͍࣋ͬͯΔ • ϥΠϑαΠΫϧ͕਺೥ʙͳͲɺ͋Δͯ ͍Ͳͷ௕͞Λ͍࣋ͬͯΔ • νʔϜ͕͋Δఔ౓ DDD ʹ׳Ε͍ͯΔ or ϝϯλʔ͕͍Δ • etc

Slide 58

Slide 58 text

DDDͷ෦෼తͳಋೖ • υϝΠϯ૚Λҙࣝ͢Δ • ϩδοΫΛด͜͡ΊΔΑ͏ʹ͢Δ • υϝΠϯΤΩεύʔτΛνʔϜʹট͘ • υϝΠϯΤΩεύʔτ΋ཧղͰ͖Δ ݴ༿ͰυϝΠϯʹ͍ͭͯ࿩͢ˠϢϏ Ωλεݴޠ • etc

Slide 59

Slide 59 text

DDDϥΠϒϥϦʔͷ࢖༻ • ٕज़తͳ෦෼͸ϥΠϒϥϦʔͷ࢖༻Ͱ ͳΜͱͰ΋ͳΔ • https://github.com/CureApp/base- domain

Slide 60

Slide 60 text

෼ྨ DDD ઃܭ Ϛωδϝϯτ ໰୊ ղܾ ٕज़త ํ๏࿦ Scrum etc User Story Mapping etc

Slide 61

Slide 61 text

DDD Ͱͷ࣮ߦ଎౓͸? • ૚Λ෼͚͍ͯΔͷͰग़Δ͸͕ͣͳ͍ • ଎౓͕ඞཁͳΒϞϊϦγοΫʹ࡞Δ΂ ͖ • ͱ͸͍͑ msec ୯ҐͰͷ൓Ԡ଎౓͕ཁ ٻ͞ΕΔ৔໘Ͱͳ͚Ε͹໰୊ͳ͍ • ΠϯϑϥετϥΫνϟʔ૚ͷνϡʔ χϯάͰͳΜͱ͔ͳΔ