$30 off During Our Annual Pro Sale. View Details »

Fresh

 Fresh

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

Matsui Masashi

July 21, 2022
Tweet

More Decks by Matsui Masashi

Other Decks in Programming

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