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
2. 
   
   
   
   
   
   
   
   ࣗݾ঺հ w 4IPLFO
   'VKJTBLJ
   
   !TIPLFOY
   
   
   w גࣜձࣾΩονϋΠΫ 
 ڞಉ૑ۀऀ
   $50
   w ڞஶ
   
   3FBDU
   /BUJWFʹࢧ͑Β͑Δاۀ
   w ΩονϋΠΫΤϯδχΞνʔϜͰ 
 ݄ץ
   3/
   'FBUVSFT
   ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN
3. ࠓճ͸+4*ʹ஫໨ͨ͠ 
 ίʔυϦʔσ ΟϯάͰ͢
4. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*
    +4*ͷιʔείʔυΛಡΉ
    +4*
   .PEVMFͷιʔείʔυΛಡΉ
5. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*
    +4*ؔ࿈ͷιʔείʔυΛಡΉ
    +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ
6. #SJEHF
   $ 4IBEPX
   5ISFBE :PHB /BUJWF
   .PEVMFT 

   +BWB
   
   0CK
   $
   +4
   #VOEMF 

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

   +BWB
   
   0CK
   $
   3FBSDIJUFDUVSFҎલ
   #SJEHF
7. #SJEHF
   $ 4IBEPX
   5ISFBE :PHB /BUJWF
   .PEVMFT 

   +BWB
   
   0CK
   $
   +4
   #VOEMF 

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

   +BWB
   
   0CK
   $
   ϨϯμϦϯάߋ৽ʹ#SJEHFɾ +4
   5ISFBEͷ௨՟͕ඞཁ
8. +4
   #VOEMF 

   +BWB4DSJQU
   +4
   5ISFBE 3FBSDIJUFDUVSFҎ߱
   /FX
   "SDIJUFDUVSFͱ+4* +4* +4
   7. 0CKFDUJWF$ +BWB
   
   +/* $
9. +4
   #VOEMF 

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

   +BWB
   
   0CK
   $
   6*
   5ISFBE /BUJWF
   6* 

   +BWB
   
   0CK
   $
   
10. +4
    #VOEMF 

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

    +BWB
    
    0CK
    $
    6*
    5ISFBE /BUJWF
    6* 

    +BWB
    
    0CK
    $
    $ +40/͕ͳ͘ͳͬͨ #SJEHFܦ༝ͷඇಉظॲཧ͔Β 
 ௚઀ͷಉظॲཧ΁ $ Ͱڞ௨ͷ/BUJWF
    .PEVMFT ͕ॻ͚ΔΑ͏ʹͳͬͨ -B[Z
    MPBEJOH͕Մೳʹ
11. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*
     +4*ؔ࿈ͷιʔείʔυΛಡΉ
     +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ
12. ೥݄ʹ+4$͔Β+4*΁ͷมߋ͕ ίϛοτ͞ΕΔ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFDPNNJUDEFGCCCBGDBCBCE 3$5$YY#SJEHFͰҎԼͷมߋ 
 มߋલ
    
    +4$&YFDVUPS'BDUPSZ
    มߋޙ
    
    +4*&YFDVUPS'BDUPSZ
    
    +4$3VOUJNF
13. +4*&YFDVUPS'BDUPSZ 
 ͱ͍͏ͷ͕ॏཁͦ͏
    🤔
14. 3$5$YY#SJEHFͰҎԼͷมߋ 
 มߋલ
    
    +4$&YFDVUPS'BDUPSZ
    มߋޙ
    
    +4*&YFDVUPS'BDUPSZ
    
    +4$3VOUJNF
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
16. +4*&YFDVUPS3VOUJNF*OTUBMMFS
    
    🤔
17. )FSNFT&YFDVUPS'BDUPSZI IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$PNNPOIFSNFTFYFDVUPS)FSNFT&YFDVUPS'BDUPSZI )FSNFT&YFDVUPS'BDUPSZͷୈҰҾ਺͕ 
 +4*&YFDVUPS3VOUJNF*OTUBMMFS
18. 3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$YY#SJEHF3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN ίʔυΛಡΜͰΘ͔ͬͨ͜ͱ
    ɾ/BUJWFͱCJOE͍ͯ͠Δ
    ɾSVOUJNF
    Λ౉ͯ͠ϥοϓͯ͠Δ
    SVOUJNFʹ͸)FSNFTͳͲ+BWB4DSJQU
    &OHJOF ͕ࢀর͞ΕΔɻ
    +4*͸+4
    &OHJOFͷϥούʔɻ
    
19. +4*ؔ࿈Ϋϥε w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPS
    w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFT
20. +4*&YFDVUPSDQQ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPSDQQ /BUJWF.PEVMF1SPYZ /BUJWF.PEVMFT΁ͷࢀরΛ࣋ͭ
21. +4*/BUJWF.PEVMFTDQQ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFTDQQ SVOUJNFHMPCBM HFU1SPQFSUZ"T'VODUJPO 
 SVOUJNFHMPCBM HFU1SPQFSUZ"T0CKFDU 
 Λݺͼग़ͯ͠࡞੒ͨ͠
    NPEVMF
    Λฦ͢
22. +4
    #VOEMF 

    +BWB4DSJQU
    +4
    5ISFBE +4* +4
    7. /BUJWF
    .PEVMFT 

    +BWB
    
    0CK
    $
    6*
    5ISFBE /BUJWF
    6* 

    +BWB
    
    0CK
    $
    $ ͜͜·ͰಡΜͩίʔυ 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
23. ίϥϜ
    
    TFU5JNFPVUͷ࣮૷
24. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST 
 +45JNFSTKT
    /BUJWF5JNJOHͱ͸
25. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST 
 /BUJWF5JNJOHKT
    5SVCP.PEVMFʂ
26. SFBDUOBUJWF3FBDU$PSF.PEVMFT 3$55JNJOHNN
    TFU5JNFPVUͰ࢖ΘΕΔDSFBUF5JNFSͷ J04ωΠςΟϒ࣮૷
27. TFU5JNFPVU͸5VSCP.PEVMFԽࡁΈ
28. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*
     +4*ͷιʔείʔυΛಡΉ
     +4*
    .PEVMFͷιʔείʔυΛಡΉ
29. DSBGU[EPH͞ΜͷSFBDUOBUJWFRVJDLCBTF
    ͷίʔυΛಡΉ IUUQTHJUIVCDPNDSBGU[EPHSFBDUOBUJWFRVJDLCBTF
30. IUUQTUFDILJUDIIJLFDPNFOUSZSFBDUOBUJWFGFBUVSFT •React NativeͷύϑΥʔϚϯεͱɺNULLจࣈΛؚΉόΠφϦจࣈྻΛॲཧͰ͖ͳ͍՝୊ •base64 ͰΤϯίʔυ͞Εͨը૾σʔλΛJS ͔ΒReact Native ϒϦοδΛհͯ͠WebView ʹ౉͢ͷ͸ ৑௕Ͱ͕͔͔࣌ؒΔ •C++ ͰJSI ωΠςΟϒϞδϡʔϧΛ࡞੒ͨ͠ •JSI Λ࢖༻͢Δ͜ͱʹΑΓɺJavaScript ͸C++ ϗετΦϒδΣΫτ΁ͷࢀরΛอ࣋͠ɺϝιουΛݺ ͼग़͢͜ͱ͕Ͱ͖Δɻ͜ΕʹΑΓɺઌʹड़΂ͨNULLจࣈͷ໰୊Λ࠷ऴతʹճආͰ͖ͨɻ
31. ͜ͷลΓͷίʔυΛಡΉ
32. DQQCBTFI CBTF@FODPEF΍CBTF@EFDPEFͳͲͷ ؔ਺͕એݴ͞Ε͍ͯΔɻ࣮૷͸CBTFDQQ
33. DQQSFBDUOBUJWFRVJDLCBTFDQQ ࣮ࡍͷ+4*όΠϯσΟϯάॲཧɻ
    +BWB4DSJQU΁౉͢஋Λ
    KTJ7BMVF
    ͱͯ͠࡞੒ JOTUBMM#BTFؔ਺ͷ࣮૷ +BWB4DSJQUͷάϩʔόϧ +BWB4DSJQUͰ࢖͑ΔϓϩύςΟʢؔ਺ʣ
34. JPT2VJDL#BTFNN +4*όΠϯσΟϯάެ։༻ʹ 
 3FBDU3$5#SJEHF 1SJWBUFϔομʔϑΝΠϧΛΠϯϙʔτ DYY#SJEHFSVOUJNF΁ͷࢀরΛऔಘɻ
    $ ίʔυ಺Ͱૢ࡞༻ͷ+BWB4DSJQU
    7BMVFTΛ ࡞੒͢ΔͨΊʹඞཁͳSVOUJNFΦϒδΣΫτ SVOUJNFΛJOTUBMM#BTFؔ਺ʹ౉͠ ͯɺ+4*όΠϯσΟϯάΛ࡞੒
35. JOEFYUTͰؔ਺όΠϯσΟϯάΛએݴ DQQͰKTJ3VOUJNFHMPCBM TFU1SPQFSUZ
    ͨؔ͠਺ FYQPSU
    GVODUJPO
36. "QQUTY
    ͰJNQPSU FYQPSUͨ͠GVODUJPO
37. +4
    #VOEMF 

    +BWB4DSJQU
    +4
    5ISFBE +4* +4
    7. /BUJWF
    .PEVMFT 

    +BWB
    
    0CK
    $
    6*
    5ISFBE /BUJWF
    6* 

    +BWB
    
    0CK
    $
    $ 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
38. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΩονϋΠΫςοΫϒϩάͰ 
 3FBDU
    /BUJWF࠷৽৘ใΛ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN