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

by Shoken Fujisaki

Slide 1

Slide 1 text

3FBDU/BUJWF.BUTVSJ-5   3FBDU/BUJWF   +4*ιʔείʔυϦʔσ Οϯά 4IPLFO'VKJTBLJ

Slide 2

Slide 2 text

ࣗݾ঺հ w 4IPLFO'VKJTBLJ !TIPLFOY w גࣜձࣾΩονϋΠΫ   ڞಉ૑ۀऀ$50 w ڞஶ3FBDU/BUJWFʹࢧ͑Β͑Δاۀ w ΩονϋΠΫΤϯδχΞνʔϜͰ   ݄ץ3/'FBUVSFT࿈ࡌத   IUUQTUFDILJUDIIJLFDPN

Slide 3

Slide 3 text

ࠓճ͸+4*ʹ஫໨ͨ͠   ίʔυϦʔσ ΟϯάͰ͢

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#SJEHF $ 4IBEPX5ISFBE :PHB /BUJWF.PEVMFT   +BWB0CK$ +4#VOEMF   +BWB4DSJQU +4$ +40/ +40/ ඇಉظΩϡʔ 6*5ISFBE +45ISFBE /BUJWF6*   +BWB0CK$ 3FBSDIJUFDUVSFҎલ #SJEHF

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

+4#VOEMF   +BWB4DSJQU +45ISFBE 3FBSDIJUFDUVSFҎ߱ /FX"SDIJUFDUVSFͱ+4* +4* +47. /BUJWF.PEVMFT   +BWB0CK$ 6*5ISFBE /BUJWF6*   +BWB0CK$

Slide 10

Slide 10 text

+4#VOEMF   +BWB4DSJQU +45ISFBE 3FBSDIJUFDUVSFҎ߱ /FX"SDIJUFDUVSFͱ+4* +4* +47. /BUJWF.PEVMFT   +BWB0CK$ 6*5ISFBE /BUJWF6*   +BWB0CK$ $ +40/͕ͳ͘ͳͬͨ #SJEHFܦ༝ͷඇಉظॲཧ͔Β   ௚઀ͷಉظॲཧ΁ $Ͱڞ௨ͷ/BUJWF.PEVMFT ͕ॻ͚ΔΑ͏ʹͳͬͨ -B[ZMPBEJOH͕Մೳʹ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

೥݄ʹ+4$͔Β+4*΁ͷมߋ͕ ίϛοτ͞ΕΔ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFDPNNJUDEFGCCCBGDBCBCE 3$5$YY#SJEHFͰҎԼͷมߋ   มߋલ+4$&YFDVUPS'BDUPSZ มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF

Slide 13

Slide 13 text

+4*&YFDVUPS'BDUPSZ   ͱ͍͏ͷ͕ॏཁͦ͏🤔

Slide 14

Slide 14 text

3$5$YY#SJEHFͰҎԼͷมߋ   มߋલ+4$&YFDVUPS'BDUPSZ มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF

Slide 15

Slide 15 text

ݱࡏͷ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

Slide 16

Slide 16 text

+4*&YFDVUPS3VOUJNF*OTUBMMFS 🤔

Slide 17

Slide 17 text

)FSNFT&YFDVUPS'BDUPSZI IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$PNNPOIFSNFTFYFDVUPS)FSNFT&YFDVUPS'BDUPSZI )FSNFT&YFDVUPS'BDUPSZͷୈҰҾ਺͕   +4*&YFDVUPS3VOUJNF*OTUBMMFS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

+4*/BUJWF.PEVMFTDQQ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFTDQQ SVOUJNFHMPCBM HFU1SPQFSUZ"T'VODUJPO   SVOUJNFHMPCBM HFU1SPQFSUZ"T0CKFDU   Λݺͼग़ͯ͠࡞੒ͨ͠NPEVMFΛฦ͢

Slide 22

Slide 22 text

+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

Slide 23

Slide 23 text

ίϥϜTFU5JNFPVUͷ࣮૷

Slide 24

Slide 24 text

SFBDUOBUJWF-JCSBSJFT$PSF5JNFST   +45JNFSTKT /BUJWF5JNJOHͱ͸

Slide 25

Slide 25 text

SFBDUOBUJWF-JCSBSJFT$PSF5JNFST   /BUJWF5JNJOHKT 5SVCP.PEVMFʂ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

TFU5JNFPVU͸5VSCP.PEVMFԽࡁΈ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

͜ͷลΓͷίʔυΛಡΉ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

"QQUTYͰJNQPSU FYQPSUͨ͠GVODUJPO

Slide 37

Slide 37 text

+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

Slide 38

Slide 38 text

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΩονϋΠΫςοΫϒϩάͰ   3FBDU/BUJWF࠷৽৘ใΛ࿈ࡌத   IUUQTUFDILJUDIIJLFDPN