Fresh - Speaker Deck

Fresh

by Matsui Masashi

Slide 1

Slide 1 text

Fresh The next-gen web framework. @circled9 2022-07-20 1

Slide 2

Slide 2 text

About Me দҪ ਖ਼ࢤ Matsui Masashi @circled9 Frontend Engineer water-cell inc. 2

Slide 3

Slide 3 text

ۙگ • ϦϞʔτͰՈ͔Βग़ͯͳ͍ • ௨ۈ͕ΘΓʹຖ೔ࢄาͯͨ͠Β૫ͤͨ • ମॏ6kgݮɺෲғ8cmݮʢ౰ࣾൺʣ • Ͱ΋݈߁਍அͻ͔͔ͬͬͨ • ΋͠΍೘؅݁ੴʢn೥ͿΓ2ճ໨......ʣ • ࠓ೔͸Ξϧίʔϧ߇͑·͢ 3

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ • deno • CSR, SSR • Fresh 4

Slide 5

Slide 5 text

͸͡Ίʹ • ࠓ೔͸denoͷWebϑϨʔϜϫʔΫͷFreshͷ঺հΛ͠·͢ɻ • ͱ͍͏ͷΛΰʔϧʹͯ͠ɺͦͷपลͷ࿩Λ͍͖ͯ͠·͢ɻ • ͳͷͰFreshࣗମͷ࿩͸গͳΊͰ͢ɺ͝ΊΜͳ͍͞ɻ 5

Slide 6

Slide 6 text

deno 6

Slide 7

Slide 7 text

......ͷલʹ 7

Slide 8

Slide 8 text

Node.js 8

Slide 9

Slide 9 text

Node.js • JavaScript͕ಈ͘ϥϯλΠϜ • αʔόʔαΠυͷ࣮ߦ؀ڥͱ͚ͯͩ͠Ͱͳ͘ɺϑϩϯτΤϯυͷπʔ ϧͱͯ͠΋࢖ΘΕΔ • ݱࡏͷ࠷৽൛͸18.6.0 9

Slide 10

Slide 10 text

deno 10

Slide 11

Slide 11 text

deno • JavaScriptͱTypeScript͕ಈ͘ϥϯλΠϜ • Node.jsͷ࡞ऀ ( Ryan Dahl ) ͕࡞ͬͨ • ݱࡏͷ࠷৽൛͸1.23.4 $ deno --version deno 1.23.4 (release, aarch64-apple-darwin) v8 10.4.132.8 typescript 4.7.4 11

Slide 12

Slide 12 text

deno • Webඪ४ͷػೳΛαϙʔτ͍ͯ͠Δ • fetchͱ͔ • Secure by default • ໌ࣔతʹڐՄ͠ͳ͍ͱϑΝΠϧͷಡΈॻ͖ͳͲͷػೳ͕࢖͑ͳ͍ 12

Slide 13

Slide 13 text

deno • ֤छπʔϧ͸denoࣗମ͕ఏڙ͍ͯ͠Δ • lint, fmt, test • όϯυϧͯ͠୯ಠͷJavaScriptϑΝΠϧʹ͢Δ͜ͱ΋Ͱ͖Δ • ϒϥ΢β޲͚ͷόϯυϥʔ͸ͳ͍ • ͳͷͰϒϥ΢β޲͚ʹ͸esbuildͳͲΛ࢖͏ 13

Slide 14

Slide 14 text

CSR, SSR 14

Slide 15

Slide 15 text

CSR, SSR • ϨϯμϦϯάͷํ๏ͷݺͼํ • ͦΕͧΕҎԼͷ಄จࣈΛऔ͍ͬͯΔ • Client Side Rendering • Server Side Rendering • ଞʹ΋SSGͱISR͕͋Δ͕͜͜Ͱ͸ׂѪ • Static Site Generation • Incremental Static Regeneration 15

Slide 16

Slide 16 text

CSR • ΫϥΠΞϯτଆͰը໘ΛϨϯμʔ͢Δ • αʔόʔ͸੩తͳHTML΍JSΛ഑৴͢Δ͚ͩ • HTMLʹ͸ۭͷdiv͚͕ͩఆٛ͞Ε͍ͯΔ͜ͱ͕ଟ͍ 16

Slide 17

Slide 17 text

SSR • αʔόʔଆͰHTMLΛϨϯμʔͯ͠ΫϥΠΞϯτʹ഑৴͢Δ • JS͕࣮ߦͰ͖ͳ͍Ϋϩʔϥʔʹ΋ରԠͰ͖Δ • ͨͩͷHTMLʹͳΔͷͰΫϥΠΞϯτଆͰ͸hydrateΛߦ͏ 17

Slide 18

Slide 18 text

hydrate • ਫͰ໭͢తͳҙຯɺଟ෼ • αʔόʔ͕ੜ੒ͨ͠HTML͸ΠϕϯτͳͲ͕ઃఆ͞Ε͍ͯͳ͍ • hydrate͢Δ͜ͱͰΫϦοΫͳͲͷΠϕϯτͳͲ͕ઃఆ͞ΕΔ 18

Slide 19

Slide 19 text

͜Μͳײ͡ // ࡶͳΧ΢ϯλʔ const Counter = () => { const [count, setCount] = useState(0); const plus = () => setCount(count + 1); const minus = () => setCount(count - 1); return (

{count}

+ -

); };

+ -

Slide 20

Slide 20 text

Fresh 20

Slide 21

Slide 21 text

Fresh • denoͷWebϑϨʔϜϫʔΫ • denoͷެࣜϒϩάͰ΋࢖ΘΕ͍ͯΔ • ࠷ۙ1.0ʹͳͬͨ 21

Slide 22

Slide 22 text

Fresh • ΤοδαʔόʔͰͷSSRΛ૝ఆ͍ͯ͠Δ • PreactͰϨϯμϦϯάΛߦ͏ • Island ArchitectureΛ࠾༻͍ͯ͠Δ 22

Slide 23

Slide 23 text

Preact 23

Slide 24

Slide 24 text

Preact • Fast 3kB alternative to React with the same modern API • ↑ ެࣜΑΓҾ༻ • ܰྔ൛React • hooksͱ͔΋ͪΌΜͱ࢖͑Δ 24

Slide 25

Slide 25 text

Island Architecture 25

Slide 26

Slide 26 text

Island Architecture • ը໘ͷཁૉΛౡʹݟཱͯͨΞʔΩςΫνϟ • ੩తͳཁૉ͸୯७ͳHTMLͱͯ͠ѻ͏ • ΠϯλϥΫςΟϒͳཁૉ͚ͩhydrate͢Δ 26