React Native JSI ソースコードリーディング / React Native JSI source code reading

React Native Matsuri 2021で発表したスライドです。
https://reactnative-matsuri.com/ja

Transcript

1. 3FBDU/BUJWF.BUTVSJ-5
   

   3FBDU/BUJWF
   

   +4*ιʔείʔυϦʔσ
   Οϯά
   
   4IPLFO'VKJTBLJ
   

   View Slide

2. ࣗݾ঺հ
   w 4IPLFO'VKJTBLJ !TIPLFOY
   
   w גࣜձࣾΩονϋΠΫ
   

   ڞಉ૑ۀऀ$50
   w ڞஶ3FBDU/BUJWFʹࢧ͑Β͑Δاۀ
   w ΩονϋΠΫΤϯδχΞνʔϜͰ
   

   ݄ץ3/'FBUVSFT࿈ࡌத
   

   IUUQTUFDILJUDIIJLFDPN
   

   View Slide

3. ࠓճ͸+4*ʹ஫໨ͨ͠
   

   ίʔυϦʔσ
   ΟϯάͰ͢
   

   View Slide

4. ΞδΣϯμ
   3FBSDIJUFDUVSFͱ+4*
   +4*ͷιʔείʔυΛಡΉ
   +4*.PEVMFͷιʔείʔυΛಡΉ
   

   View Slide

5. ΞδΣϯμ
   3FBSDIJUFDUVSFͱ+4*
   +4*ؔ࿈ͷιʔείʔυΛಡΉ
   +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ
   

   View Slide

6. #SJEHF
   $
   
   4IBEPX5ISFBE
   :PHB
   /BUJWF.PEVMFT
   

   +BWB0CK$
   
   +4#VOEMF
   

   +BWB4DSJQU
   
   +4$
   +40/ +40/
   ඇಉظΩϡʔ
   6*5ISFBE
   +45ISFBE
   /BUJWF6*
   

   +BWB0CK$
   
   3FBSDIJUFDUVSFҎલ
   #SJEHF
   

   View Slide

7. #SJEHF
   $
   
   4IBEPX5ISFBE
   :PHB
   /BUJWF.PEVMFT
   

   +BWB0CK$
   
   +4#VOEMF
   

   +BWB4DSJQU
   
   +4$
   +40/ +40/
   ඇಉظΩϡʔ
   6*5ISFBE
   +45ISFBE
   #SJEHF͸ҰͭͳͷͰϘτϧ
   ωοΫʹͳΓ΍͍͢
   ඇಉظͰॲཧ͢ΔͨΊɺىಈ࣌
   ʹશͯಡΈࠐΉඞཁ͕͋Δ
   ૄ݁߹ͳඇಉظॲཧͰྑͦ͞͏͕ͩ
   τϨʔυΦϑ
   ඇಉظͷͨΊɺύϑΥʔϚϯε
   ໰୊ʹͳΔՄೳੑ
   /BUJWF6*
   

   +BWB0CK$
   
   ϨϯμϦϯάߋ৽ʹ#SJEHFɾ
   +45ISFBEͷ௨՟͕ඞཁ
   

   View Slide

8. +4#VOEMF
   

   +BWB4DSJQU
   
   +45ISFBE
   3FBSDIJUFDUVSFҎ߱
   /FX"SDIJUFDUVSFͱ+4*
   +4*
   +47.
   0CKFDUJWF$
   +BWB+/*
   $
   

   View Slide

9. +4#VOEMF
   

   +BWB4DSJQU
   
   +45ISFBE
   3FBSDIJUFDUVSFҎ߱
   /FX"SDIJUFDUVSFͱ+4*
   +4*
   +47.
   /BUJWF.PEVMFT
   

   +BWB0CK$
   
   6*5ISFBE
   /BUJWF6*
   

   +BWB0CK$
   
   

   View Slide

10. +4#VOEMF
    

    +BWB4DSJQU
    
    +45ISFBE
    3FBSDIJUFDUVSFҎ߱
    /FX"SDIJUFDUVSFͱ+4*
    +4*
    +47.
    /BUJWF.PEVMFT
    

    +BWB0CK$
    
    6*5ISFBE
    /BUJWF6*
    

    +BWB0CK$
    
    $
    +40/͕ͳ͘ͳͬͨ
    #SJEHFܦ༝ͷඇಉظॲཧ͔Β
    

    ௚઀ͷಉظॲཧ΁
    $Ͱڞ௨ͷ/BUJWF.PEVMFT
    ͕ॻ͚ΔΑ͏ʹͳͬͨ
    -B[ZMPBEJOH͕Մೳʹ
    

    View Slide

11. ΞδΣϯμ
    3FBSDIJUFDUVSFͱ+4*
    +4*ؔ࿈ͷιʔείʔυΛಡΉ
    +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ
    

    View Slide

12. ೥݄ʹ+4$͔Β+4*΁ͷมߋ͕
    ίϛοτ͞ΕΔ
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFDPNNJUDEFGCCCBGDBCBCE
    3$5$YY#SJEHFͰҎԼͷมߋ
    

    มߋલ+4$&YFDVUPS'BDUPSZ
    มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF
    

    View Slide

13. +4*&YFDVUPS'BDUPSZ
    

    ͱ͍͏ͷ͕ॏཁͦ͏🤔
    

    View Slide

14. 3$5$YY#SJEHFͰҎԼͷมߋ
    

    มߋલ+4$&YFDVUPS'BDUPSZ
    มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF
    

    View Slide

15. ݱࡏͷ3$5$YY#SJEHFNN
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCDEFCECFEFEDBGDGCB3FBDU$YY#SJEHF3$5$YY#SJEHFNN--
    3$5@64&@)&3.&4͕USVFͳΒ
    

    )FSNFT&YFDVUPS'BDUPSZ+4*&YFDVUPS3VOUJNF*OTUBMMFS
    

    GBMTFͳΒ
    

    +4$&YFDVUPS'BDUPSZ+4*&YFDVUPS3VOUJNF*OTUBMMFS
    

    View Slide

16. +4*&YFDVUPS3VOUJNF*OTUBMMFS
    🤔
    

    View Slide

17. )FSNFT&YFDVUPS'BDUPSZI
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$PNNPOIFSNFTFYFDVUPS)FSNFT&YFDVUPS'BDUPSZI
    )FSNFT&YFDVUPS'BDUPSZͷୈҰҾ਺͕
    

    +4*&YFDVUPS3VOUJNF*OTUBMMFS
    

    View Slide

18. 3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$YY#SJEHF3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN
    ίʔυΛಡΜͰΘ͔ͬͨ͜ͱ
    ɾ/BUJWFͱCJOE͍ͯ͠Δ
    ɾSVOUJNFΛ౉ͯ͠ϥοϓͯ͠Δ
    SVOUJNFʹ͸)FSNFTͳͲ+BWB4DSJQU&OHJOF
    ͕ࢀর͞ΕΔɻ
    +4*͸+4&OHJOFͷϥούʔɻ
    

    View Slide

19. +4*ؔ࿈Ϋϥε
    w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPS
    w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFT
    

    View Slide

20. +4*&YFDVUPSDQQ
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPSDQQ
    /BUJWF.PEVMF1SPYZ
    /BUJWF.PEVMFT΁ͷࢀরΛ࣋ͭ
    

    View Slide

21. +4*/BUJWF.PEVMFTDQQ
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFTDQQ
    SVOUJNFHMPCBM
    HFU1SPQFSUZ"T'VODUJPO
    
    

    SVOUJNFHMPCBM
    HFU1SPQFSUZ"T0CKFDU
    
    

    Λݺͼग़ͯ͠࡞੒ͨ͠NPEVMFΛฦ͢
    

    View Slide

22. +4#VOEMF
    

    +BWB4DSJQU
    
    +45ISFBE
    +4*
    +47.
    /BUJWF.PEVMFT
    

    +BWB0CK$
    
    6*5ISFBE
    /BUJWF6*
    

    +BWB0CK$
    
    $
    ͜͜·ͰಡΜͩίʔυ
    KTJ3VOUJNFΦϒδΣΫτ
    

    +4*&YFDVUPS
    

    +4*/BUJWF.PEVMFT
    

    )FSNFT +4$
    )FSNFT&YFDVUPS'BDUPSZ
    +4$&YFDVUPS'BDUPSZ
    3$5+4*&YFDVUPS3VOUJNF*OTUBMMFS
    KTJDQQ
    +4*%ZOBNJDDQQ
    SVOUJNFHMPCBM
    TFU1SPQFSUZ
    
    

    SVOUJNFHMPCBM
    HFU1SPQFSUZ
    
    

    View Slide

23. ίϥϜTFU5JNFPVUͷ࣮૷
    

    View Slide

24. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST
    

    +45JNFSTKT
    /BUJWF5JNJOHͱ͸
    

    View Slide

25. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST
    

    /BUJWF5JNJOHKT
    5SVCP.PEVMFʂ
    

    View Slide

26. SFBDUOBUJWF3FBDU$PSF.PEVMFT
    3$55JNJOHNN
    TFU5JNFPVUͰ࢖ΘΕΔDSFBUF5JNFSͷ
    J04ωΠςΟϒ࣮૷
    

    View Slide

27. TFU5JNFPVU͸5VSCP.PEVMFԽࡁΈ
    

    View Slide

28. ΞδΣϯμ
    3FBSDIJUFDUVSFͱ+4*
    +4*ͷιʔείʔυΛಡΉ
    +4*.PEVMFͷιʔείʔυΛಡΉ
    

    View Slide

29. DSBGU[EPH͞ΜͷSFBDUOBUJWFRVJDLCBTF
    ͷίʔυΛಡΉ
    IUUQTHJUIVCDPNDSBGU[EPHSFBDUOBUJWFRVJDLCBTF
    

    View Slide

30. IUUQTUFDILJUDIIJLFDPNFOUSZSFBDUOBUJWFGFBUVSFT
    •React NativeͷύϑΥʔϚϯεͱɺNULLจࣈΛؚΉόΠφϦจࣈྻΛॲཧͰ͖ͳ͍՝୊
    
    
    •base64 ͰΤϯίʔυ͞Εͨը૾σʔλΛJS ͔ΒReact Native ϒϦοδΛհͯ͠WebView ʹ౉͢ͷ͸
    ৑௕Ͱ͕͔͔࣌ؒΔ
    
    
    •C++ ͰJSI ωΠςΟϒϞδϡʔϧΛ࡞੒ͨ͠
    
    
    •JSI Λ࢖༻͢Δ͜ͱʹΑΓɺJavaScript ͸C++ ϗετΦϒδΣΫτ΁ͷࢀরΛอ࣋͠ɺϝιουΛݺ
    ͼग़͢͜ͱ͕Ͱ͖Δɻ͜ΕʹΑΓɺઌʹड़΂ͨNULLจࣈͷ໰୊Λ࠷ऴతʹճආͰ͖ͨɻ
    

    View Slide

31. ͜ͷลΓͷίʔυΛಡΉ
    

    View Slide

32. DQQCBTFI
    CBTF@FODPEF΍CBTF@EFDPEFͳͲͷ
    ؔ਺͕એݴ͞Ε͍ͯΔɻ࣮૷͸CBTFDQQ
    

    View Slide

33. DQQSFBDUOBUJWFRVJDLCBTFDQQ
    ࣮ࡍͷ+4*όΠϯσΟϯάॲཧɻ
    +BWB4DSJQU΁౉͢஋ΛKTJ7BMVFͱͯ͠࡞੒
    JOTUBMM#BTFؔ਺ͷ࣮૷
    +BWB4DSJQUͷάϩʔόϧ +BWB4DSJQUͰ࢖͑ΔϓϩύςΟʢؔ਺ʣ
    

    View Slide

34. JPT2VJDL#BTFNN
    +4*όΠϯσΟϯάެ։༻ʹ
    

    3FBDU3$5#SJEHF1SJWBUFϔομʔϑΝΠϧΛΠϯϙʔτ
    DYY#SJEHFSVOUJNF΁ͷࢀরΛऔಘɻ
    $ίʔυ಺Ͱૢ࡞༻ͷ+BWB4DSJQU7BMVFTΛ
    ࡞੒͢ΔͨΊʹඞཁͳSVOUJNFΦϒδΣΫτ
    SVOUJNFΛJOTUBMM#BTFؔ਺ʹ౉͠
    ͯɺ+4*όΠϯσΟϯάΛ࡞੒
    

    View Slide

35. JOEFYUTͰؔ਺όΠϯσΟϯάΛએݴ
    DQQͰKTJ3VOUJNFHMPCBM
    TFU1SPQFSUZ
    ͨؔ͠਺
    FYQPSUGVODUJPO
    

    View Slide

36. "QQUTYͰJNQPSU
    FYQPSUͨ͠GVODUJPO
    

    View Slide

37. +4#VOEMF
    

    +BWB4DSJQU
    
    +45ISFBE
    +4*
    +47.
    /BUJWF.PEVMFT
    

    +BWB0CK$
    
    6*5ISFBE
    /BUJWF6*
    

    +BWB0CK$
    
    $
    CBTFI DQQ
    
    

    SFBDUOBUJWFRVJDLCBTFI DQQ
    
    2VJDL#BTFI NN
    
    ·ͱΊ
    KTJ3VOUJNFΦϒδΣΫτ
    

    +4*&YFDVUPS
    

    +4*/BUJWF.PEVMFT
    

    )FSNFT +4$
    )FSNFT&YFDVUPS'BDUPSZ
    +4$&YFDVUPS'BDUPSZ
    3$5+4*&YFDVUPS3VOUJNF*OTUBMMFS
    KTJDQQ
    +4*%ZOBNJDDQQ
    

    View Slide

38. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ΩονϋΠΫςοΫϒϩάͰ
    

    3FBDU/BUJWF࠷৽৘ใΛ࿈ࡌத
    

    IUUQTUFDILJUDIIJLFDPN
    

    View Slide