Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nature での React Native アプリの運用について / React Native App in Nature
soh335
September 03, 2020
Programming
7
1k
Nature での React Native アプリの運用について / React Native App in Nature
soh335
September 03, 2020
Tweet
Share
More Decks by soh335
See All by soh335
soh335
0
130
soh335
5
2.9k
Other Decks in Programming
See All in Programming
loleg
0
210
nbkouhou
9
4.7k
akatsukinewgrad
0
210
masayaaoyama
4
540
makicamel
1
180
line_developers_tw2
0
110
trajchevska
2
370
attsumi
1
460
canon1ky
3
350
ajstarks
2
550
chichou
1
850
adoranwodo
0
220
Featured
See All Featured
ammeep
656
54k
bryan
30
3.3k
iamctodd
17
1.8k
jonrohan
1021
380k
keavy
106
14k
3n
163
22k
aarron
258
36k
tammielis
237
23k
revolveconf
200
9.6k
bryan
100
11k
edds
56
9.3k
productmarketing
5
660
Transcript
厳秘:本資料の⼀部または全部を、Nature株式会社の許可なしに、複製、転載することを禁じます。 Nature Ͱͷ React Native ΞϓϦͷӡ༻ʹ͍ͭͯ Sep 4. 2020 Nature
Inc. soh335
• github.com/soh335 • Nature גࣜձࣾιϑτΣΞΤϯδχΞ About Me 2
• Nature Remo, νʔϜͷհ • Ҡߦ࣌ͷ • ࠷ۙͷ։ൃͷ • ࠷ۙߟ͑ͯΔ͜ͱ
Agenda 3
Nature Remo, チームの紹介
5
スマートデバイス Nature Remo 家電 How It Works
• ΞϓϦ: 2 • όοΫΤϯυ: 3 • ϑΝʔϜΣΞ: 2 •
߹ܭ 5 ਓ ιϑτΣΞΤϯδχΞνʔϜ 7
• https://employment.en-japan.com/ engineerhub/entry/2020/02/06/103000 • ࢀߟʹͳΔͱࢥ͍·͢ React Native ࣗମʹؔͯ͠ 8
Ҡߦ࣌ͷ
Ҡߦཧ༝ • ೋਓͰ iOS, Android ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕͔ͬͨ͠ • ࣌ • React
Native 0.52.0 • TypeScript 2.6.2 • https://employment.en-japan.com/engineerhub/entry/ 2018/08/17/110000 • 2લʹΠϯλϏϡʔͯ͠Β͍·ͨ͠ 10
͜ͷλΠϛϯάͰσβΠϯ৽ • ೝূ෦ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐͯ͠٧ΊΔͭͱ͔ Android ʹͳ͔ͬ
ͨΓɺٯ͋ΔͷͰ • View पΓ΄΅ίʔυڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 11
ڞ௨ԽͰ͖ͳ͔ͬͨͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δͷ • ύʔϛογϣϯपΓ • Geofence पΓ • ϝʔϥ։͘ͱ͜Ζͱ͔
• ࣌ͳ͔͕ͬͨ Bluetooth पΓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ߹ 12
ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷଓ͕ΕΔ… • Today widget •
https://reactnative.dev/docs/app-extensions 13
࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ • CJKಛ༗ͳͷ • ωΠςΟϒଆͷϏϧυγεςϜ͕৽͞ΕΔͱେม
࠷ۙͷ։ൃͷ
• Visual Studio Code • Xcode • Android Studio •
Emulator ։ൃڥ 16
• React Navigation Λ͍ͬͯΔͷͰ Screen Component ༻ҙͯ͠ • ࠷ۙ hooks
ͬͯॻ͍ͯΔ • ෳࡶͳσβΠϯʹͨ͘͠ͳ͍ͷͰγϯϓϧʹ ৽͍͠ը໘ 17
࠷ۙՃͨ͠ը໘ • άϥϑपΓͷܭࢉ D3 • ඳը react-native-svg
React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱͳ͍͚Ͳ •
Expo SDK ࢀߟʹ 19
ϥΠϒϥϦपΓ • 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
͋͑ͯͬͯͳ͍ͷ • Expo • OTA • Keychain पΓ • GeofenceपΓ
21
Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 22
OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷᐫʹͨ͠ ͘ͳ͍ • ࣗͨͪͰίϯτʔϧͰ͖ͳ͍ͷΛ૿ͨ͘͠ͳ͍ •
࠷ۙ৹ࠪૣ͍ 23
Keychain पΓ • Keychain ͪΌΜͱॻ͘ͷ͕͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess •
ϥοϓͯͬͯ͠Δ 24
Geofence • ΞϓϦͷϩδοΫʹີ • iOS headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android
25
ଞʹ͍Ζ͍Ζ͋Δ • Native ʹߦॻ͚͍͍Α͏ͳͷࣗͨͪͰ༻ҙ͢Δ͜ͱ • ΦϑΟγϟϧ͕ϗετͯ͠ͳ͍ωΠςΟϒϥΠϒϥϦͷϥούʔϥΠϒϥ Ϧ͍͠ 26
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
Fix typescript constructor parameter properties 28 class Employee extends Person
{ constructor(public name: string) { super(); } }
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; }
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> ); } }
Fix some languages wrapped texts are cut off on android
31
ύονΛͯͨReact Native Λ͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ Patched React
Native Λͬͨ 32
iOSͷόά?Λݟ͚ͭͨΓ • iOS12 ͷຊޠڥͰӳޠ͚ͩͷγεςϜϑΥϯτ ͷ จࣈྻʹΧϯϚؚ͕·ΕΔͱṖͷleading ͕ൃੜ͢Δ ͱ͍͏όά • ଟ
iOS ଆ? iOS13 Ͱൃੜ͠ͳ͍ • https://twitter.com/soh335/status/ 1185552921049460737
Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/ 15114
• One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτ Λ͏ͱจࣈྻͷඳը͕͓͔͍͠
࠷ۙߟ͑ͯΔ͜ͱ
࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ iOS, Android, ͲͷαΠζͰಈ͘ͷͰྑ͍ •
ਖ਼ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜنͰ1,2िؒʹҰͷΞοϓσʔτΈ͍ͨͳͷωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 36
࣮ࡍ React Native Ͳ͏? • Web ϑϩϯτΤϯυͬͯͳ͍͠ɺReact ʹڧ͍ݟ͕͋ΔΘ͚Ͱͳ͍ • ਖ਼ෳࡶͳ͜ͱͨ͘͠ͳ͍
• σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ iOS ΑΓ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 37
ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • ඳը่͕ΕΔΈ͍ͨͳͷͦΜͳͳ͍ 38
React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹͳ͍ • पลϥΠϒϥϦͷํ͕? • iOS, Android
ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕ͬͺΓؾʹͳΔ 39
ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕྑ͍͔ • ݁ہνʔϜͷߏʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧؾʹೖͬͯΔ 40
Hermes Ͳ͏ͳΜͰ͠ΐ͏ʁ • JSC ͷ 64bit ରԠ͋ͨΓ͔Βڍಈ͕एׯෆ҆ఆ • ύονͯͯ͘ΕͯΔͷ͕͋ͬͨΓ •
https://github.com/Kudo/jsc-android-buildscript 41
όοΫΤϯυʹؔͯ͠ • CTOͷڈͷొஃͷεϥΠυ͕͋Γ·͢ • https://blog.song.mu/entry/inside-nature-remo 42
࠾༻ͬͯ·͢ • εϚʔτϑΥϯΞϓϦΤϯδχΞ • όοΫΤϯυΤϯδχΞ • ΈࠐΈΤϯδχΞ • ػߏઃܭΤϯδχΞ •
ػցֶशΤϯδχΞ • SRE • https://nature.global/jp/careers 43