Tweet
Tweet

Slide 1

Slide 1 text

Takeru Chuganji 2021/10/02 10:10‐10:50 ϝϧΧϦUS͕ϞόΠϧΞϓϦΛ React NativeͰ࡞Γ௚͍ͯ͠Δ࿩ React Native Matsuri 2021

Slide 2

Slide 2 text

Takeru Chuganji Software Engineer Mercari, Inc. chuganzy

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Tokyo Japan Palo Alto / Portland / Boston United States

Slide 6

Slide 6 text

Tokyo Japan Palo Alto / Portland / Boston United States ϑϧ ϦϞʔτԽ

Slide 7

Slide 7 text

$15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021

Slide 8

Slide 8 text

$15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021 Objective-C, Swift, Java Swift, Java, Kotlin, React Native

Slide 9

Slide 9 text

$15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021 Objective-C, Swift, Java Swift, Java, Kotlin, React Native ৽͍͠ ίʔυϕʔε

Slide 10

Slide 10 text

Double 2017.4-7 RewriteϓϩδΣΫτ

Slide 11

Slide 11 text

Double 2017.4-7 RewriteϓϩδΣΫτ ϏδωεࢦඪΛ “ഒ”ʹ͢Δ

Slide 12

Slide 12 text

Double Rewriteͷഎܠ US൛ϝϧΧϦΛࠜຊ͔Βߟ͑௚͠୹ظؒͰ࣮ݱ͢Δ US։ൃνʔϜͷ೔ຊνʔϜ͔Βͷಠཱ ٕज़ελοΫΛ࡮৽͠DXΛ޲্ͤ͞Δ US։ൃνʔϜͷΧϧνϟʔ࠶ߏஙɹͳͲ

Slide 13

Slide 13 text

ϗʔϜ ঎඼ৄࡉ ϓϩϑΟʔϧ ϨϏϡʔ

Slide 14

Slide 14 text

Native Native React Native React Native

Slide 15

Slide 15 text

Double NativeͱReact NativeͷHybridΞϓϦ Native ϗʔϜ / ݕࡧ / ঎඼ৄࡉ / ग़඼ / ߪೖ / ΢Σϒ / αΠϯΠϯ ͳͲ ϝΠϯ
 ಈత / ύϑΥʔϚϯε React Native ֤छઃఆ / ট଴ / औҾ / Ҿ͖མͱ͠ / ݸਓೝূ ͳͲ αϒ ੩త / ಠཱ

Slide 16

Slide 16 text

Double React NativeΛ࠾༻ͨ͠ཧ༝ ୯७ʹNative͚ͩͰ΍Δ ࣌ؒͱ ਓ͕଍Γͳ͔ͬͨ ։ൃظؒ 3ϲ݄ AndroidΤϯδχΞ 4ਓ iOSΤϯδχΞ 4ਓ

Slide 17

Slide 17 text

Double React NativeΛ࠾༻ͨ͠ཧ༝ ୯७ʹNative͚ͩͰ΍Δ ࣌ؒͱ ਓ͕଍Γͳ͔ͬͨ ։ൃظؒ 3ϲ݄ AndroidΤϯδχΞ 4ਓ iOSΤϯδχΞ 4ਓ ͦͷଞͷJavaScriptॻ͚Δਓ 4-6ਓ

Slide 18

Slide 18 text

Double Ϗδωεͷ੒௕ ϦϒϥϯσΟϯά Χʔτ ਅآೝূ Uberఏܞ഑ૹ ޙ෷͍ܾࡁɹͳͲ ʴ ਺ଟͷABςετ ྲྀ௨૯ֹ

Slide 19

Slide 19 text

Double Ϗδωεͷ੒௕ ϦϒϥϯσΟϯά Χʔτ ਅآೝূ Uberఏܞ഑ૹ ޙ෷͍ܾࡁɹͳͲ ʴ ਺ଟͷABςετ ྲྀ௨૯ֹ ଞʹ΋ ΍Γ͍ͨ͜ͱ͕ ࢁ΄Ͳʂ

Slide 20

Slide 20 text

Double Ұํ։ൃ໘Ͱ͸… ࠾༻೉ ߴΦϯϘʔσΟϯάίετ ߴίϛϡχέʔγϣϯίετ ߴϝϯςφϯείετ ߴϏϧυ࣌ؒ εϧʔϓοτʢงғؾʣ

Slide 21

Slide 21 text

Double Ұํ։ൃ໘Ͱ͸… ࠾༻೉ ߴΦϯϘʔσΟϯάίετ ߴίϛϡχέʔγϣϯίετ ߴϝϯςφϯείετ ߴϏϧυ࣌ؒ εϧʔϓοτʢงғؾʣ Scalabilityʹ ໰୊͋Γ

Slide 22

Slide 22 text

Double ঢ়گվળͷͨΊʹ 1ϓϥοτϑΥʔϜͷΈͰͷABςετ ڞ௨ϩδοΫͷNative ModuleԽ Πϯϑϥͷվળ Ϗϧυͷߴ଎Խ

Slide 23

Slide 23 text

Double ঢ়گվળͷͨΊʹ React NativeΞϓϦ ʹͨ͠Β͍͍ͷͰ͸ʁ ʢ2019/4ʣ 1ϓϥοτϑΥʔϜͷΈͰͷABςετ ڞ௨ϩδοΫͷNative ModuleԽ Πϯϑϥͷվળ Ϗϧυͷߴ଎Խ

Slide 24

Slide 24 text

React NativeΞϓϦԽʹ޲͚ͯ React NativeΞϓϦԽ͢Δํ๏ Refactoring
 طଘΞϓϦͷReact Native཰Λ૿΍͍ͯ͘͠ Rewrite
 ৽نͰΞϓϦΛॻ͖௚͢

Slide 25

Slide 25 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த Rewrite ઈେ

Slide 26

Slide 26 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ Rewrite ઈେ େ

Slide 27

Slide 27 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ Rewrite ઈେ େ 1೥

Slide 28

Slide 28 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ େ Rewrite ઈେ େ 1೥ த

Slide 29

Slide 29 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

Slide 30

Slide 30 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

Slide 31

Slide 31 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

Slide 32

Slide 32 text

React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓ Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த React Native ΞϓϦԽࣗମ͕ ΰʔϧͰ͸ͳ͍

Slide 33

Slide 33 text

React NativeΞϓϦԽʹ޲͚ͯ ͦ΋ͦ΋Ͱ͖Δͷ͔ʁ ࣮ݧΞϓϦ։ൃ / ٕज़ݕূ React NativeΛ࢖͍ͬͯΔձࣾ΁ͷώϠϦϯά React / Native྆ํͷ๛෋ͳ஌ࣝ ҆શͳϦϦʔεϓϥϯχϯά ଞΫϩεϓϥοτϑΥʔϜٕज़ͱͷൺֱɹͳͲ

Slide 34

Slide 34 text

React NativeΞϓϦԽʹ޲͚ͯ Flutterͱͷൺֱ طʹReact Nativeͷ஌͕ࣝ͋Δ JavaScript ύϑΥʔϚϯε΋े෼ʹΑ͘վળͷ༧ఆ͢Β͋Δ WebରԠ

Slide 35

Slide 35 text

Denali 2021.4- RewriteϓϩδΣΫτ

Slide 36

Slide 36 text

Denali 2021.4- RewriteϓϩδΣΫτ ΞϝϦΧͰ Ұ൪ߴ͍ࢁ

Slide 37

Slide 37 text

Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ

Slide 38

Slide 38 text

Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ

Slide 39

Slide 39 text

Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ …

Slide 40

Slide 40 text

Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ … ඞཁʹԠͯ͡ ੵۃతʹ ॿ͚߹͏

Slide 41

Slide 41 text

Denali ٕज़ελοΫ TypeScript Expo Redux Toolkit React Navigation fastlane Protocol Buffers Sentry ͳͲ GitHub Actions

Slide 42

Slide 42 text

Denali ൓লΛੜ͔ٕͨ͠ज़ํ਑ “؆୯” ͳίʔυΛॻ͘ υΩϡϝϯτΛੵۃతʹΞοϓσʔτ ࣾ಺ษڧձʢDiscussionʣΛຖि։࠵ σβΠϯγεςϜΛશ໘దԠ

Slide 43

Slide 43 text

Denali εέʔϧ͍ͯ͠Δ։ൃ ݩWebνʔϜϝϯόʔ ݩAPIνʔϜϝϯόʔ ݱiOS / AndroidνʔϜϝϯόʔ NativeະܦݧΤϯδχΞ࠾༻ ۀ຿ҕୗɹͳͲͷίϯτϦϏϡʔτ εϧʔϓοτʢงғؾʣ

Slide 44

Slide 44 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

Slide 45

Slide 45 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠

Slide 46

Slide 46 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝

Slide 47

Slide 47 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ

Slide 48

Slide 48 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ

Slide 49

Slide 49 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ

Slide 50

Slide 50 text

Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4 ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ νέοτ શମͷ60%ۙ͘ ফԽࡁΈ

Slide 51

Slide 51 text

2022 AndroidϩʔϧΞ΢τ։࢝༧ఆʂ

Slide 52

Slide 52 text

React Nativeޙ ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ React NativeίϛϡχςΟ΁ͷߩݙ Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ “Pods”ʢʹখ͍͞νʔϜʣͰ
 ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢

Slide 53

Slide 53 text

React Nativeޙ ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ React NativeίϛϡχςΟ΁ͷߩݙ Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ “Pods”ʢʹখ͍͞νʔϜʣͰ
 ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢ ຖ೔͕ ϋοΧιϯঢ়ଶʹ ͳΔ!?

Slide 54

Slide 54 text

શ໘తɾੵۃతʹ࠾༻த

Slide 55

Slide 55 text

We are hiring! શΤϯδχΞੵۃ࠾༻த US / JPͱ΋ʹ࠾༻த React Native Engineer iOS Engineer Android Engineer API EngineerɹͳͲͳͲ

Slide 56

Slide 56 text

No content