supabaseとSvelteKitで作るバックエンドレスなサーバーレスWebサイト / Creating with supabase and SvelteKit Backend-less serverless websites

フロントエンドカンファレンス沖縄2023
https://frontend-conf.okinawa.jp

Transcript

1. supabase SvelteKit Web 2023 2 0 23 . 11 . 18 @seike 4 60 1
2. 自己 @seike 46 0 - - @seike 46 0 - AWS Community Builder Serverless - Fusic - / 門 - / - - PHP - JAWS Days AWS Devday - Serverless Days Tokyo - - 大 工 子工 - PHP - 2
3. Agenda 1 .Svelte 2 .SvelteKit 3 . 4 .supabase 5 .supabase x SvelteKit 6 . 3
4. 01 Svelte
5. Svelte JavaScript Svelte Svelte 言 Write less code No virtual DOM DOM Truly reactive 自 Hooks 5
6. Write less code - Svelte 6 <script> let a = 1 ; let b = 2 ; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p> let State bind 行 方 築 行 [a] input p [a]
7. Write less code + Truly reactive 7 <script> let a = 1 ; let b = 2 ; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p> Svelte ⾒
8. TEMPLATE SYNTAX 8 {#if porridge.temperature > 1 00 } <p>too hot!</p> {:else if 8 0 > porridge.temperature} <p>too cold!</p> {:else} <p>just right!</p> {/if} {#each items as item} <li>{item.name} x {item.qty}</li> {/each} {#await promise} <p>waiting for the promise to resolve...</p> {:then value} <p>The value is {value}</p> {:catch error} <p>Something went wrong: {error.message}</p> {/await} {#key value} <div transition:fade>{value}</div> {/key} {#if }... {:else if } {/if} {#each as name, index} ... {/each} {#await }... {:then name}... {:catch name} … {/await} {#key }... {/key}
9. Props Props export 用 Props 用 生 9 Counter.svelte App.svelte
10. Store 10
11. Store writable 用 Store 用 subscribe 火 用 update set 用 Store 11
12. Component Hooks onMount DOM beforeUpdate state afterUpdate onDestroy 12
13. No virtual DOM Virtual DOM Dom 行 Virtual DOM 用 生 Svelte DOM 用 行 行 13
14. krausest React Vue 比 Svelte 14 https://krausest.github.io/js-framework-benchmark/current.html
15. 02 SvelteKit
16. SvelteKit Svelte Vite Rollup 用 っ 　 URL っ (SSR) 生 (SSG) 　高 SEO っ 　 っ 　 16
17. ▪ϧʔςΟϯάʢRoutingʣ URLͱͦΕʹରԠ͢Δίϯςϯπͷؔ࿈෇͚ ▪σʔλͷಡΈࠐΈʢLoading Dataʣ ϖʔδ΍ίϯϙʔωϯτ͕ϩʔυ͞ΕΔࡍʹඞཁͳσʔλΛऔಘ ▪ϑΥʔϜΞΫγϣϯʢForm Actionsʣ ϑΥʔϜͷૹ৴࣌ʹαʔόʔଆͰߦ͏ॲཧ ▪ϖʔδΦϓγϣϯʢPage Optionsʣ ݸʑͷϖʔδʹؔ࿈͢Δઃఆ΍ಈ࡞Λࢦఆ͢Δ ▪εςʔτ؅ཧʢState Managementʣ ΞϓϦέʔγϣϯͷঢ়ଶΛҰݩతʹ؅ཧ 17
18. Routing 18 src/routes/+page.svelte -> / <h 1 >Hello and welcome to my site!</h 1 > <a href="/about">About my site</a> src/routes/about/+page.svelte -> /about <h 1 >About this site</h 1 > <p>TODO...</p> <a href= /">Home</a> src/routes/blog/[slug]/+page.svelte -> blog/hoge <script> /** @type {import('./$types').PageData} */ export let data; </script> <h 1 >{data.title}</h 1 > <div>{@html data.content}</div> SvelteKit 用 src/routes URL +error.svelte +layout.svelte API +server.js URL
19. Loading data 19 src/routes/blog/[slug]/+page.js /** @type {import('./$types').PageLoad} */ export function load({ params }) { 　 return { 　　 post: { 　　　 title: `Title for ${params.slug} goes here`, 　　　 content: `Content for ${params.slug} goes here` 　　 } 　 }; } src/routes/blog/[slug]/+page.svelte <script> 　 /** @type {import('./$types').PageData} */ 　 export let data; </script> <h 1 >{data.post.title}</h 1 > <div>{@html data.post.content}</div> +page.svelte load +page.js load page data 用 Layout data +page.server.js cookies headers
20. Form actions 20 src/routes/login/+page.server.js /** @type {import('./$types').Actions} */ export const actions = { 　　 default: async (event) => { 　　 // TODO log the user in 　 } }; src/routes/login/+page.svelte <form method="POST"> 　 <label> 　　 Email 　　 <input name="email" type="email"> 　 </label> 　 <label> 　　 Password 　　 <input name="password" type="password"> 　 </label> 　 <button>Log in</button> </form> +page.server.js actions <form> 用 POST 築 築 ⾒ / 築 login -> ?/login register -> ?/register
21. Page options 21 +page.js/+page.server.js/+server.js export const prerender = true; +page.js export const ssr = true; っ 生 HTML 生 生 っ 生 SSR 生 示
22. State management 22 +page.server.js let user; /** @type {import('./$types').Actions} */ export const actions = { 　 default: async ({ request }) => { 　　 const data = await request.formData(); 　　 // NEVER DO THIS! 　　 user = { 　　　 name: data.get( ‘ name'), 　　　 embarrassingSecret: data.get( ‘ secret') 　　 }; 　 } } っ state user っload 用 っcontext store
24. - API - - API 用 - - DB 用 sqlite - - - - っ 欠 　 　 -> 身 築 or 24
25. 非 一 一夕 身
26. Point BaaS
27. 04 Supabase
28. supabase っPostgreSQL supabase PostgreSQL っ っ Google GitHub Facebook っ 自 API SQL RESTful API 自 PostgREST 用 っ 行 っ 一 自 行 っ GitHub 用 -> EC 2 28
29. Client 生 supabase Client URL KEY anonkey KEY anonkey CRUD 29 PUBLIC_SUPABASE_URL PUBLIC_SUPABASE_KEY
30. Anonkey Key anon Table CRUD 一方 人 人 30
31. Row Level Security PostgreSQL 用 row SQL 人 見 　 Row Level Security 　 DB 　 31 supabase Row Level Security Firebase 比 @dshukertjr https://qiita.com/dshukertjr/items/ 0 5 372 4 367 fda 267 8 f 2 41
32. SQL 行 行 SQL Editor 用 32
33. SQL Editor SQL 行 行 SQL Editor 用 33
34. 34 API from 行 select insert update delete 用 行 match like in 稿 行 order limit 用 ORM 用 　
35. Google GitHub Kakao Spotify 日 35
36. Storage API Amazon S 3 Storage 用 用 36
37. Edge Functions 用 Deno TypeScript WASM 37
38. 金 Free 2 用 人目 $25 用 用 38
39. 05 supabase X SvelteKit
40. SvelteKit supabase ⾒ SQL ⾒ Model Model 用 SQL SQL 行 手 SvelteKit supabase 自 API 生 40
41. UI 　 supabase SvelteKit 　 ⾒ UI UI 　 subscribe ⾒ 　 Web 41
42. 　 SvelteKit 用 Vercel 　 supabase 用 　 supabase SvelteKit 　 42
43. ⾒ 　 Supabase SvelteKit 用 　 　 用 　 Supabase 用 　 RowLevel RDBMS 一 43
44. 文 っFree 　 Free 人 用 PoC 用 用 　 2 ⾒ 用 ⾒ PRO 用 　 用 PRO 　 っ 　一方 手 　自 Amazon RDS 用 44
45. 方 https://github.com/supabase-community/svelte-kanban .env.example .env Rename 自 supabase URL anon_key SvelteKit supabase ⾒ 方 45
46. Adapter svelte.config.js 用 @sveltejs/adapter-auto 自 Adapter 46
49. Sveltekit x Supabase x Skelton 49 SvelteKit supabase ⾒ Svelte UI Skelton 用 ⾒ 自
50. 方 SQL 人 力 SQL 人 GUI API 身 supabase 50
52. 52 SvelteKit Point 1 supabase Point 2 SvelteKit X supabase Point 3 SvelteKit X supabase Point 4
53. Thank You We are Hiring ! https://recruit.fusic.co.jp/