Tweet
Tweet

Slide 1

Slide 1 text

Copyright© M&A SvelteKit 2022 / Kenjiro Kubota

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Copyright© M&A

Slide 4

Slide 4 text

Copyright© M&A

Slide 5

Slide 5 text

Copyright© M&A index SvelteKit

Slide 6

Slide 6 text

Copyright© M&A SvelteKit

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Copyright© M&A SSR SEO話 DeveloperExperience

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Copyright© M&A 🤔

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Copyright© M&A 🦄

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Copyright© M&A ⾒

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Copyright© M&A 🤔

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Copyright© M&A Next.js n Nuxt SvelteKit

Slide 28

Slide 28 text

Copyright© M&A SvelteKit

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Copyright© M&A Svelte Apple Music Web Svelte

Slide 31

Slide 31 text

Copyright© M&A

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Copyright© M&A

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Copyright© M&A

Slide 37

Slide 37 text

Copyright© M&A Props

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Copyright© M&A

Slide 41

Slide 41 text

Copyright© M&A 📦 SvelteKit /

Slide 42

Slide 42 text

Copyright© M&A 📦 SvelteKit

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Copyright© M&A

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Copyright© M&A ☣ 1.0RC dependabot PR 6

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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-*

Slide 53

Slide 53 text

Copyright© M&A

Slide 54

Slide 54 text

Copyright© M&A GitHub Svelte issue 葛

Slide 55

Slide 55 text

Copyright© M&A

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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