Tweet
Tweet

Slide 1

Slide 1 text

JōtaiͰ͸͡ΊΔ ௒ܰྔ React.jsεςʔτ؅ཧ Super lightweight and primitive state management for React.js Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI

Slide 2

Slide 2 text

TinyKitten Freelance frontend engineer I 💖 OSS & Cat🐈 Born in Gunma🐴 Live in Tokyo🗼

Slide 3

Slide 3 text

Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢੜ·ΕͷϑϦʔϥϯεͷ
 ϑϩϯτΤϯυΤϯδχΞɻ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢ɻ ͪͳΈʹࠓ೔26ࡀʹͳΓ·ͨ͠ɻ

Slide 4

Slide 4 text

಺෦ςελʔืूத TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ

Slide 5

Slide 5 text

͸͡Ίʹ օ༷͸ʜ React.jsͷεςʔτ؅ཧɺͲ͏ͯ͠·͔͢ʁ ๻͸RecoilΛओʹ࢖͍ͬͯ·͢ɻ

Slide 6

Slide 6 text

͸͡Ίʹ ࠓճͷεϥΠυͰ͸ Jōtaiͱ͍͏εςʔτ؅ཧϥΠϒϥϦ 
 ʹ͍ͭͯ࿩͠·͢ɻ

Slide 7

Slide 7 text

JōtaiͬͯԿʁ ฏͨ͘ݴ͏ͱʜ ϓϦϛςΟϒ͔ͭॊೈͳ React.js༻ εςʔτ؅ཧϥΠϒϥϦ ൃԻ͸joe-tieͱ೔ຊޠͱಉ͡Ͱ͢ɻ

Slide 8

Slide 8 text

ެࣜͷઆ໌͔ΒҾ༻͢Δͱʜ ϘτϜΞοϓɾΞϓϩʔνͷεςʔτϚωʔδϝϯτ Recoil͔ΒΠϯεύΠΞ͞ΕͨAtomicͳϞσϧ TypeScriptࢤ޲ͷඇৗʹϛχϚϧͳAPIΛ࣋ͭ JōtaiͬͯԿʁ

Slide 9

Slide 9 text

JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ Pros.

Slide 10

Slide 10 text

όϯυϧαΠζ͸ʜ Mini fi ed 8.1kB Mini fi ed + Gzipped 3.2kB JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/[email protected]

Slide 11

Slide 11 text

ҰํRecoil͸ʜ Mini fi ed 72.3kB Mini fi ed + Gzipped 21.1kB JōtaiΛ࢖͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/[email protected]

Slide 12

Slide 12 text

JōtaiΛ࢖͏ͱʜ Mini fi ed 64.2kB Mini fi ed + Gzipped 17.9kB ͷ࡟ݮ͕Ͱ͖·͢ 0KB 20KB 40KB 60KB 80KB Mini fi ed Gzipped Recoil Jōtai JōtaiΛ࢖͏ͱԿ͕خ͍͔͠

Slide 13

Slide 13 text

΄͔ʹ΋͜ΜͳϢʔςΟϦςΟ(jotai/utils)͕͋Γ·͢ localStorageͰatom(state)ͷӬଓԽ SSRಋೖ࣌ͷϋΠυϨʔτ Redux෩ͷReducer/ActionTypes JōtaiͬͯԿʁ ެ͔ࣜΒҾ༻atomӬଓԽͷσϞ

Slide 14

Slide 14 text

JōtaiͷΠϚΠνͳͱ͜Ζ Cons.

Slide 15

Slide 15 text

Ͳ͜Ͱ΋atomΛ࡞Εͯ͠·͏ͷͰʜ ComponentͰatomΛ࡞Δͱ͖ɺ ௥ՃͰuseMemo/useRefͰ ϝϞԽΛ͢Δඞཁ͕͋Δ ެ͔ࣜΒҾ༻atom͕ಈతʹੜ੒͞Εͳ͍Α͏ʹ͢ΔσϞ JōtaiͷΠϚΠνͳͱ͜Ζ

Slide 16

Slide 16 text

atom͸WeakMapʹ֨ೲ͞ΕΔͷͰʜ atom͕͢΂ͯͷίϯϙʔωϯτ͔Β ࢀর͞Εͳ͘ͳͬͨ৔߹ ΞϯϚ΢ϯτ࣌ͳͲ GCͰ஋͕ॳظԽ͞ΕΔ JōtaiͷΠϚΠνͳͱ͜Ζ https://twitter.com/dai_shi/status/1380885195549597696

Slide 17

Slide 17 text

Recoil vs Jōtai ͦ΋ͦ΋ɺ Jōtai͸RecoilͱԿ͕ҧ͏ͷʁ

Slide 18

Slide 18 text

։ൃऀ Recoil͸FacebookνʔϜʹΑͬͯ։ൃ͞Ε͍ͯͯɺ Jōtai͸Poimandres(ݩreact-spring) νʔϜͷҰ෦։ൃऀʹΑͬͯ։ൃ͞Ε͍ͯΔ Recoil vs Jōtai

Slide 19

Slide 19 text

։ൃͷج४ Recoil͸େن໛։ൃ΍༷ʑͳཁٻʹ ରԠ͢ΔΑ͏ʹઃܭ͞Ε͍ͯΔ Jōtai͸ϓϦϛςΟϒͳAPIΛॏࢹ͢ΔઃܭΛ͍ͯ͠Δ Recoil vs Jōtai

Slide 20

Slide 20 text

ٕज़తͳࠩҟ Recoil͸BUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtai͸atomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)

Slide 21

Slide 21 text

ٕज़తͳࠩҟ Recoil͸BUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtai͸atomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)

Slide 22

Slide 22 text

ݸਓతʹ͸ʜ େ͖ͳϓϩδΣΫτͷ৔߹͸΍ͬͺΓɺ Recoil͕҆৺͔ͳͱࢥ͍·͢ɻ খ͍͞ϓϩδΣΫτ΍ɺContext APIͰ஍ࠈʹͳ͍ͬͯΔ ϓϩδΣΫτʹ͸ɺ JōtaiΛಋೖͯ͠΋͍͍͔ͳͱࢥ͍·͢ɻ ·ͱΊ

Slide 23

Slide 23 text

खલຯḩͰ͕͢ʜ JōtaiΛ࢖ͬͨϓϩδΣΫτΛ࡞Γ·ͨ͠ɻ Wordle෩ͷࠃ಺ͷӺ໊౰ͯήʔϜͰ͢ɻ ͥͻ͓ࢼ͍ͩ͘͠͞ɻ JōtaiΛ࢖ͬͨϓϩδΣΫτ IUUQTTUBUMFUJOZLJUUFONF

Slide 24

Slide 24 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI