Fresh

新潟WEBアプリケーション勉強会 Vol.1でFreshについて話した資料です。
https://steeq.connpass.com/event/254066/

Transcript

1. Fresh The next-gen web framework. @circled9 2022-07-20 1
2. About Me দҪ ਖ਼ࢤ Matsui Masashi @circled9 Frontend Engineer water-cell inc. 2
3. ۙگ • ϦϞʔτͰՈ͔Βग़ͯͳ͍ • ௨ۈ͕ΘΓʹຖ೔ࢄาͯͨ͠Β૫ͤͨ • ମॏ6kgݮɺෲғ8cmݮʢ౰ࣾൺʣ • Ͱ΋݈߁਍அͻ͔͔ͬͬͨ • ΋͠΍೘؅݁ੴʢn೥ͿΓ2ճ໨......ʣ • ࠓ೔͸Ξϧίʔϧ߇͑·͢ 3
4. ࠓ೔࿩͢͜ͱ • deno • CSR, SSR • Fresh 4
5. ͸͡Ίʹ • ࠓ೔͸denoͷWebϑϨʔϜϫʔΫͷFreshͷ঺հΛ͠·͢ɻ • ͱ͍͏ͷΛΰʔϧʹͯ͠ɺͦͷपลͷ࿩Λ͍͖ͯ͠·͢ɻ • ͳͷͰFreshࣗମͷ࿩͸গͳΊͰ͢ɺ͝ΊΜͳ͍͞ɻ 5
6. deno 6
7. ......ͷલʹ 7
8. Node.js 8
9. Node.js • JavaScript͕ಈ͘ϥϯλΠϜ • αʔόʔαΠυͷ࣮ߦ؀ڥͱ͚ͯͩ͠Ͱͳ͘ɺϑϩϯτΤϯυͷπʔ ϧͱͯ͠΋࢖ΘΕΔ • ݱࡏͷ࠷৽൛͸18.6.0 9
10. deno 10
11. 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
12. deno • Webඪ४ͷػೳΛαϙʔτ͍ͯ͠Δ • fetchͱ͔ • Secure by default • ໌ࣔతʹڐՄ͠ͳ͍ͱϑΝΠϧͷಡΈॻ͖ͳͲͷػೳ͕࢖͑ͳ͍ 12
13. deno • ֤छπʔϧ͸denoࣗମ͕ఏڙ͍ͯ͠Δ • lint, fmt, test • όϯυϧͯ͠୯ಠͷJavaScriptϑΝΠϧʹ͢Δ͜ͱ΋Ͱ͖Δ • ϒϥ΢β޲͚ͷόϯυϥʔ͸ͳ͍ • ͳͷͰϒϥ΢β޲͚ʹ͸esbuildͳͲΛ࢖͏ 13
14. CSR, SSR 14
15. CSR, SSR • ϨϯμϦϯάͷํ๏ͷݺͼํ • ͦΕͧΕҎԼͷ಄จࣈΛऔ͍ͬͯΔ • Client Side Rendering • Server Side Rendering • ଞʹ΋SSGͱISR͕͋Δ͕͜͜Ͱ͸ׂѪ • Static Site Generation • Incremental Static Regeneration 15
16. CSR • ΫϥΠΞϯτଆͰը໘ΛϨϯμʔ͢Δ • αʔόʔ͸੩తͳHTML΍JSΛ഑৴͢Δ͚ͩ • HTMLʹ͸ۭͷdiv͚͕ͩఆٛ͞Ε͍ͯΔ͜ͱ͕ଟ͍ 16
17. SSR • αʔόʔଆͰHTMLΛϨϯμʔͯ͠ΫϥΠΞϯτʹ഑৴͢Δ • JS͕࣮ߦͰ͖ͳ͍Ϋϩʔϥʔʹ΋ରԠͰ͖Δ • ͨͩͷHTMLʹͳΔͷͰΫϥΠΞϯτଆͰ͸hydrateΛߦ͏ 17
18. hydrate • ਫͰ໭͢తͳҙຯɺଟ෼ • αʔόʔ͕ੜ੒ͨ͠HTML͸ΠϕϯτͳͲ͕ઃఆ͞Ε͍ͯͳ͍ • hydrate͢Δ͜ͱͰΫϦοΫͳͲͷΠϕϯτͳͲ͕ઃఆ͞ΕΔ 18
19. ͜Μͳײ͡ // ࡶͳΧ΢ϯλʔ const Counter = () => { const [count, setCount] = useState(0); const plus = () => setCount(count + 1); const minus = () => setCount(count - 1); return ( <div> <div>{count}</div> <button onClick={plus}>+</button> <button onClick={minus}>-</button> </div> ); }; <!-- Ϩϯμʔ͢Δͱ͜͏ͳΔ --> <div> <div>0</div> <button>+</button> <button>-</button> </div> 19
20. Fresh 20
21. Fresh • denoͷWebϑϨʔϜϫʔΫ • denoͷެࣜϒϩάͰ΋࢖ΘΕ͍ͯΔ • ࠷ۙ1.0ʹͳͬͨ 21
22. Fresh • ΤοδαʔόʔͰͷSSRΛ૝ఆ͍ͯ͠Δ • PreactͰϨϯμϦϯάΛߦ͏ • Island ArchitectureΛ࠾༻͍ͯ͠Δ 22
23. Preact 23
24. Preact • Fast 3kB alternative to React with the same modern API • ↑ ެࣜΑΓҾ༻ • ܰྔ൛React • hooksͱ͔΋ͪΌΜͱ࢖͑Δ 24
25. Island Architecture 25
26. Island Architecture • ը໘ͷཁૉΛౡʹݟཱͯͨΞʔΩςΫνϟ • ੩తͳཁૉ͸୯७ͳHTMLͱͯ͠ѻ͏ • ΠϯλϥΫςΟϒͳཁૉ͚ͩhydrate͢Δ 26
27. https://www.patterns.dev/posts/islands-architecture/
28. FreshͷϝϦοτɾσϝϦοτ • ͳΜ͔͠Ό΂Δ 28
29. ऴྃ 29