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

react-native meetup #2

Transcript

1. ϚϧνϓϥοτϑΥʔϜ࣌୅ͷ JavaScript x React ઓུ 2016/06/10 react-native meetup #2 janus_wel
2. ࣗݾ঺հ janus_wel ΍͵͢ CureApp tech lead • Twitter janus_wel • github januswel • Qiita janus_wel
3. http://cureapp.co.jp/
4. ͠Ό΂Δ͜ͱ • ϚϧνϓϥοτϑΥʔϜͰ ϓϩμΫτΛఏڙ͢Δࡍͷ ઓུͷͻͱͭ • ઃܭ࿦ͳͲ • ଟ෼ʹझຯ͕ೖΓ·͢
5. ͠Ό΂Βͳ͍͜ͱ • ۩ମతͳϚϧνϓϥοτ ϑΥʔϜͰͷϓϩμΫτఏ ڙํ๏
6. ϚϧνϓϥοτϑΥʔϜ • iOS • Android • Web • CLI • others…
7. React Native ͷཧ೦
8. learn once, write anywhere
9. 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.”
10. ϓϥοτϑΥʔϜ͝ͱͷҧ͍ 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 ͪͳΈʹ
11. ϓϥοτϑΥʔϜ͝ͱͷҧ͍ 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 ͪͳΈʹ ਓؒΛ αϙʔτ ڻ͖Λ ఏڙ
12. learn once, write anywhere
13. ͜ΕΛૉ௚ʹ΍Δͱ
14. ֤ϓϥοτϑΥʔϜʹ ϩδοΫ͕ࢄΒ͹Δ
15. ϝϯςφϯεͮ͠Β͍ • Ͳ͜ʹϩδοΫॻ͍͔ͨΘ͔Βͳ͍໰୊ • ϩδοΫ͕֤ϓϥοτϑΥʔϜͰಉ͔͡ Θ͔Βͳ͍໰୊ • ςετ΋෼ࢄͯ͠͠·͏໰୊ ϓϥοτϑΥʔϜ͝ͱʹػೳࠩҟ ͕ग़ͯ͠·͏Մೳੑ΋…
16. ϓϥοτϑΥʔϜʹΑΒͣ ϩδοΫ͸ڞ௨Ͱ͍͍
17. ࠓॻ͍͍ͯΔϩδοΫ͸ ͳΜͷͨΊͷ΋ͷ ?
18. UI Λ࣮ݱ͢Δ΋ͷ or ͦΕҎ֎
19. ͦΕҎ֎ ?
20. 3૚ΞʔΩςΫνϟʔ
21. 3૚ΞʔΩςΫνϟʔ
22. UI͚ͩͰ׬݁͢Δ ΞϓϦ͸ͳ͍
23. ୯७ͳϙϞυʔϩςΫχοΫλΠϚʔ • ࣌ؒͷΧ΢ϯτμ΢ϯ • 25 ෼ޙʹ௨஌͢Δ
24. ୯७ͳϙϞυʔϩςΫχοΫλΠϚʔ • ࣌ؒͷΧ΢ϯτμ΢ϯ • 25 ෼ޙʹ௨஌͢Δ ϩδοΫ!!
25. Ͳ͏΍ͬͯϩδοΫΛ ݟ͚ͭग़͔͢ ?
26. ϓϩτλΠϓ͔Β ݟ͚ͭग़͢ ͨͱ͑͹
27. 1. ಛఆͷϓϥοτϑΥʔϜͰϓϩτλΠϐϯά ͢Δ 2. ϓϥοτϑΥʔϜ͕มΘͬͯ΋ڞ௨͢Δ෦෼ Λ୳͢ 3. ڞ௨͢Δ෦෼Λ੾Γ෼͚Δ
28. খ͘͞͸͡ΊΔ৔߹͸ ͍͍
29. ϚϧνϓϥοτϑΥʔϜ͕ લఏͷ৔߹ɺଞͷ΍Γํ͕ ͋Γͦ͏
30. Domain Driven Design Φεεϝ
32. 538 ϖʔδ
33. • 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/
34. ݴ༿ ҙຯ υϝΠϯ ϓϩμΫτ͕ղܾ͢΂͖ ໰୊ υϝΠϯϩδοΫ UI ʹΑΒͳ͍ϩδοΫ Ϟσϧ ղܾ͢΂͖໰୊͔Βݟͨ ෺ࣄͷଊ͑ํ υϝΠϯΤΩεύʔτ ໰୊΁ͷ଄ܮ͕ਂ͍ ݸਓɾάϧʔϓ
35. ݴ༿ ҙຯ υϝΠϯ ϓϩμΫτ͕ղܾ͢΂͖ ໰୊ υϝΠϯϩδοΫ UI ʹΑΒͳ͍ϩδοΫ Ϟσϧ ղܾ͢΂͖໰୊͔Βݟͨ ෺ࣄͷଊ͑ํ υϝΠϯΤΩεύʔτ ໰୊΁ͷ଄ܮ͕ਂ͍ ݸਓɾάϧʔϓ
36. υϝΠϯΛද͢૚Λ࡞ͬͯ ͦ͜ʹ஫ྗ͠Α͏
37. ͜ΕͰϩδοΫ͕ ࢄΒ͹Δ৺഑͸ͳ͘ͳͬͨ
38. ͍͔͍ͬ·ͱΊ
39. 3૚ΞʔΩςΫνϟʔ ͓͔ΘΓ ! UI " Domain  Infrastructure
40. ϚϧνϓϥοτϑΥʔϜ ͚ͩͲ React ͰָͰ͖Δ !UI
41. UI ͕௚઀࢖͏ͷͰ JavaScript Ͱॻ͘ "Domain ͨͩ͠ϚϧνϓϥοτϑΥʔϜΛҙࣝ͢Δ Universal JavaScript
42. Infrastructure Ͳ͏͠Α͏?
43. ඞཁͳ΋ͷΛ༻ҙ͢Δ
44. Πϯϑϥ΁ͷཁٻ • σʔλӬଓԽ • σʔλڞ༗ • Web ΞϓϦ഑৴ • αʔόʔαΠυϨϯμϦϯά
45. ͜͏͍ͬͨཁٻ͸ υϝΠϯʹΑͬͯมԽ͢Δ
46. ϙϞυʔϩλΠϚʔ ୯७ͳλΠϚʔͷ৔߹ɺཁٻͳ͠ • +λεΫ؅ཧػೳ • σʔλӬଓԽ • +ιʔγϟϧػೳ • σʔλڞ༗ • +Web ΠϯλʔϑΣΠε • Web ΞϓϦ഑৴
47. ෺ཧ഑ஔͷҰྫ  $ " % & ' ( ) * + Web ΞϓϦ഑৴ σʔλڞ༗ σʔλӬଓԽ
48. ࠓ͸ JS ϑϨϯυϦʔͳબ୒ࢶ ͕ͨ͘͞Μ͋Δ • mBaaS • NoSQL • ؾ߹Ͱࣗલ։ൃ
49. 3૚ΞʔΩςΫνϟʔ ࡾഋ໨ ! UI React = JS " Domain JS  Infrastructure JS friendly
50. React Native ͷొ৔ʹΑͬͯ ࣮ߦ଎౓ɾ։ൃ଎౓ͱ΋ʹݱ࣮తͳ ϚϧνϓϥοτϑΥʔϜ޲͚ JS ελοΫ͕Ͱ͖ͨ
51. ͜ͷ JS ελοΫΛ࢖ͬͯ Ұॹʹ։ൃ͠·ͤΜ͔ ?
52. DDD ͷΠϕϯτͳͲ ΋΍ͬͯ·͢ http://cureapp.connpass.com/ ձ৔Λఏڙͯͩ͘͠͞ΔํΛ୳͍ͯ͠·͢
53. ิ଍
54. DDD ͷ໰୊ղܾ΁ͷ Ξϓϩʔν • ϢϏΩλεݴޠʹΑΔυϝΠϯͷཧղɺ ϞσϧʹΑΔදݱʹॏ͖Λ͓͘ • υϝΠϯΛద੾ʹϞσϧͰදݱͰ͖ ͍ͯΕ͹໰୊΋ղܾ͞ΕΔͱ͍͏ε λϯε • υϝΠϯΤΩεύʔτ͕ଘࡏ͠ͳ͍ ৔߹ ?
55. ໰୊ղܾʹదͨ͠ ํ๏࿦ͷซ༻ • ϢʔβʔετʔϦʔϚοϐϯά • RUNNING LEAN
56. DDDϚωδϝϯτͮ͠Β͍໰୊ • υϝΠϯ஌ࣝͷڞ༗ʹίετ͕͔͔Δ • ํ๏࿦ͱͯ͠ϔϰΟ • มߋ͕ෳ਺ϨΠϠʔʹ೿ੜ͢Δࣄ͕ଟ ͍ • λεΫͷফԽ๨ΕͳͲ͕ͨ·ʹൃੜ ͢Δ
57. DDDΛద༻͢΂͖ϓϩδΣΫτ ͸ݶΒΕΔ • ෳࡶͳυϝΠϯΛ͍࣋ͬͯΔ • ϥΠϑαΠΫϧ͕਺೥ʙͳͲɺ͋Δͯ ͍Ͳͷ௕͞Λ͍࣋ͬͯΔ • νʔϜ͕͋Δఔ౓ DDD ʹ׳Ε͍ͯΔ or ϝϯλʔ͕͍Δ • etc
58. DDDͷ෦෼తͳಋೖ • υϝΠϯ૚Λҙࣝ͢Δ • ϩδοΫΛด͜͡ΊΔΑ͏ʹ͢Δ • υϝΠϯΤΩεύʔτΛνʔϜʹট͘ • υϝΠϯΤΩεύʔτ΋ཧղͰ͖Δ ݴ༿ͰυϝΠϯʹ͍ͭͯ࿩͢ˠϢϏ Ωλεݴޠ • etc
59. DDDϥΠϒϥϦʔͷ࢖༻ • ٕज़తͳ෦෼͸ϥΠϒϥϦʔͷ࢖༻Ͱ ͳΜͱͰ΋ͳΔ • https://github.com/CureApp/base- domain
60. ෼ྨ DDD ઃܭ Ϛωδϝϯτ ໰୊ ղܾ ٕज़త ํ๏࿦ Scrum etc User Story Mapping etc
61. DDD Ͱͷ࣮ߦ଎౓͸? • ૚Λ෼͚͍ͯΔͷͰग़Δ͸͕ͣͳ͍ • ଎౓͕ඞཁͳΒϞϊϦγοΫʹ࡞Δ΂ ͖ • ͱ͸͍͑ msec ୯ҐͰͷ൓Ԡ଎౓͕ཁ ٻ͞ΕΔ৔໘Ͱͳ͚Ε͹໰୊ͳ͍ • ΠϯϑϥετϥΫνϟʔ૚ͷνϡʔ χϯάͰͳΜͱ͔ͳΔ