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

ReactNative製iOSAppのNative化への挑戦

 ReactNative製iOSAppのNative化への挑戦

More Decks by 株式会社ビットキー / Bitkey Inc.

Other Decks in Technology

Transcript

  1. ࡈ౻ ঑ޛ Shogo Saito 2016 2019 גࣜձࣾϫʔΫεΞϓϦέʔγϣϯζʹೖࣾ ECύοέʔδͷCMSྖҬͷ։ൃΛ୲౰ ϏοτΩʔʹೖࣾ εϚʔτϑΥϯΞϓϦʮbitlockʯͷ্ཱͪ͛ɾ࣮૷

    Λ୲౰ bitkey platformνʔϜ΁ҟಈ إೝূٕज़Λར༻ͨ͠ΞϓϦέʔγϣϯ։ൃͳͲʹ ܞΘΔ 2021 εϚʔτϑΥϯΞϓϦʮworkhubʯͷ νʔϜϚωʔδϟʔͱͯ͠։ൃʹܞΘΔ 2020
  2. ॳظϩʔϯν࣌ʹ͸༗རʹಇ͘έʔε΋ଟ͍React NativeͰ͋Δ͕ɾɾ
 ɾ࠷৽OS΁ͷ௥ै ɾReact NativeͷVersionUpΛ଴ͨͳ͍ͱiOS / AndroidͷVersionUpʹରԠͰ͖ͳ͍ ɾϥΠϒϥϦ΁ͷڧґଘ ɾiOS /

    Android ͔Β௚ʹఏڙ͞Ε͍ͯΔػೳͷར༻͸ϥΠϒϥϦΛ༻͍ͯͷར༻͕ओͱͳΔ ɾ Bluetooth΍ ΧϝϥىಈɺNFCಡΈऔΓͳͲ΋͜Εʹؚ·ΕΔ ɾBuild͕஗͍ ɾReact Native͕ CocoaPods ͱ͍͏Package Managerʹґଘ͍ͯ͠Δ 9 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
  3. 2. NativeԽͷํ๏࿦ ɾUIKitʁ SwiftUIʁ → (ՄೳͰ͋Ε͹) SwiftUIΛ࠾༻͍ͨ͠ ※ SwiftUI… ɾApple͕WWDC19ʹͯൃදͨ͠ɺReact

    ͳͲͱಉ༷ͷએݴతͳUIߏஙFramework ɾ10/8ݱࡏ, SwiftUI 3 ͱ͍͏ܗͰఏڙ͞Ε͍ͯΔ ɾUIKitͷ׬શޓ׵ʹ͸ࢸ͍ͬͯͳ͍͕ɺࠓޙ΋੝Μʹ։ൃ͕ߦΘΕ͍ͯͩ͘Ζ͏ 26 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
  4. 2. NativeԽͷํ๏࿦ 31 JavaScript React Native Bridge RCTView Manager SwiftUI

    Proxy UIHosting Controller SwiftUI View ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
  5. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲྑ͔ͬͨ఺ #1ʳ ɾReact NativeͰར༻͍ͯͨ͠ϥΠϒϥϦ܈ΛɺiOSଆʹॲཧΛدͤΔ͜ͱͰෆཁʹͰ͖ΔΑ͏ʹͳΓɺ ϘτϧωοΫͱͳ͍ͬͯͨBuild࣌ؒͷ୹ॖΛ࣮ݱɻ ɾFull React Native࣌୅ʹൺ΂Δͱ10෼Ҏ্ͷ୹ॖΛ࣮ݱʂ

    ɾBluetooth΍NFCػೳɺΧϝϥىಈͳͲ֤छiOSʹґଘ͢Δػೳ܈Λ React NativeͷϥΠϒϥϦʹҰ੾པΒ࣮ͣ૷͕Մೳʹͳͬͨ ɾiOSͷUpdateʹ΋௥ैָ͕ʹ (௚ۙͩͱiOS15ରԠ) ɾଞͷiOSϓϩδΣΫτͰར༻͍ͯͨ͠ࢿ࢈ (Swift੡ࣾ಺ϥΠϒϥϦ)Λ׆༻͠΍͘͢ͳͬͨ ɾView͔Β࡞੒Մೳʹͳͬͨ͜ͱͰࢿ࢈׆༻΁ͷϞνϕʔγϣϯΛಘΒΕ΍͘͢ͳͬͨ ɾXcode / SwiftUIͷϓϨϏϡʔػೳͷ׆༻͕Մೳʹ 36
  6. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲਏ͍఺ #2ʳ ɾ1ͭͷը໘Λ࡞Δͷʹରͯ͠ɺهड़ྔ͸Bridgeͷ෼͚ͩͲ͏ͯ͠΋૿͑ͯ͠·͏ ɾSwift ͔ΒReact NativeͷॲཧΛݺͼग़͍ͨ͠৔߹͸໘౗ →React NativeͷViewଆͰeventEmitterΛ࡞੒͠ɺ

    ɹɹɹɹSwift͔Βpublish͢Δ͜ͱͰsubscribeͤ͞ॲཧ࣮ߦͤ͞Δ ɾఆܕతͳهड़܈Λؒҧ͑ͯ͠·ͬͨ৔߹ɺReact Native͔Β͏·͘ݺͼग़ͤͣ ɹɹʮԿ͕߹க͍ͯ͠ͳ͍͕ͨΊʹViewϨϯμϦϯά͞Εͳ͍ͷ͔ʯͷௐࠪʹ͕͔͔࣌ؒͬͯ͠·͏ 40
  7. 4. ࠓޙͷల๬ ɾํ๏࿦ཱ͕֬Ͱ͖͖ͯͨͷͰɺอकੑͷ޲্ͷͨΊSwiftUI΁ͷஔ͖׵͑͸ࠓޙ΋ਵ࣌ߦ͍ͬͯ͘ ɾը໘ / ίϯϙʔωϯτΛSwiftUIͰ࡞੒͢ΔલஈͰඞਢͱͳΔɺObjective-Cهड़ / Proxyʹ͍ͭͯ͸ ɹίʔυͷࣗಈੜ੒Λߦ͏πʔϧΛ࡞੒ͯ͠DXվળΛਤΔ ɾGenesis

    (https://github.com/yonaskolb/Genesis) ɾswift-argument-parser (https://github.com/apple/swift-argument-parser) ɾSwiftଆͷUnitTestͷ֦ॆ ɾγϯϓϧͳMVVMܕ ArchitectureΛ૊ΊΔͷͰɺUnitTest΋ॻ͖΍͘͢ͳͬͨ ɾ࿩୊ͷThe Composable Architecture(TCA)Λ༻͍ͨɺʮSwiftଆͰͷঢ়ଶ؅ཧʯ΁ͷҠߦ 42
  8. 45