Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native Matsuri 2021

React Native Matsuri 2021

Takeru Chuganji

October 01, 2021
Tweet

More Decks by Takeru Chuganji

Other Decks in Technology

Transcript

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

    View Slide

  2. Takeru Chuganji
    Software Engineer
    Mercari, Inc.
    chuganzy

    View Slide

  3. View Slide

  4. View Slide

  5. Tokyo
    Japan
    Palo Alto / Portland / Boston
    United States

    View Slide

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

    View Slide

  7. $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

    View Slide

  8. $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

    View Slide

  9. $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
    ৽͍͠
    ίʔυϕʔε

    View Slide

  10. Double
    2017.4-7 RewriteϓϩδΣΫτ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Native Native React Native React Native

    View Slide

  15. Double
    NativeͱReact NativeͷHybridΞϓϦ
    Native
    ϗʔϜ / ݕࡧ /
    ঎඼ৄࡉ / ग़඼ / ߪೖ /
    ΢Σϒ / αΠϯΠϯ ͳͲ
    ϝΠϯ

    ಈత / ύϑΥʔϚϯε
    React
    Native
    ֤छઃఆ / ট଴ /
    औҾ / Ҿ͖མͱ͠ / ݸਓೝূ ͳͲ
    αϒ
    ੩త / ಠཱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. React NativeΞϓϦԽʹ޲͚ͯ
    React NativeΞϓϦԽ͢Δํ๏
    Refactoring

    طଘΞϓϦͷReact Native཰Λ૿΍͍ͯ͘͠
    Rewrite

    ৽نͰΞϓϦΛॻ͖௚͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. Denali
    2021.4- RewriteϓϩδΣΫτ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ඞཁʹԠͯ͡
    ੵۃతʹ
    ॿ͚߹͏

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    εϩʔμ΢ϯ

    View Slide

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

    εϩʔμ΢ϯ
    ϑΣʔζϦϦʔεͷ
    ։࢝
    ෆ۩߹मਖ਼
    100%ϦϦʔε΁ʂ

    View Slide

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

    εϩʔμ΢ϯ
    ϑΣʔζϦϦʔεͷ
    ։࢝
    ෆ۩߹मਖ਼
    100%ϦϦʔε΁ʂ

    View Slide

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

    εϩʔμ΢ϯ
    ϑΣʔζϦϦʔεͷ
    ։࢝
    ෆ۩߹मਖ਼
    100%ϦϦʔε΁ʂ
    νέοτ
    શମͷ60%ۙ͘
    ফԽࡁΈ

    View Slide

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

    View Slide

  52. React Nativeޙ
    ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ
    React NativeίϛϡχςΟ΁ͷߩݙ
    Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ
    “Pods”ʢʹখ͍͞νʔϜʣͰ

    ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ
    ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢

    View Slide

  53. React Nativeޙ
    ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ
    React NativeίϛϡχςΟ΁ͷߩݙ
    Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ
    “Pods”ʢʹখ͍͞νʔϜʣͰ

    ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ
    ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢
    ຖ೔͕
    ϋοΧιϯঢ়ଶʹ
    ͳΔ!?

    View Slide

  54. શ໘తɾੵۃతʹ࠾༻த

    View Slide

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

    View Slide

  56. View Slide