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

SvelteKitを本番投入してみて

kubotak
November 19, 2022

 SvelteKitを本番投入してみて

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

kubotak

November 19, 2022
Tweet

More Decks by kubotak

Other Decks in Programming

Transcript

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

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

    Web Laravel ( )
  3. Copyright© M&A

  4. Copyright© M&A

  5. Copyright© M&A index SvelteKit

  6. Copyright© M&A SvelteKit

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

    Nuxt 3
  8. Copyright© M&A SSR SEO話 DeveloperExperience

  9. Copyright© M&A Nuxt(v 3 RC) Next.js(v 1 2 ) SvelteKit

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

    Solid.js 2022/07 Qwik City Astro
  11. Copyright© M&A Nuxt(v 3 RC) Vue.js Web Vue 3 Vite

    Nitro feature
  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
  13. Copyright© M&A Next.js(v 1 2 ) React Web v 1

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

    React React ISR Next.js
  15. Copyright© M&A 🤔

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

  17. Copyright© M&A 🦄

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

    Next.js/Nuxt
  19. Copyright© M&A Svelte Write less code No virtual DOM Vanilla

    JS Truly reactive state React Vue.js UI feature
  20. Copyright© M&A ⾒

  21. Copyright© M&A SvelteKit/Svelte State Of JS 2 020 / 2021

    Vue.js SFC Vite 葛
  22. Copyright© M&A Solid.js DOM UI DOM JSX React feature

  23. Copyright© M&A Solid.js State Of JS 202 1 Svelte 稿

    SSR ⾒ https://www.solidjs.com/guides/server 👉 SolidStart SSR
  24. Copyright© M&A 🤔

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

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

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

  28. Copyright© M&A SvelteKit

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

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

  31. Copyright© M&A

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

  33. Copyright© M&A

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

  35. Copyright© M&A 🚨 npm run check CSS CI svelte-check SvelteLanguageTools(LSP)

    https://github.com/sveltejs/language-tools
  36. Copyright© M&A

  37. Copyright© M&A Props

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

  39. Copyright© M&A Playwright Playwright Cypress Puppeteer Node.js E 2 E

    Microsoft OSS Puppeteer Chromium/firefox/webkit feature
  40. Copyright© M&A

  41. Copyright© M&A 📦 SvelteKit /

  42. Copyright© M&A 📦 SvelteKit

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

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

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

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

  47. Copyright© M&A

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

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

    f 5 b 9 ceea
  50. Copyright© M&A ☣ 1.0RC dependabot PR 6

  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
  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-*
  53. Copyright© M&A

  54. Copyright© M&A GitHub Svelte issue 葛

  55. Copyright© M&A

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

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