Fresh

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. deno
   6
   

   View Slide

7. ......ͷલʹ
   7
   

   View Slide

8. Node.js
   8
   

   View Slide

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

   View Slide

10. deno
    10
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

14. CSR, SSR
    14
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Fresh
    20
    

    View Slide

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

    View Slide

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

    View Slide

23. Preact
    23
    

    View Slide

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

    View Slide

25. Island Architecture
    25
    

    View Slide

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

    View Slide

27. https://www.patterns.dev/posts/islands-architecture/
    

    View Slide

28. FreshͷϝϦοτɾσϝϦοτ
    • ͳΜ͔͠Ό΂Δ
    28
    

    View Slide

29. ऴྃ
    29
    

    View Slide