React Native in Nature

Transcript

1. Oct 2. 2021
 Soh Kitahara React Native in Nature
2. About Me ࣗݾ঺հ
3. About Me https://github.com/soh33 5 Nature גࣜձࣾιϑτ΢ΣΞΤϯδχΞ 3
4. Agenda • Nature ʹ͍ͭͯ • React Native ΁ͷҠߦ • Ҡߦޙ • ࠷ۙ • ͜Ε͔Β 4
5. About Nature Nature ʹ͍ͭͯ
6. Product
7. Nature Remo
8. How It Works 8 εϚʔτσόΠε Nature Remo Ոి ੺֎ઢ Πϯλʔωοτ
9. Nature Remo E 9
10. Nature Remo E 10 ՈͷΤωϧΪʔΛϚωδϝϯτ ஝ి஑Λίϯτϩʔϧ
11. NatureεϚʔτిؾ 11
12. Nature Smart Eco Mode 12 ΞϓϦ͔ΒON ిؾ୅͕ߴ͘ͳΔ࣌ؒʹ൓Ԡ ΤΞίϯͷԹ౓Λௐઅ 28.0n
13. Migrate to React Native React Native ΁ͷҠߦ
14. Ҡߦཧ༝ • 2ਓͰ iOS, Android, firmware, backend ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉ ͔ͬͨ͠ • ౰࣌ • React Native 0.52. 0 • TypeScript 2.6. 2 • https://employment.en-japan.com/engineerhub/entry/2018/08/17/110000 • 3೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 14
15. ͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 15
16. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • Wi-Fi Λ༻͍ͨηοτΞοϓ • Bluetooth Λ༻͍ͨηοτΞοϓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 16
17. ౰࣌ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗ਎ͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷ઀ଓ͕੾ΕΔ … • Today widge t • https://reactnative.dev/docs/app-extensions 17
18. ౰࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ৅ • CJKಛ༗ͳ΋ͷ΋ • ωΠςΟϒଆͷϏϧυγεςϜ͕࡮৽͞ΕΔͱେม
19. After Migrated Ҡߦޙ
20. openssl 20 • react native -> swift, kotlin ͷ bridge -> openssl ಡΜͰΔ c ͷίʔυ
21. D3 + react-native-svg 21 • άϥϑपΓͷܭࢉ͸ D 3 • ඳը͸ react-native-svg
22. React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱ΋ͳ͍͚Ͳ • Expo SDK ΋ࢀߟʹ 22
23. ϥΠϒϥϦपΓ • react-navigatio n • redux & redux-thunk && redux-persist & imme r • react-native-map s • react-native-ble-manage r • react-native-sv g • react-native-vector-icon s • react-native-linear-gradien t • lottie-react-nativ e • react-native-i18 n • sentr y • etc… 23
24. ͋͑ͯ࢖ͬͯͳ͍΋ͷ • Exp o • OT A • Keychain पΓ • GeofenceपΓ 24
25. Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બ୒ࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 25
26. Nativeʹ਺ߦॻ͚͹ྑ͍ॲཧ • universalLinksOnly option ͕ඞཁͳ Linking.openUR L • Siri Shortcut s • NEHotspotConfiguratio n • Firebase Messaging, Analytics, etc… 26
27. OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷ଍ᐫʹͨ͘͠ ͳ͍ • ࣗ෼ͨͪͰίϯτʔϧͰ͖ͳ͍΋ͷΛ૿΍ͨ͘͠ͳ͍ • ࠷ۙ͸৹ࠪૣ͍ 27
28. Keychain पΓ • Keychain ͸ͪΌΜͱॻ͘ͷ͕೉͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ࢖͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess • ϥοϓͯ͠࢖ͬͯΔ 28
29. Geofence • ΞϓϦͷϩδοΫʹີ઀ • iOS ͸headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android 29
30. React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter propertie s • https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on androi d • https://github.com/facebook/react-native/pull/25306 30
31. ύονΛ౰ͯͨReact Native Λ࢖͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ͸ Patched React Native Λ࢖ͬͨ 31
32. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/15114 • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτΛ࢖͏ ͱจࣈྻͷඳը͕͓͔͍͠ • Roboto Λಉࠝ 32
33. Recently ࠷ۙ
34. Hermes 34 • 64bit ରԠޙ Android ؀ڥͰ libjsc.so ͕ϥϯμϜʹΫϥογϡͯ͠͠· ͏ͱ͍͏ͷ͍ʹ౰࣌೰·͞Ε͍ͯ ͨ • @kudo-ci/jsc-android ʹஔ͖׵͑ͯΈ ͨΓ
35. Hermes 35 https://github.com/facebook/hermes/issues/33
36. Hermes 36
37. Hermes 37
38. Renovate 38
39. Renovate • ؅ཧ͍ͯ͠Δ npm packag e • Podfil e • Gemfile (fastlane, cocoapods ͱ͔ʣ • Gradle 39
40. Renovate 40 "packageRules": [ { "groupName": "react native", "groupSlug": "react-native-deps", "matchPackageNames": [ "react", "react-native", "@babel/core", "@babel/runtime", "@react-native-community/eslint-config", "babel-jest", "eslint", "jest", "metro-react-native-babel-preset", "react-test-renderer", "gradle", … • React Native ຊମʹґଘ͍ͯ͠Δͷ͸ ݸʑ্Βͳ͍Α͏ʹ͢Δͱ͔ • Ұ౓ʹ͋͛Δͱͱʹ͔͘େมͳͷͰ౎ ౓্͍͛ͯ͘
41. Next ͜Ε͔Β
42. Migrating New Design System 42
43. Migrating New Design System 43
44. Migrating New Design System 44
45. Migrating New Design System • Ұ౓ʹશ෦ม͑Δʹ͸ը໘͕ଟ͍ͷͰɺӨڹ͕େ͖͍ίϯτϩʔϧը໘ͷUI͔Βணख • ϕʔεͱͳΔ৭·ΘΓ΋ࠓޙணख͍͖͍ͯͨ͠ • SPAͱͲ͏σβΠϯγεςϜΛڞ༗͢Δ͔Έ͍ͨͳͷ΋͋Δ͔΋͠Εͳ͍ • ໛ࡧதͳͷͰ׬ྃͨ͠Β৭ʑ஌ݟ͕ஷ·Δ͔΋͠Εͳ͍ 45
46. Update react-navigation • ·ͩ v4 ͳͷͰͦΖͦΖ্͍͛ͨ • λϒͷग़͠Θ͚ΛྗٕͰղܾ͍ͯ͠ΔͷΛ΍Ί͍ͨ • ޾ӡͳ͜ͱʹλϒͷύλʔϯ͸͔̏ͭ̐ͭͷೋछྨ • ྆ύλʔϯΛ Component ͱͯ͠࡞ΓɺSwitch Navigator Ͱ੾Γସ͑… 46
47. Update react-navigation 47 <Tab.Navigator> <Tab.Screen name={screens.Control} component={Controls} /> { showEnergy && <Tab.Screen name={screens.Energy} component={Energy} /> } ... </Tab.Navigator>
48. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ • ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 48
49. ࣮ࡍ React Native Ͳ͏? • SPA ͷϨϏϡʔ΋Ͱ͖ΔΑ͏ʹͳ͍ͬͯͨ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 49
50. ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • Local Network ·ΘΓͷڍಈ΋౓ʑมΘ͍ͬͯΔ • ඳը่͕ΕΔΈ͍ͨͳͷ͸΄΅ͳ͍ 50
51. React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕ ? • iOS, Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 51
52. ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕ΋ྑ͍͔΋ • ݁ہνʔϜͷߏ੒ʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑͹ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧ͸ؾʹೖͬͯΔ 52
53. ࠾༻΍ͬͯ·͢ 53 https://nature.global/jp/careers