Nature での React Native アプリの運用について / React Native App in Nature

Transcript

1. 厳秘：本資料の⼀部または全部を、Nature株式会社の許可なしに、複製、転載することを禁じます。 Nature Ͱͷ React Native ΞϓϦͷӡ༻ʹ͍ͭͯ Sep 4. 2020 Nature Inc. soh335
2. • github.com/soh335 • Nature גࣜձࣾιϑτ΢ΣΞΤϯδχΞ About Me 2
3. • Nature Remo, νʔϜͷ঺հ • Ҡߦ࣌ͷ࿩ • ࠷ۙͷ։ൃͷ࿩ • ࠷ۙߟ͑ͯΔ͜ͱ Agenda 3
4. Nature Remo, チームの紹介
6. スマートデバイス Nature Remo 家電 How It Works
7. • ΞϓϦ: 2 • όοΫΤϯυ: 3 • ϑΝʔϜ΢ΣΞ: 2 • ߹ܭ 5 ਓ ιϑτ΢ΣΞΤϯδχΞνʔϜ 7
8. • https://employment.en-japan.com/ engineerhub/entry/2020/02/06/103000 • ࢀߟʹͳΔͱࢥ͍·͢ React Native ࣗମʹؔͯ͠ 8
9. Ҡߦ࣌ͷ࿩
10. Ҡߦཧ༝ • ೋਓͰ iOS, Android ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉͔ͬͨ͠ • ౰࣌ • React Native 0.52.0 • TypeScript 2.6.2 • https://employment.en-japan.com/engineerhub/entry/ 2018/08/17/110000 • 2೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 10
11. ͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 11
12. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • ϝʔϥ։͘ͱ͜Ζͱ͔ • ౰࣌͸ͳ͔͕ͬͨ Bluetooth पΓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 12
13. ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗ਎ͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷ઀ଓ͕੾ΕΔ… • Today widget • https://reactnative.dev/docs/app-extensions 13
14. ౰࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ৅ • CJKಛ༗ͳ΋ͷ΋ • ωΠςΟϒଆͷϏϧυγεςϜ͕࡮৽͞ΕΔͱେม
15. ࠷ۙͷ։ൃͷ࿩
16. • Visual Studio Code • Xcode • Android Studio • Emulator ։ൃ؀ڥ 16
17. • React Navigation Λ࢖͍ͬͯΔͷͰ Screen Component ༻ҙͯ͠ • ࠷ۙ͸ hooks ΋࢖ͬͯॻ͍ͯΔ • ෳࡶͳσβΠϯʹͨ͘͠ͳ͍ͷͰγϯϓϧʹ ৽͍͠ը໘ 17
18. ࠷ۙ௥Ճͨ͠ը໘ • άϥϑपΓͷܭࢉ͸ D3 • ඳը͸ react-native-svg
19. React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱ΋ͳ͍͚Ͳ • Expo SDK ΋ࢀߟʹ 19
20. ϥΠϒϥϦपΓ • react-navigation • redux & redux-persist & immer • react-native-maps • react-native-ble-manager • react-native-svg • react-native-vector-icons • react-native-linear-gradient • lottie-react-native • sentry 20
21. ͋͑ͯ࢖ͬͯͳ͍΋ͷ • Expo • OTA • Keychain पΓ • GeofenceपΓ 21
22. Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બ୒ࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 22
23. OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷ଍ᐫʹͨ͠ ͘ͳ͍ • ࣗ෼ͨͪͰίϯτʔϧͰ͖ͳ͍΋ͷΛ૿΍ͨ͘͠ͳ͍ • ࠷ۙ͸৹ࠪૣ͍ 23
24. Keychain पΓ • Keychain ͸ͪΌΜͱॻ͘ͷ͕೉͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ࢖͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess • ϥοϓͯ͠࢖ͬͯΔ 24
25. Geofence • ΞϓϦͷϩδοΫʹີ઀ • iOS ͸headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android 25
26. ଞʹ΋͍Ζ͍Ζ͋Δ • Native ʹ਺ߦॻ͚͹͍͍Α͏ͳ΋ͷ͸ࣗ෼ͨͪͰ༻ҙ͢Δ͜ͱ΋ • ΦϑΟγϟϧ͕ϗετͯ͠ͳ͍ωΠςΟϒϥΠϒϥϦͷϥούʔϥΠϒϥ Ϧ೉͍͠ 26
27. React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter properties • https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on android • https://github.com/facebook/react-native/pull/25306 27
28. Fix typescript constructor parameter properties 28 class Employee extends Person { constructor(public name: string) { super(); } }
29. Fix typescript constructor parameter properties 29 function Employee(name) { _classCallCheck(this, Employee); return _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); } function Employee(name) { var _this; _classCallCheck(this, Employee); _this = _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); _this.name = name; return _this; }
30. Fix some languages wrapped texts are cut off on android 30 export default class App extends React.Component { render() { return ( <View style={{marginTop: 30}}> <Text>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> </View> ); } }
31. Fix some languages wrapped texts are cut off on android 31
32. ύονΛ౰ͯͨReact Native Λ࢖͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ͸ Patched React Native Λ࢖ͬͨ 32
33. iOSͷόά?Λݟ͚ͭͨΓ • iOS12 ͷ೔ຊޠ؀ڥͰӳޠ͚ͩͷγεςϜϑΥϯτ ͷ จࣈྻʹΧϯϚؚ͕·ΕΔͱṖͷleading ͕ൃੜ͢Δ ͱ͍͏όά • ଟ෼ iOS ଆ? iOS13 Ͱ͸ൃੜ͠ͳ͍ • https://twitter.com/soh335/status/ 1185552921049460737
34. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/ 15114 • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτ Λ࢖͏ͱจࣈྻͷඳը͕͓͔͍͠
35. ࠷ۙߟ͑ͯΔ͜ͱ
36. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ • ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 36
37. ࣮ࡍ React Native Ͳ͏? • Web ϑϩϯτΤϯυ΍ͬͯͳ͍͠ɺReact ʹڧ͍஌ݟ͕͋ΔΘ͚Ͱ͸ͳ͍ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 37
38. ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • ඳը่͕ΕΔΈ͍ͨͳͷ͸ͦΜͳͳ͍ 38
39. React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕? • iOS, Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 39
40. ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕ΋ྑ͍͔΋ • ݁ہνʔϜͷߏ੒ʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑͹ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧ͸ؾʹೖͬͯΔ 40
41. Hermes Ͳ͏ͳΜͰ͠ΐ͏ʁ • JSC ͷ 64bit ରԠ͋ͨΓ͔Βڍಈ͕एׯෆ҆ఆ • ύον౰ͯͯ͘ΕͯΔͷ͕͋ͬͨΓ • https://github.com/Kudo/jsc-android-buildscript 41
42. όοΫΤϯυʹؔͯ͠ • CTOͷڈ೥ͷొஃͷεϥΠυ͕͋Γ·͢ • https://blog.song.mu/entry/inside-nature-remo 42
43. ࠾༻΍ͬͯ·͢ • εϚʔτϑΥϯΞϓϦΤϯδχΞ • όοΫΤϯυΤϯδχΞ • ૊ΈࠐΈΤϯδχΞ • ػߏઃܭΤϯδχΞ • ػցֶशΤϯδχΞ • SRE • https://nature.global/jp/careers 43