Web開発者が React Nativeで 開発から本番運用までして辛かった事

ReactNativeMeetup #5 LT

https://react-native-meetup.connpass.com/event/53572/?utm_campaign=event_waitlist_promotion_to_participant&utm_source=notifications&utm_medium=email&utm_content=detail_btn

Transcript

1. Web։ൃऀ͕
   React NativeͰ
   ։ൃ͔Βຊ൪ӡ
   ༻·Ͱͯ͠ਏ͔ͬ
   ͨࣄ
   @DotEarl / Togetter Inc.
   

   View Slide

2. ͋ʔΔ@DotEarl
   Togetter Inc.
   

   View Slide

3. ωΠςΟϒΞϓϦͷ։ൃܦݧ͋Γ·ͤΜ
   ͣͬͱWebଆͷਓؒͰ
   

   View Slide

4. ͠ͳ͍࿩
   ٕज़తͳ࿩
   

   View Slide

5. ͢Δ࿩
   ਏ͍࿩
   

   View Slide

6. πΠʔτ·ͱΊΔ΍ͭ
   τΡΪϟολʔͱ͸ʁ
   

   View Slide

7. ڈ೥ReactNative
   Ͱ࡞Γ௚ͯ͠
   ϦϦʔεʂ
   

   View Slide

8. ڈ೥ReactNative
   Ͱ࡞Γ௚ͯ͠
   ϦϦʔεʂ
   چόʔδϣϯ͸
   Titanium੡Ͱ
   ແ͔ͬͨ͜ͱʹ͞Εͨ
   

   View Slide

9. ਏ͔ͬͨࣄ
   

   View Slide

10. ޿ࠂSDKͷ૊ΈࠐΈ
    

    View Slide

11. FB޿ࠂΛ૊ΈࠐΈ͍ͨ
    ޿ࠂSDKͷ૊ΈࠐΈ
    

    View Slide

12. FB޿ࠂΛ૊ΈࠐΈ͍ͨ
    ͍͍ײ͡ͷύοέʔδ͕ݟ͔ͭΒͳ͍
    ޿ࠂSDKͷ૊ΈࠐΈ
    

    View Slide

13. FB޿ࠂΛ૊ΈࠐΈ͍ͨ
    ͍͍ײ͡ͷύοέʔδ͕ݟ͔ͭΒͳ͍
    ݁ہɺࣗ෼ͰBridgeΛॻ͍࣮ͯ૷ͨ͠
    ޿ࠂSDKͷ૊ΈࠐΈ
    

    View Slide

14. JS͚ͩͰॻ͚Δͱݴͬͯ΋
    ωΠςΟϒଆͷίʔυΛ৮Β͟Δ
    ಘͳ͍ঢ়گ΋͋Δɻ
    

    View Slide

15. Java…
    

    View Slide

16. Objective-C ??
    Objective-C ??
    Objective-C ??
    

    View Slide

17. ਏ͍
    

    View Slide

18. RNຊମͷΞοϓάϨʔυ
    

    View Slide

19. RNຊମͷΞοϓάϨʔυ
    $ react-native-git-upgrade
    

    View Slide

20. RNຊମͷΞοϓάϨʔυ
    $ react-native-git-upgrade
    ίϯϑϦΫτղফ͕ΊΜͲ͍͘͞
    

    View Slide

21. RNຊମͷΞοϓάϨʔυ
    $ react-native-git-upgrade
    ίϯϑϦΫτղফ͕ΊΜͲ͍͘͞
    Ұؾʹόʔδϣϯ্͛ΔͱେମϏϧυམͪΔ…
    

    View Slide

22. ຊମόʔδϣϯ͸͜·Ίʹ௥ै͠
    ͔ͯͳ͍ͱޙͰਏ͍͜ͱʹͳΔ
    

    View Slide

23. ຊମόʔδϣϯ͸͜·Ίʹ௥ै͠
    ͔ͯͳ͍ͱޙͰਏ͍͜ͱʹͳΔ
    όʔδϣϯ্͛Δͱಈ͔ͳ͘ͳΔ
    Ϟδϡʔϧ͕ग़͖ͯͯɺ͍ͦͭͷ
    ରԠ͕஗͍͜ͱ͕͋ΔͷͰਏ͍
    

    View Slide

24. Τϥʔ͸Issueݕࡧ͢Ε͹
    େମݟ͔ͭΔ͕
    

    View Slide

25. Τϥʔ͸Issueݕࡧ͢Ε͹
    େମݟ͔ͭΔ͕
    ݪҼෆ໌ͳϏϧυΤϥʔ͸ɹ
    ωΠςΟϒͷ஌͕ࣝઙ͍ͱ
    ಛఆ͕ۤߦ
    

    View Slide

26. ΞοϓάϨʔυ͸ؾ߹
    ݁࿦
    

    View Slide

27. ਏ͍
    

    View Slide

28. ͦͷଞ
    ʢ։ൃ౰࣌ʣ
    ɾϓογϡ௨஌
    ɾWebView
    ҆ఆ͠ͳ͔ͬͨͷͰࣗ෼ͨͪͰ௚ͨ͠
    

    View Slide

29. خ͍͠ࣄ΋͋ΔΑʂ
    

    View Slide

30. ɾWebײ֮ͰΞϓϦ͕࡞ΕΔ
    ɾެ։͞ΕͯΔػೳͰେମͳΜͰ΋࣮૷Ͱ͖Δ
    ɾ࣮ࡍWeb։ൃऀ͚ͩͰϝϯςͰ͖ͯΔ
    

    View Slide

31. ·ͱΊ
    ɾ೉͍͠ࣄ͢ΔͳΒଟগ͸ωΠςΟϒͷ஌͕ࣝඞཁ
    ɾຊମͷόʔδϣϯΞοϓ͸͜·Ίʹ
    ɾͪΌΜͱϝϯς͞ΕͯΔϞδϡʔϧΛ࢖͏
    ɾָ͍͠
    

    View Slide

32. ਏ͍͜ͱ
    ΋͏Ұͭ͋ͬͨ
    

    View Slide

33. View Slide

34. WantedlyͰืूͯ͠·͢ʂ
    

    View Slide

35. Thank you.
    

    View Slide