SvelteKitを本番投入してみて

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

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 :)`