SvelteKitを本番投入してみて

フロントエンドカンファレンス沖縄2022

Transcript

1. Copyright© M&A
   SvelteKit
   2022 / Kenjiro Kubota
   

   View Slide

2. Copyright© M&A
   Profile
   kubotak-is
   kubotak_public
   kenjiro.kubota
   M&A
   TypeScript
   PHP
   https://kubotak.page
   Web Laravel ( )
   

   View Slide

3. Copyright© M&A
   

   View Slide

4. Copyright© M&A
   

   View Slide

5. Copyright© M&A
   index
   SvelteKit
   
   
   

   View Slide

6. Copyright© M&A
   SvelteKit
   

   View Slide

7. Copyright© M&A
   
   
   HTTP API
   
   
   Nuxt.js
   
   
   Nuxt.js v
   2
   + TypeScript
   
   
   
   Nuxt
   3
   
   
   

   View Slide

8. Copyright© M&A
   SSR
   
   
   SEO話
   
   
   
   
   
   DeveloperExperience
   
   
   
   
   

   View Slide

9. Copyright© M&A
   Nuxt(v
   3
   RC)
   
   
   Next.js(v
   1 2
   )
   
   
   SvelteKit
   
   
   Solid.js
   2022/07
   Qwik City
   
   
   
   Astro
   
   
   

   View Slide

10. Copyright© M&A
    Nuxt(v
    3
    RC)
    
    
    Next.js(v
    1 2
    )
    
    
    SvelteKit
    
    
    Solid.js
    2022/07
    Qwik City
    
    
    
    Astro
    
    
    
    

    View Slide

11. Copyright© M&A
    Nuxt(v
    3
    RC)
    Vue.js Web
    Vue
    3
    
    
    Vite
    
    
    
    Nitro
    
    
    feature
    

    View Slide

12. Copyright© M&A
    Nuxt(v
    3
    RC)
    v
    2
    +TypeScript(CompositionAPI)
    
    
    Vue.js
    
    
    Vite
    
    
    Vue
    3
    2022 7 RC 2021/10/13
    
    
    Next.js
    

    View Slide

13. Copyright© M&A
    Next.js(v
    1 2
    )
    React Web
    v
    1 3
    
    
    SSR/SSG/ISR
    feature
    

    View Slide

14. Copyright© M&A
    Next.js(v
    1 2
    )
    
    
    SSR/
    Webpack(+swc)
    
    
    Turbopuck Vite
    
    
    React
    
    
    React
    
    
    ISR Next.js
    

    View Slide

15. Copyright© M&A
    🤔
    

    View Slide

16. Copyright© M&A
    Pros/Cons 🫠
    SSR
    
    
    
    
    
    Nuxt
    
    
    DeveloperExperience
    
    
    
    
    Vite Nuxt
    
    
    
    
    Next.js
    

    View Slide

17. Copyright© M&A
    🦄
    

    View Slide

18. Copyright© M&A
    SvelteKit
    Svelte
    
    
    SSR/SSG/SPA
    
    
    Vite
    feature
    Svelte Web
    React/Vue.js Next.js/Nuxt
    

    View Slide

19. Copyright© M&A
    Svelte
    Write less code
    
    
    
    
    No virtual DOM
    
    
    Vanilla JS
    
    
    Truly reactive
    
    
    state
    React Vue.js UI
    feature
    

    View Slide

20. Copyright© M&A
    ⾒
    
    
    

    View Slide

21. Copyright© M&A
    SvelteKit/Svelte
    State Of JS
    2 020
    /
    2021
    
    Vue.js SFC
    
    
    Vite
    
    
    葛
    
    
    

    View Slide

22. Copyright© M&A
    Solid.js
    DOM UI
    DOM
    
    
    
    
    JSX React
    feature
    

    View Slide

23. Copyright© M&A
    Solid.js
    State Of JS
    202 1
    Svelte 稿
    
    
    
    
    SSR ⾒
    
    
    https://www.solidjs.com/guides/server
    
    
    👉
    
    
    SolidStart SSR
    

    View Slide

24. Copyright© M&A
    🤔
    

    View Slide

25. Copyright© M&A
    Next.js/
    Nuxt
    3
    /SvelteKit Pros/Cons
    
    
    Next.js(React)
    
    
    

    View Slide

26. Copyright© M&A
    React/Next.js
    
    
    Qiita/Zenn
    
    
    
    Nuxt Vue.js v
    2
    Nuxt
    3
    
    
    Svelte
    

    View Slide

27. Copyright© M&A
    Next.js n
    
    
    Nuxt
    
    
    SvelteKit
    

    View Slide

28. Copyright© M&A
    SvelteKit
    

    View Slide

29. Copyright© M&A
    SvelteKit 葛
    
    
    SvelteKit M&A
    
    
    
    🚀
    

    View Slide

30. Copyright© M&A
    Svelte
    Apple Music Web
    Svelte
    
    
    
    
    

    View Slide

31. Copyright© M&A
    

    View Slide

32. Copyright© M&A
    🚀 Vite
    
    
    🚨
    
    
    🎭 Playwright
    
    
    📦
    🕳
    
    
    ☣
    

    View Slide

33. Copyright© M&A
    

    View Slide

34. Copyright© M&A
    🚀 Vite
    dev HMR
    Nuxt v
    2
    +TypeScript
    

    View Slide

35. Copyright© M&A
    🚨
    npm run check CSS
    
    
    CI
    
    
    svelte-check SvelteLanguageTools(LSP)
    https://github.com/sveltejs/language-tools
    

    View Slide

36. Copyright© M&A
    

    View Slide

37. Copyright© M&A
    Props
    

    View Slide

38. Copyright© M&A
    🎭 Playwright
    SvelteKit Playwright Svelte
    2022/11 React/Solid.js/Svelte/Vue(3/2)
    

    View Slide

39. Copyright© M&A
    Playwright
    Playwright
    Cypress Puppeteer Node.js E
    2
    E
    Microsoft OSS Puppeteer
    
    
    Chromium/firefox/webkit
    
    
    feature
    

    View Slide

40. Copyright© M&A
    
    
    
    

    View Slide

41. Copyright© M&A
    📦
    SvelteKit
    /
    

    View Slide

42. Copyright© M&A
    📦
    SvelteKit
    

    View Slide

43. Copyright© M&A
    📦
    SvelteKit
    about(/about)
    

    View Slide

44. Copyright© M&A
    Props
    +page.server.ts +page.svelte
    API
    

    View Slide

45. Copyright© M&A
    Props
    +page.server.ts +page.svelte
    API
    

    View Slide

46. Copyright© M&A
    CSR(SPA)
    
    
    /about/__data.json path+__data.json
    +page.server.ts
    
    
    葛 Props
    prefetch __data.json
    

    View Slide

47. Copyright© M&A
    

    View Slide

48. Copyright© M&A
    🕳
    Svelte svelte/store
    SvelteKit
    
    
    葛
    
    
    

    View Slide

49. Copyright© M&A
    Qiita
    https://qiita.com/kubotak/items/be
    8 25
    6 9
    a
    3342
    f
    5
    b
    9
    ceea
    

    View Slide

50. Copyright© M&A
    ☣
    
    
    
    1.0RC
    
    
    dependabot
    
    
    PR 6
    

    View Slide

51. Copyright© M&A
    1
    .
    0
    .
    0
    -next.
    428
    
    
    
    1
    .
    0
    .
    0
    -next.
    437
    
    vite.config.ts
    
    
    goto data invalidate
    
    
    1
    .
    0
    .
    0
    -next.
    469
    
    invalidate invalidateAll
    

    View Slide

52. Copyright© M&A
    1
    .
    0
    .
    0
    -next.
    4 81
    
    src/hooks.ts src/server.hooks.ts
    
    
    1
    .
    0
    .
    0
    -next
    504
    
    PageError Error
    
    
    1
    .
    0
    .
    0
    -next.
    5 38
    
    svelte-check a
    11
    y aria-*
    

    View Slide

53. Copyright© M&A
    

    View Slide

54. Copyright© M&A
    GitHub Svelte
    issue 葛
    

    View Slide

55. Copyright© M&A
    

    View Slide

56. Copyright© M&A
    SvelteKit
    
    
    SvelteKit
    
    
    
    This is
    
    
    SSR/SSG
    

    View Slide

57. Copyright© M&A
    () => `Thanks for watching this :)`
    

    View Slide